backbone库的结构http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html

本文的例子来自http://blog.csdn.net/eagle_110119/article/details/8842032

Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文中称Action)。

当我们开发一个单页应用时,常常会遇到这样两个问题:

  我们在同一个页面中通过用户的操作来隐藏、显示HTML块,为用户提供一个无刷新、完整流畅的体验,但用户可能并不知道他当前正处于同一个页面中,因此他希望通过浏览器的“前进”和“后退”按钮来返回和前进到上一步操作。当他真正这样操作时,会离开当前页面,这显然不是用户所期望的。

  另一个问题是用户在单页应用中操作,当他读到一篇好的文章,或看到一个中意的商品时,他可能会将URL收藏起来或分享给自己的好友。但当他下一次重新打开这个链接地址,看到的却是应用的初始化状态,而并不是当初那篇文章或那个商品。

以上来自http://blog.csdn.net/eagle_110119/article/details/8842032

 

1.1  Router

 

ok,下面我们先上例子再看:

复制代码
var AppRouter = Backbone.Router.extend({  
    routes : {  
        '' : 'main',  
        'topic' : 'renderList',  
        'topic/:id' : 'renderDetail',  
        '*error' : 'renderError'  
    },  
    main : function() {  
        console.log('应用入口方法');  
    },  
    renderList : function() {  
        console.log('渲染列表方法');  
    },  
    renderDetail : function(id) {  
        console.log('渲染详情方法, id为: ' + id);  
    },  
    renderError : function(error) {  
        console.log('URL错误, 错误信息: ' + error);  
    }  
});  
  
var router = new AppRouter();  
Backbone.history.start();  
复制代码

这里我们自定义的route,main,renderList,renderDetail和renderError都会被绑定到AppRouter的原型上,这里与之前的model,collection和view是一样的。

下面代码:

var router = new AppRouter();

我们来看一下构造器:

var Router = Backbone.Router = function(options) {
        options || (options = {});
        if (options.routes) this.routes = options.routes;//可以在实例中定义路由规则,而且权值高,将不使用原型上的routers规则
        this._bindRoutes();//进入_bindRoutes方法
        this.initialize.apply(this, arguments);//执行initialize,使用时自己定义扩展
    };

这里initialize依旧需要我们使用的时候自行定义,ok,我们进入_bindRoutes方法。

复制代码
_bindRoutes: function() {
            if (!this.routes) return;//没有定义routes规则,将返回
            this.routes = _.result(this, 'routes');
            var route, routes = _.keys(this.routes);//获取属性名
            while ((route = routes.pop()) != null) {
                this.route(route, this.routes[route]);//依次执行route方法
            }
        }
复制代码

关于_的result方法和key方法,之前我们都已经提及过,看一下原型上的route方法

这里方法比较麻烦,充斥着正则表达式,我们先将源码,分开阅读,先弄懂正则,再去理清逻辑。

复制代码
route: function(route, name, callback) {
            if (!_.isRegExp(route)) route = this._routeToRegExp(route);//`转成相应的正则表达式
            if (_.isFunction(name)) {
                callback = name;
                name = '';
            }
            if (!callback) callback = this[name];//将同名的方法相关联
..........
复制代码

看一下_的isRegExp方法

each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp'], function(name) {
        _['is' + name] = function(obj) {
            return toString.call(obj) == '[object ' + name + ']';
        };
    });

不多说,我们看一下_routeToRegExp方法

复制代码
_routeToRegExp: function(route) {
            route = route.replace(escapeRegExp, '\\$&')//  /[\-{}\[\]+?.,\\\^$|#\s]/g,给所有匹配的字符前面加转义符'\'
                .replace(optionalParam, '(?:$1)?')// /\((.*?)\)/g
                .replace(namedParam, function(match, optional) {
                    return optional ? match : '([^\/]+)';  //  /(\(\?)?:\w+/g
                })
                .replace(splatParam, '(.*?)');
            return new RegExp('^' + route + '$');
        }
