js单页面简单路由带slide动画

/**
 * @字符串转dom
 */

function parseDom(arg) {
    var objE = document.createElement("div");
    objE.innerHTML = arg;　
    return objE.childNodes;
};

  //父类
function Router() {
    this.routes = {};
    this.script = {};
    this.currentUrl = '';
}

//记录路由
Router.prototype.route = function(path,callback) {
    this.routes[path] = callback || function(){};
};

//加载页面动画
Router.prototype.refresh = function() {
   this.currentUrl = location.hash.slice(1) || '/';
   var self=this;
    var len = this.currentUrl.split('/').length;
    var $wrap = document.querySelector('#wrap');
    var $wrapA = document.querySelectorAll('.wrap');

    self.Ajax.get(self.currentUrl, function(data) {
      if(self.currentUrl!=='/'){
          if (len >= Router.len) {
            $wrap.className = "slide-left";
            if ($wrapA[0]) {
                self.Animates($wrapA[0], true);
            }
        } else {
            $wrap.className = "slide-right";
            if ($wrapA[0]) {
                self.Animates($wrapA[0], false)
            }
        }
        for (var i = 0; i < parseDom(data).length; i++) {
            $wrap.appendChild(parseDom(data)[i]);
        }
        setTimeout(function() {
            if (document.querySelector('.aa')) {
                $wrap.removeChild(document.querySelector('.aa'));
            }
        }, 400)
        Router.len = len;
      }else{
        window.location.href='#/home.html'
      }
    });

    if(this.routes[this.currentUrl]){
       this.routes[this.currentUrl]();
    }
};
//监听hash变化
Router.prototype.init = function() {
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}

//请求页面
Router.prototype.Ajax={
    get: function(url, fn) {
      this.loading();
        var obj = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据          
        obj.open('GET', url, true);
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState==4说明请求已完成
              setTimeout(function(){
               if(document.querySelector('.loadding')){
                 document.body.removeChild(document.querySelector('.loadding'));
               }
              fn.call(this, obj.responseText); //从服务器获得数据
              },1000)              
            }else if(obj.readyState == 4 && obj.status == 404){
              fn.call(this, false)
            }

        };
        obj.send(null);
    },
    loading:function(){
      var $div='<div class="loadding"></div>';
      var $el=parseDom($div);
      if(!document.querySelector('.loadding')){
        document.body.appendChild($el[0]);
      }
      
    }
}
/**
 * @页面切换动画
 */
Router.prototype.Animates=function(el, flag) {
    if (flag) {
        el.style.cssText = '-webkit-animation: fadeOut 1s;' +
            '-o-animation: fadeOut 1s;' +
            'animation: fadeOut 1s;' +
            'animation-iteration-count: 1;' +
            '-webkit-animation-iteration-count: 1;'
    } else {
        el.style.cssText = '-webkit-animation: fadeOutR 1s;' +
            '-o-animation: fadeOutR 1s;' +
            'animation: fadeOutR 1s;' +
            'animation-iteration-count: 1;' +
            '-webkit-animation-iteration-count: 1;'

    }
    el.className = 'aa';
}

/**
 * @加载脚本
 */
Router.prototype.LoadJS=function(file,transition){
  if(document.querySelector('.script')){
    document.body.removeChild(document.querySelector('.script'));
  }
       var self = this;
         var _body= document.getElementsByTagName('body')[0];
             var scriptEle= document.createElement('script');
             scriptEle.className="script";
             scriptEle.type= 'text/javascript';
             scriptEle.src= file;
             scriptEle.async = true;
             SPA_RESOLVE_INIT = null;
             //避免重复脚本
             if(scriptEle.src in this.script){
              return;
             }
             _body.appendChild(scriptEle);
             this.script[scriptEle.src]=file;
    }
 
window.Router = new Router();
window.Router.init();

//路由加载js
window.Router.route('/log/loglist.html',function(){
  window.Router.LoadJS('js/loglist.js');
});
window.Router.route('/home.html',function(){
  window.Router.LoadJS('js/home.js');
});

欢迎分享本文，转载请保留出处：前端ABC » js单页面简单路由带slide动画