js路由—backbone的路由的实现01

backbone的路由分两部分。其中一个是路由配置router，另外一个是和路由相关的history，用作浏览器的前进后退等。

先看下histroy部分。

1 首先，初始化路由配置数组，然后绑定checkurl上下文对象是backbone

this.handlers = [];
_.bindAll(this, 'checkUrl');

2 全局对象是window的情况

// Ensure that `History` can be used outside of the browser.
    if (typeof window !== 'undefined') {
      this.location = window.location;
      this.history = window.history;
    }

3 缓存几个正则，第一个是＃或 / 开头， 或空白结尾； 第二个是 /开头 或 / 结尾； 第三个是 / 结尾

  // Cached regex for stripping a leading hash/slash and trailing space.路由修正，开头的／，＃或结尾的空格
  var routeStripper = /^[#\/]|\s+$/g;

  // Cached regex for stripping leading and trailing slashes.跟路径修正
  var rootStripper = /^\/+|\/+$/g;

  // Cached regex for detecting MSIE.
  var isExplorer = /msie [\w.]+/;

  // Cached regex for removing a trailing slash.末尾的／修正
  var trailingSlash = /\/$/;

4 设置默认状态是路由未开启

History.started = false;

下面是原型的一些关键方法

 

History.prototype = {
    interval: 50,
    atRoot: function() {
      return this.location.pathname.replace(/[^\/]$/, '$&/') === this.root;
      //判断pathname后面加上／, 与this.root是否是全等的，是就说明在跟目录下
    },
    getHash: function(window){
      var match = (window || this).location.href.match(/#(.*)$/);
          return match ? match[1] : '';
    },

 

getFragment: function(fragment, forcePushState){
      if(fragment === null){
        if(this._hasPushState || !this._wantsHashChange || forcePushState){
          //支持pushState， 或hashchange， 或强制性的支持pushState
          fragement = this.location.pathname; //取出url的pathname就是fragment
          var root = this.root.replace(trailingSlash, '');//root去掉尾部的／
          if(!fragement.indexOf(root)){
            fragement = fragement.substr(root.length);//如果fragment中没有root路径，那就让出前面的root路径的长度的位置????这块还有疑问
          }
        }else{
          fragement = this.getHash();//没提供参数，并且不支持pushState，则取到＃锚点
        }
      }
      return fragement.replace(routeStripper, '');//提供fragment参数，则进行路由修正
    }

 

1 原型中其他条件准备好，开始监听hash变化

    start: function(options){
      if (History.started) throw new Error("Backbone.history has already been started");
      History.started = true;
      //如果历史纪录已经处于开启状态，抛出错误。不只跟实例有关，还与构造函数本身的属性相关

      this.options = $.extend({root: '/'}, this.options, options);
      //扩展配置，设置默认root是/，扩展this的配置以及start传入的配置
      this.root = this.options.root;
      this._wantsHashChange = this.options.hashChange !== false;
      //hashChange不明显设置为false，则默认想要hashChange
      this._wantsPushState = !! this.options.pushState;
      this._hasPushState = !!(this.options.pushState && this.history && this.history.pushState)
      //是否支持pushState，取决于设置，并且是否有浏览器的历史纪录支持
      var fragment = this.getFragment();
      var docMode = document.documentMode;//documentMode是一个IE的私有属性，在IE8+中被支持。
      
      this.root = ('/' + this.root + '/').replace('rootStripper', '/');//给root加上前后／并且修正为只有一个

      if(this._hasPushState){
        $(window).on('popstate', this.checkUrl);//支持pushState
      } else if(this._wantsHashChange && ('onhashchange' in window) && !oldIE){//支持hashchange
        $(window).on('hashchange', this.checkUrl);
      } else if(this._wantsHashChange){
        this._checkUrlInterval = setInterval(this.checkUrl, this.interval);//都不支持
      }

      this.fragement = fragement;
      var loc = this.location;

      // If we've started off with a route from a `pushState`-enabled browser,
      // but we're currently in a browser that doesn't support it...
      // 兼容性处理 参数设置与当前浏览器支持情况冲突的时候
      if(this._wantsHashChange && this._wantsPushState){//既需要hashchange也需要pushstate
          if(!this._hasPushState && !this.atRoot()){
            //不在跟目录，并且不支持pushState
            this.fragement = this.getFragment(null, true);
            //取出fragment，并且强制要求pushstate
            this.location.replace(this.root + '#' + this.fragement);
            //给出地址，让浏览器自己处理
            return true;
          }else if(this._hasPushState && this.atRoot() && loc.hash){
            //如果是锚点导航并且在跟目录里面的，用锚点
            this.fragement = this.getHash().replace(routeStripper, '');
            this.history.replaceState({}, document.title, this.root + this.fragement);
          }
      }
      if(!this.options.silent){
        return this.loadUrl();
      }
    }

 

2 停止history监听

// 停止历史支持
    stop: function() {
       $(window).off('popstate', this.checkUrl).off('hashchange', this.checkUrl);
      clearInterval(this._checkUrlInterval);
      History.started = false;
    },

3 添加路由映射

 // 导航到相应的route地址。。。添加fragment改变时候，需要检查的路由。
    // 这里用handlers队列处理， 防止快速的改变地址但是没处理完成 引起的问题
    route: function(route, callback) {
      this.handlers.unshift({route: route, callback: callback});
    },

 

4 检查url是否改变，改变则loadurl

// 检查url 兼容性处理
    checkUrl: function(e) {
      var current = this.getFragment();
      if (current === this.fragment) return false;
      this.loadUrl() || this.loadUrl(this.getHash());
    },

// load当前的URL片段 如果真的有相应的route地址处理函数 则执行它
    loadUrl: function(fragmentOverride) {
      var fragment = this.fragment = this.getFragment(fragmentOverride);
      
     var matched =this.handlers.some(function(handler, index, array) {
        if (handler.route.test(fragment)) {
          handler.callback(fragment);
          return true;
        }
      });
      return matched;
    },

 

5 设置导航，更新hash

// 导航 根据url片段导航去相应的画面 兼容性处理
    navigate: function(fragment, options) {
      if (!History.started) return false;
      if (!options || options === true) options = {trigger: options};
      fragment = this.getFragment(fragment || '');
      if (this.fragment === fragment) return;
      this.fragment = fragment;
      var url = this.root + fragment;

      // If pushState is available, we use it to set the fragment as a real URL.
      if (this._hasPushState) {
        this.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, url);

      // If hash changes haven't been explicitly disabled, update the hash
      // fragment to store history.
      } else if (this._wantsHashChange) {
        this._updateHash(this.location, fragment, options.replace);

      // If you've told us that you explicitly don't want fallback hashchange-
      // based history, then `navigate` becomes a page refresh.
      } else {
        return this.location.assign(url);
      }
      if (options.trigger) this.loadUrl(fragment);
    },

    // Update the hash location, either replacing the current entry, or adding
    // a new one to the browser history.
    // 更新hash值 包含替换当前hash 或者是增加历史到浏览器的历史记录中
    _updateHash: function(location, fragment, replace) {
      if (replace) {
        var href = location.href.replace(/(javascript:|#).*$/, '');
        location.replace(href + '#' + fragment);
      } else {
        // Some browsers require that `hash` contains a leading #.
        location.hash = '#' + fragment;
      }
    }