{"id":2412,"date":"2017-05-27T10:46:22","date_gmt":"2017-05-27T02:46:22","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2412"},"modified":"2017-05-27T10:46:22","modified_gmt":"2017-05-27T02:46:22","slug":"js%e5%8d%95%e9%a1%b5%e9%9d%a2%e7%ae%80%e5%8d%95%e8%b7%af%e7%94%b1%e5%b8%a6slide%e5%8a%a8%e7%94%bb","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2412","title":{"rendered":"js\u5355\u9875\u9762\u7b80\u5355\u8def\u7531\u5e26slide\u52a8\u753b"},"content":{"rendered":"<pre>\/**\r\n * @\u5b57\u7b26\u4e32\u8f6cdom\r\n *\/\r\n\r\nfunction parseDom(arg) {\r\n    var objE = document.createElement(\"div\");\r\n    objE.innerHTML = arg;\u3000\r\n    return objE.childNodes;\r\n};\r\n\r\n  \/\/\u7236\u7c7b\r\nfunction Router() {\r\n    this.routes = {};\r\n    this.script = {};\r\n    this.currentUrl = '';\r\n}\r\n\r\n\/\/\u8bb0\u5f55\u8def\u7531\r\nRouter.prototype.route = function(path,callback) {\r\n    this.routes[path] = callback || function(){};\r\n};\r\n\r\n\/\/\u52a0\u8f7d\u9875\u9762\u52a8\u753b\r\nRouter.prototype.refresh = function() {\r\n   this.currentUrl = location.hash.slice(1) || '\/';\r\n   var self=this;\r\n    var len = this.currentUrl.split('\/').length;\r\n    var $wrap = document.querySelector('#wrap');\r\n    var $wrapA = document.querySelectorAll('.wrap');\r\n\r\n    self.Ajax.get(self.currentUrl, function(data) {\r\n      if(self.currentUrl!=='\/'){\r\n          if (len &gt;= Router.len) {\r\n            $wrap.className = \"slide-left\";\r\n            if ($wrapA[0]) {\r\n                self.Animates($wrapA[0], true);\r\n            }\r\n        } else {\r\n            $wrap.className = \"slide-right\";\r\n            if ($wrapA[0]) {\r\n                self.Animates($wrapA[0], false)\r\n            }\r\n        }\r\n        for (var i = 0; i &lt; parseDom(data).length; i++) {\r\n            $wrap.appendChild(parseDom(data)[i]);\r\n        }\r\n        setTimeout(function() {\r\n            if (document.querySelector('.aa')) {\r\n                $wrap.removeChild(document.querySelector('.aa'));\r\n            }\r\n        }, 400)\r\n        Router.len = len;\r\n      }else{\r\n        window.location.href='#\/home.html'\r\n      }\r\n    });\r\n\r\n    if(this.routes[this.currentUrl]){\r\n       this.routes[this.currentUrl]();\r\n    }\r\n};\r\n\/\/\u76d1\u542chash\u53d8\u5316\r\nRouter.prototype.init = function() {\r\n    window.addEventListener('load', this.refresh.bind(this), false);\r\n    window.addEventListener('hashchange', this.refresh.bind(this), false);\r\n}\r\n\r\n\/\/\u8bf7\u6c42\u9875\u9762\r\nRouter.prototype.Ajax={\r\n    get: function(url, fn) {\r\n      this.loading();\r\n        var obj = new XMLHttpRequest(); \/\/ XMLHttpRequest\u5bf9\u8c61\u7528\u4e8e\u5728\u540e\u53f0\u4e0e\u670d\u52a1\u5668\u4ea4\u6362\u6570\u636e          \r\n        obj.open('GET', url, true);\r\n        obj.onreadystatechange = function() {\r\n            if (obj.readyState == 4 &amp;&amp; obj.status == 200 || obj.status == 304) { \/\/ readyState==4\u8bf4\u660e\u8bf7\u6c42\u5df2\u5b8c\u6210\r\n              setTimeout(function(){\r\n               if(document.querySelector('.loadding')){\r\n                 document.body.removeChild(document.querySelector('.loadding'));\r\n               }\r\n              fn.call(this, obj.responseText); \/\/\u4ece\u670d\u52a1\u5668\u83b7\u5f97\u6570\u636e\r\n              },1000)              \r\n            }else if(obj.readyState == 4 &amp;&amp; obj.status == 404){\r\n              fn.call(this, false)\r\n            }\r\n\r\n        };\r\n        obj.send(null);\r\n    },\r\n    loading:function(){\r\n      var $div='&lt;div class=\"loadding\"&gt;&lt;\/div&gt;';\r\n      var $el=parseDom($div);\r\n      if(!document.querySelector('.loadding')){\r\n        document.body.appendChild($el[0]);\r\n      }\r\n      \r\n    }\r\n}\r\n\/**\r\n * @\u9875\u9762\u5207\u6362\u52a8\u753b\r\n *\/\r\nRouter.prototype.Animates=function(el, flag) {\r\n    if (flag) {\r\n        el.style.cssText = '-webkit-animation: fadeOut 1s;' +\r\n            '-o-animation: fadeOut 1s;' +\r\n            'animation: fadeOut 1s;' +\r\n            'animation-iteration-count: 1;' +\r\n            '-webkit-animation-iteration-count: 1;'\r\n    } else {\r\n        el.style.cssText = '-webkit-animation: fadeOutR 1s;' +\r\n            '-o-animation: fadeOutR 1s;' +\r\n            'animation: fadeOutR 1s;' +\r\n            'animation-iteration-count: 1;' +\r\n            '-webkit-animation-iteration-count: 1;'\r\n\r\n    }\r\n    el.className = 'aa';\r\n}\r\n\r\n\/**\r\n * @\u52a0\u8f7d\u811a\u672c\r\n *\/\r\nRouter.prototype.LoadJS=function(file,transition){\r\n  if(document.querySelector('.script')){\r\n    document.body.removeChild(document.querySelector('.script'));\r\n  }\r\n       var self = this;\r\n         var _body= document.getElementsByTagName('body')[0];\r\n             var scriptEle= document.createElement('script');\r\n             scriptEle.className=\"script\";\r\n             scriptEle.type= 'text\/javascript';\r\n             scriptEle.src= file;\r\n             scriptEle.async = true;\r\n             SPA_RESOLVE_INIT = null;\r\n             \/\/\u907f\u514d\u91cd\u590d\u811a\u672c\r\n             if(scriptEle.src in this.script){\r\n              return;\r\n             }\r\n             _body.appendChild(scriptEle);\r\n             this.script[scriptEle.src]=file;\r\n    }\r\n \r\nwindow.Router = new Router();\r\nwindow.Router.init();\r\n\r\n\/\/\u8def\u7531\u52a0\u8f7djs\r\nwindow.Router.route('\/log\/loglist.html',function(){\r\n  window.Router.LoadJS('js\/loglist.js');\r\n});\r\nwindow.Router.route('\/home.html',function(){\r\n  window.Router.LoadJS('js\/home.js');\r\n});\r\n<\/pre>\n<p class=\"post-copyright\">\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a<a href=\"http:\/\/www.qdabc.cn\">\u524d\u7aefABC<\/a> &raquo; <a href=\"http:\/\/www.qdabc.cn\/?p=2412\">js\u5355\u9875\u9762\u7b80\u5355\u8def\u7531\u5e26slide\u52a8\u753b<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>\/** * @\u5b57\u7b26\u4e32\u8f6cdom *\/ function parseDom(arg) { var objE = document.createElement(&#8220;div&#8221;); objE.innerHTML  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[9,360,137,359,283],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2412"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2412"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2412\/revisions"}],"predecessor-version":[{"id":2413,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2412\/revisions\/2413"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2412"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}