复制代码

分析之前,我们先看一下这4个正则

var optionalParam = /\((.*?)\)/g;
var namedParam    = /(\(\?)?:\w+/g;
var splatParam    = /\*\w+/g;
var escapeRegExp  = /[\-{}\[\]+?.,\\\^$|#\s]/g;

这里我们逐一讲下,/g标识全局匹配。先看optionalParam

分解一下:'\('匹配'(','()'表示子表达式,其中的'.*?',表示匹配任何字符,但是要忽略优先,像*这样的量词,正则默认是匹配优先的,可以理解为尽可能的去匹配更多的字符,如果在其后加了?,则表示在完成的要求上,尽可能少匹配。然后'\)'

匹配一个')',源码中有用replace方法,注意其中的\\$&,这个则表示,将正则匹配的结果前面添加'\',这里$&就是标识正则匹配的结果。注意这里的.*?因为最后有个)需要匹配,所以文本中的()的所有字符都必须匹配,这样你写成(.*)也能达到要求,其实就是,虽然告诉正则引擎要尽可能的少匹配,但是不能匹配最后的)仍然需要继续匹配。

 

namedParam:分解成两块:(\(\?)? 和:\w+,前者是一个子表达式,它匹配'(?',匹配数是没有或者1个,后者是匹配':',然后是至少一个字符(字母或数字或下划线或汉字)。

splatParam: 这个简单,匹配'*',然后是至少一个字符(字母或数字或下划线或汉字)

escapeRegExp:这个很长,其实很简单,先看[..........],表示分组,即表示只需要匹配分组中的任意一个就可以了,再看分组的内容有:'[','-','{}',']','+','?','.','\','^','$','|','#',空格(空字符串)

这个方法只是将我们传入的字符串,进行装饰,变成需要的正则表达式。

继续看route方法的后半部分

复制代码
.....
var router = this;
            Backbone.history.route(route, function(fragment) {//执行route方法
                var args = router._extractParameters(route, fragment);
                callback && callback.apply(router, args);
                router.trigger.apply(router, ['route:' + name].concat(args));
                router.trigger('route', name, args);
                Backbone.history.trigger('route', router, name, args);
            });
            return this;
        }
复制代码

调用了Backbone库的history原型上的route方法,传入了正则规则,和回调函数。我们看一下Backbone.history.route这个方法

route: function(route, callback) {
            this.handlers.unshift({route: route, callback: callback});//从头插入。将相关正则和触发函数关联后,存入对象属性数组
        }

将相关正则和触发函数关联后,存入对象属性数组中,以上完成了new Router构造器的任务,例子中还有一个

Backbone.history.start();

 

 

1.2  History

例子中使用了与history相关的模块,那我们先不看start这个方法,由于页面中我们并没有实例化相关的history,很有可能history是在backbone库中自行实例化的,那我们先看一下结构:

var History = Backbone.History = function() {} //history构造器
var routeStripper = /^[#\/]|\s+$/g; //相关正则
...
History.started = false;
_.extend(History.prototype, Events, {}) //history的原型
Backbone.history = new History;//实例化History

老规矩,先看构造器

复制代码
var History = Backbone.History = function() { //history构造器
        this.handlers = [];
        _.bindAll(this, 'checkUrl');//将this中的属性绑定checkUrl函数
        // Ensure that `History` can be used outside of the browser.
        if (typeof window !== 'undefined') {
            this.location = window.location;//原生location信息
            this.history = window.history;//存在一条历史记录
        }
    }
复制代码

history实例对象Backbone.History拥有了一些bom原生的参数信息。

在看start方法之前,我们再过一下history中存在的几条正则

var routeStripper = /^[#\/]|\s+$/g;
var rootStripper = /^\/+|\/+$/g;
var isExplorer = /msie [\w.]+/;
var trailingSlash = /\/$/;

我们逐条来看一下:

routeStripper:分解一下:首先看到|符号,它的前面是[#\/],表示分组,意思是文本开头可以是#或者/,如何都不是那可以匹配|后面的\s+,表示开头是空白字符。

rootStripper: 与上一条看上去相似,实际上不同,分解一下,首先看到|符号,它的前面是\/+表示文本开头可以至少有/,如果没有/则匹配|的后者\/+,感觉一样啊。。。

isExplorer:这个比较简单,匹配msie,后面至少一个字符(字母或数字或下划线或汉字)

trailingSlash:这个匹配文本结尾最后一个字符是/

下面我们来看一下start方法:

复制代码
start: function(options) {
            if (History.started) throw new Error("Backbone.history has already been started");//默认history.start属性是false,没有开启,如果没有调用就开启了肯定是要抛错的
            History.started = true;//调用start之后,将History.started设置为true。

            // Figure out the initial configuration. Do we need an iframe?
            // Is pushState desired ... is it available?
            this.options          = _.extend({}, {root: '/'}, this.options, options);//将参数,都传入对象的options属性中。该例子中只有{root:'/'}
            this.root             = this.options.root;//默认是'/'一般系统默认是/,但只要你自定义,都可以被覆盖
            this._wantsHashChange = this.options.hashChange !== false;//这里默认hashChange为undefined,默认_wantsHashChange是true
            this._wantsPushState  = !!this.options.pushState;//!!转成boolean型,默认this.options.pushState为undefined,所有这个例子中wantsPushState为false
            this._hasPushState    = !!(this.options.pushState && this.history && this.history.pushState);//因为pushState为undefined,所以hasPushState为false
            var fragment          = this.getFragment();//这里没有传值,默认是undefined
            var docMode           = document.documentMode;//获取IE版本(使用于IE8+)
            //navigator.userAgent取浏览器版本详细信息,以下考虑旧版本的IE(IE7-)
            var oldIE             = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7));//低版本IE没有documentMode属性

            // Normalize root to always include a leading and trailing slash.
            this.root = ('/' + this.root + '/').replace(rootStripper, '/');
            //兼容低版本IE
            if (oldIE && this._wantsHashChange) {
                this.iframe = Backbone.$('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
                this.navigate(fragment);
            }

            // Depending on whether we're using pushState or hashes, and whether
            // 'onhashchange' is supported, determine how we check the URL state.
            if (this._hasPushState) {
                Backbone.$(window).on('popstate', this.checkUrl);
            } else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {//非老版本IE
                Backbone.$(window).on('hashchange', this.checkUrl);//为window绑定hashchange监听事件,事件函数是checkUrl,主要是控制url的变化,
            } else if (this._wantsHashChange) {
                this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
            }

            // Determine if we need to change the base url, for a pushState link
            // opened by a non-pushState browser.
            this.fragment = fragment;
            var loc = this.location;//获取当前location的信息
            var atRoot = loc.pathname.replace(/[^\/]$/, '$&/') === this.root;//处理路径名

            // Transition from hashChange to pushState or vice versa if both are
            // requested.
            if (this._wantsHashChange && this._wantsPushState) {

                // 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._hasPushState && !atRoot) {
                    this.fragment = this.getFragment(null, true);
                    this.location.replace(this.root + this.location.search + '#' + this.fragment);
                    // Return immediately as browser will do redirect to new url
                    return true;

                    // Or if we've started out with a hash-based route, but we're currently
                    // in a browser where it could be `pushState`-based instead...
                } else if (this._hasPushState && atRoot && loc.hash) {
                    this.fragment = this.getHash().replace(routeStripper, '');
                    this.history.replaceState({}, document.title, this.root + this.fragment + loc.search);
                }
            }
            if (!this.options.silent) return this.loadUrl();//默认silent没有
        }
复制代码

我使用的浏览器是ff,暂时我们认为源码的运行流程按非IE来看,(之后我们会看一下代码处理IE和低版本IE的部分)

先看一下

var fragment          = this.getFragment();

看一下getFragment方法:

复制代码
getFragment: function(fragment, forcePushState) {
            if (fragment == null) {
                if (this._hasPushState || !this._wantsHashChange || forcePushState) {
                    fragment = this.location.pathname;
                    var root = this.root.replace(trailingSlash, '');
                    if (!fragment.indexOf(root)) fragment = fragment.slice(root.length);
                } else {
                    fragment = this.getHash();//正则匹配去取锚点
                }
            }
            return fragment.replace(routeStripper, '');
        }
复制代码

再看一下getHash()方法:

getHash: function(window) {
            var match = (window || this).location.href.match(/#(.*)$/);//取子表达式所匹配的内容,实际上去取锚点,match结果第一个是匹配整个正则,第二个是$1
            return match ? match[1] : '';//如果子表达式匹配了,则返回,没有则返回空,实际上返回#之后的信息
        }

因为,我们的地址是file:///E:/backbone-learn/demo6.html是没有锚点的,所以,这个fragment返回应该是空字符串。

看到这部分代码:

复制代码
if (this._hasPushState) {
                Backbone.$(window).on('popstate', this.checkUrl);
            } else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {//非老版本IE
                Backbone.$(window).on('hashchange', this.checkUrl);//为window绑定hashchange监听事件,事件函数是checkUrl,主要是控制url的变化,
            } else if (this._wantsHashChange) {
                this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
            }
复制代码

这里只要是绑定了hashchange的监听事件,触发函数是checkUrl。看一下吧

复制代码
checkUrl: function(e) {
            var current = this.getFragment();//获取当前的锚点
            if (current === this.fragment && this.iframe) {//兼容低版本IE
                current = this.getFragment(this.getHash(this.iframe));
            }
            if (current === this.fragment) return false;//没有发生改变则返回
            if (this.iframe) this.navigate(current);
            this.loadUrl();
        }
复制代码

这里getFragment实际上是一个获取当前锚点的方法。如果锚点发生改变了,事件会触发,获取最新的锚点,更换上去。哪里实现更换了?看一下loadUrl:

复制代码
loadUrl: function(fragmentOverride) {
            var fragment = this.fragment = this.getFragment(fragmentOverride);
            return _.any(this.handlers, function(handler) {
                if (handler.route.test(fragment)) {
                    handler.callback(fragment);
                    return true;
                }
            });
        }
复制代码

在一次获取当前锚点,return了一个_.any的方法,看一下:

复制代码
var any = _.some = _.any = function(obj, iterator, context) {
        iterator || (iterator = _.identity);
        var result = false;
        if (obj == null) return result;
        if (nativeSome && obj.some === nativeSome) return obj.some(iterator, context);//支持原生some
        each(obj, function(value, index, list) { //自定义方法实现
            if (result || (result = iterator.call(context, value, index, list))) return breaker;
        });
        return !!result;
    }
复制代码

对于some方法,我开始也不了解,于是乎百度了一下,给大家一个例子吧。(some的例子)   http://msdn.microsoft.com/zh-SG/library/ie/ff679978.aspx                     

这里浏览器支持some方法,理解一下一下代码:

return _.any(this.handlers, function(handler) {
                if (handler.route.test(fragment)) {
                    handler.callback(fragment);
                    return true;
                }
            });

这里的handler.callback是什么,这个回调应该是:

复制代码
function(fragment) {//执行route方法,所有的正则绑定这个回调函数
                var args = router._extractParameters(route, fragment);
                callback && callback.apply(router, args);//这里的回调是我们自定义的触发函数
                router.trigger.apply(router, ['route:' + name].concat(args));//同时可以触发router+name的事件,该事件需要我们自行创建
                router.trigger('route', name, args);//同时触发route事件
                Backbone.history.trigger('route', router, name, args);//router与history相关联,触发history的route事件,以上一个触发事件需要我们在页面定义。
            }
复制代码

如果你乱了,请看一下router的构造器,不记得的,一路做一点记录。其中一个代码if(handler.route.test(fragment))可以这样理解,我们在初始化router构造器的时候,传入了一系列的hash规则,现在规则定义,如果我们传入了一个锚点,或是监听到了一个锚点的改变,取到这个这个锚点(最新的锚点)去这个我们先前定义好的hash规则中去匹配,如果匹配成功,则执行相应的我们定义的hash回调函数,此时这里的回调函数,才是我们之前自己定义的回调函数。如果我们修改的url,这里的hash规则没有一个能匹配,则返回fslse。这边回调有点多,大家耐心理解下,如果我哪里理解错了,也麻烦提出来修正。

ok,如果匹配成功了,第一会执行我们自定义的响应方法(回调函数),系统内部会触发三个监听事件,这三个监听事件需要你事先写在页面中

1:route:name类型的监听事件

2:route类型的监听事件

3:之前两个是router上的监听事件,这个是history的监听事件。是也是route类型的

至此,我们完成了FF下的start流程。

 

1.3  路由规则设定

从上面的例子中就能看出,它可以将不同的URL锚点导航到对应的Action方法中。

以上的源码分析,我们也应该清楚Backbone的路由导航是由Backbone.Router和backbone.History两个类共同完成的。

这里例子中给出了概括的描述:

Router类用于定义和解析路由规则,并将Url映射到Action

History类用于监听URL的变化,和触发Action方法。

 

1.4   Hash规则

例子中给一些描述:

我们再根据例子看一下:

•http://localhost/index.html // 输出:应用入口方法
•http://localhost/index.html#topic // 输出:渲染列表方法
•http://localhost/index.html#topic/1023 // 输出:渲染详情方法, id为:1023
•http://localhost/index.html#about // 输出:URL错误, 错误信息: about

下面是我们定义的hash规则

routes : {
            '' : 'main',
            'topic' : 'renderList',
            'topic/:id' : 'renderDetail',
            '*error' : 'renderError'
        }

注重看一下topic/:id和*error这两个规则,经过_routeToRegExp方法会生成什么规则

topic/:id

*error

看一下生成的这两个正则,topic/([^/]+),这个字符串在生成正则时,会转成

topic\/([^/]+),这个正则可以匹配topic/后面是一个非/的任意字符(至少要有一个,空格也是可以的)。另外,topic后面的内容用()包裹,可以获取这个子表达式的值,这也是为什么我们可以取到topic/后面的信息了

第二条(.*?)

()是一个子表达式,可以用$1或$&获取,其中.*?,标识忽略优先,或者叫非贪婪。尽可能少的去匹配达到完成任务,但如果一次不匹配,还是要继续匹配,宗旨是尽可能少。

我们如何获取子表达式的匹配内容呢?在_extractParameters方法里

var params = route.exec(fragment).slice(1);//匹配我们生成的正则,这里获取子表达式的信息

 

 

1.5   pushState规则

backbone.history还支持pushState方法的URL,pushState是HTML5提供的一种新特性,它能操作当前浏览器的URL(而不是仅仅改变锚点),同时不会导致页面刷新,从而使单页面,从而使单页面应用使用起来更像一套完整的流程。

HTML5的部分,暂时不做讨论。

 

1.6  路由相关方法

route方法,navigate方法,stop方法

1.6.1  route

先看route方法,上例子:

router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize){  
    // todo  
});  

route方法,之前分析过了,上述的例子告诉我们,除了将hash规则和触发函数写在原型上,也可以直接写在实例上。

 

1.6.2  navigate

先上例子:

router.navigate('topic/1000', {  
    trigger: true  
}); 

看一下navigate方法:

navigate: function(fragment, options) {
            Backbone.history.navigate(fragment, options);
            return this;
        }

调用的是History的navigate方法

复制代码
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;//将定义的hash传入fragment属性中

            var url = this.root + fragment;//拼接url

            // Don't include a trailing slash on the root.
            if (fragment === '' && url !== '/') url = url.slice(0, -1);
            // 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);//更新hash
                if (this.iframe && (fragment !== this.getFragment(this.getHash(this.iframe)))) {
                    // Opening and closing the iframe tricks IE7 and earlier to push a
                    // history entry on hash-tag change.  When replace is true, we don't
                    // want this.
                    if(!options.replace) this.iframe.document.open().close();
                    this._updateHash(this.iframe.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);//跳转到该url  
             }
            if (options.trigger) return this.loadUrl(fragment);//设置trigger后,重新执行正则匹配,触发监听事件等,如果不设置,将不会触发相应关联方法和监听事件
        }
复制代码

这个方法大概的作用是这样的,先获取传入的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;//更新hash
            }
        }
