backbone库学习-Router

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完成跳转。不足之处，也欢迎园友们补充，谢谢。

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

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

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