复制代码

接下来,你可以设置trigger属性为true,也可以不设置,这就意味着,你是否需要执行loadUrl方法,这个方法帮你执行生成的正则匹配,执行关联的函数,监听的事件等。换言之,如果你不设置的话,将不会触发该一系列事件和函数方法。

 

1.6.3   stop

还记得我们是通过Backbone.history.start()方法来启动路由监听的,你也可以随时调用Backbone.history.stop()方法来停止监听,看例子:

Backbone.history.stop();

看一下history原型上的stop方法:

stop: function() {
            Backbone.$(window).off('popstate', this.checkUrl).off('hashchange', this.checkUrl);
            clearInterval(this._checkUrlInterval);
            History.started = false;
        }

清除事件的清除,清除定时器的清除定时器,最后将History.started置为false,这里为什么会有定时器呢?之前我们留了一个低版本IE的问题,下面我们来看一下

 

1.7  低版本IE的部分问题

回到history的start方法中:

复制代码
if (this._hasPushState) {
                Backbone.$(window).on('popstate', this.checkUrl);//HTML5
}
else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {//非老版本IE Backbone.$(window).on('hashchange', this.checkUrl);//为window绑定hashchange监听事件,事件函数是checkUrl,主要是控制url的变化, } else if (this._wantsHashChange) {//低版本
this._checkUrlInterval = setInterval(this.checkUrl, this.interval); }
复制代码

可以看到,对于不支持onhashchange的浏览器,history会使用定时器去监听它。

注意这些属性名,我们就大致了解了

1._hasPushState,拥有pushState属性

2._wantsHashChange,没有onhashchange事件

以下部分来自http://www.cnblogs.com/rubylouvre/archive/2012/10/24/2730599.html

最后提一提hash值的提取,这里存在两个兼容性问题:

IE6直接用location.hash取hash,可能会取少一部分内容:

比如 http://www.cnblogs.com/rubylouvre#stream/xxxxx?lang=zh_c

ie6 => location.hash = #stream/xxxxx

其他浏览器 => location.hash = #stream/xxxxx?lang=zh_c

firefox 会自作多情对hash进行decodeURIComponent

比如 http://www.cnblogs.com/rubylouvre/#!/home/q={%22thedate%22:%2220121010~20121010%22}

firefox 15 => #!/home/q={"thedate":"20121010~20121010"}

其他浏览器 => #!/home/q={%22thedate%22:%2220121010~20121010%22}

再比如如下代码:

history中的navigate方法

复制代码
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);//更新hash
                if (this.iframe && (fragment !== this.getFragment(this.getHash(this.iframe)))) {
                    // Opening and closing the iframe tricks IE7 and earlier to push a
                    // history entry on hash-tag change.  When replace is true, we don't
                    // want this.
                    if(!options.replace) this.iframe.document.open().close();
                    this._updateHash(this.iframe.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);//跳转到该页
            }
复制代码

关于pushState和replaceState,可以参考http://zhanchaojiang.iteye.com/blog/1462994

默认使用location.assgin完成跳转。不足之处,也欢迎园友们补充,谢谢。

很多时候,读码也是一种旅行,只要一杯茶,一段源码,一个浏览器,剩下的唯有坚持。

身体需要行走,我的精神依旧在路上....

内容不多,时间刚好,以上是我的一点读码体会,如有错误,请指出,大家共通学习。