Backbone.History和Backbone.Router
history和router都是控制路由的,做一个单页应用,要控制前进后退,就可以用到他们了。
History类用于监听URL的变化，和触发Action方法,他可以添加对url的监听,
Router类用于定义和解析路由规则，并将URL映射到Action。
router和history一些个人的注解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>backbone</title> <style type="text/css"> *{padding:0;margin:0;} .wrap{width:960px; margin: 100px auto; padding: 20px 0;} ul{ list-style: none;} </style> </head> <body> <div class="wrap"> <div id="a1"></div> <div id="a2"></div> <div id="a3"></div> </div> <script src="http://files.cnblogs.com/wtcsy/jquery.js"></script> <script src="http://files.cnblogs.com/wtcsy/underscore.js"></script> <script src="http://files.cnblogs.com/wtcsy/events.js"></script> <script> (function(){ // Backbone.History // ---------------- // 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 stripping urls of hash. var pathStripper = /#.*$/; // Handles cross-browser history management, based on either // [pushState](http://diveintohtml5.info/history.html) and real URLs, or // [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange) // and URL fragments. If the browser supports neither (old IE, natch), // falls back to polling. var History = Backbone.History = function() { this.handlers = []; _.bindAll(this, 'checkUrl'); // Ensure that `History` can be used outside of the browser. if (typeof window !== 'undefined') { this.location = window.location; this.history = window.history; } }; // Has the history handling already been started? History.started = false; _.extend(History.prototype, Backbone.Events, { // The default interval to poll for hash changes, if necessary, is // twenty times a second. interval: 50, // Are we at the app root? atRoot: function() { var path = this.location.pathname.replace(/[^/]$/, '$&/'); return path === this.root && !this.location.search; }, // Gets the true hash value. Cannot use location.hash directly due to bug // in Firefox where location.hash will always be decoded. getHash: function(window) { var match = (window || this).location.href.match(/#(.*)$/); return match ? match[1] : ''; }, // Get the pathname and search params, without the root. getPath: function() { var path = decodeURI(this.location.pathname + this.location.search); var root = this.root.slice(0, -1); if (!path.indexOf(root)) path = path.slice(root.length); return path.slice(1); }, // Get the cross-browser normalized URL fragment from the path or hash. getFragment: function(fragment) { if (fragment == null) { if (this._hasPushState || !this._wantsHashChange) { fragment = this.getPath(); } else { fragment = this.getHash(); } } //var routeStripper = /^[#/]|s+$/g; return fragment.replace(routeStripper, ''); }, // Start the hash change handling, returning `true` if the current URL matches // an existing route, and `false` otherwise. start: function(options) { if (History.started) throw new Error("Backbone.history has already been started"); 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); this.root = this.options.root; this._wantsHashChange = this.options.hashChange !== false; this._hasHashChange = 'onhashchange' in window; this._wantsPushState = !!this.options.pushState; this._hasPushState = !!(this.options.pushState && this.history && this.history.pushState); this.fragment = this.getFragment(); // Add a cross-platform `addEventListener` shim for older browsers. var addEventListener = window.addEventListener || function (eventName, listener) { return attachEvent('on' + eventName, listener); }; // Normalize root to always include a leading and trailing slash. // var routeStripper = /^[#/]|s+$/g; this.root = ('/' + this.root + '/').replace(rootStripper, '/'); // Proxy an iframe to handle location events if the browser doesn't // support the `hashchange` event, HTML5 history, or the user wants // `hashChange` but not `pushState`. if (!this._hasHashChange && this._wantsHashChange && (!this._wantsPushState || !this._hasPushState)) { var iframe = document.createElement('iframe'); iframe.src = 'javascript:0'; iframe.style.display = 'none'; iframe.tabIndex = -1; var body = document.body; // Using `appendChild` will throw on IE < 9 if the document is not ready. this.iframe = body.insertBefore(iframe, body.firstChild).contentWindow; this.navigate(this.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) { addEventListener('popstate', this.checkUrl, false); } else if (this._wantsHashChange && this._hasHashChange && !this.iframe) { addEventListener('hashchange', this.checkUrl, false); } else if (this._wantsHashChange) { this._checkUrlInterval = setInterval(this.checkUrl, this.interval); } }, // Add a route to be tested when the fragment changes. Routes added later // may override previous routes. route: function(route, callback) { this.handlers.unshift({route: route, callback: callback}); }, // Checks the current URL to see if it has changed, and if it has, // calls `loadUrl`, normalizing across the hidden iframe. checkUrl: function(e) { var current = this.getFragment(); if (current === this.fragment && this.iframe) { current = this.getHash(this.iframe); } if (current === this.fragment) return false; if (this.iframe) this.navigate(current); this.loadUrl(); }, // Attempt to load the current URL fragment. If a route succeeds with a // match, returns `true`. If no defined routes matches the fragment, // returns `false`. loadUrl: function(fragment) { fragment = this.fragment = this.getFragment(fragment); return _.any(this.handlers, function(handler) { if (handler.route.test(fragment)) { handler.callback(fragment); return true; } }); }, // Save a fragment into the hash history, or replace the URL state if the // 'replace' option is passed. You are responsible for properly URL-encoding // the fragment in advance. // // The options object can contain `trigger: true` if you wish to have the // route callback be fired (not usually desirable), or `replace: true`, if // you wish to modify the current URL without adding an entry to the history. navigate: function(fragment, options) { if (!History.started) return false; if (!options || options === true) options = {trigger: !!options}; var url = this.root + (fragment = this.getFragment(fragment || '')); // Strip the hash for matching. // var pathStripper = /#.*$/; fragment = fragment.replace(pathStripper, ''); if (this.fragment === fragment) return; this.fragment = fragment; // 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); if (this.iframe && (fragment !== 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); } if (options.trigger) return this.loadUrl(fragment); }, // Update the hash location, either replacing the current entry, or adding // a new one to the browser history. _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; } } }); Backbone.history = new History; //Backbone.history.start() //Backbone.history.navigate // Backbone.Router // --------------- // Routers map faux-URLs to actions, and fire events when routes are // matched. Creating a new one sets its `routes` hash, if not set statically. var Router = Backbone.Router = function(options) { options || (options = {}); if (options.routes) this.routes = options.routes; this._bindRoutes(); this.initialize.apply(this, arguments); }; // Cached regular expressions for matching named param parts and splatted // parts of route strings. var optionalParam = /((.*?))/g; var namedParam = /((?)?:w+/g; var splatParam = /*w+/g; var escapeRegExp = /[-{}[]+?.,\^$|#s]/g; // Set up all inheritable **Backbone.Router** properties and methods. _.extend(Router.prototype, Backbone.Events, { // Initialize is an empty function by default. Override it with your own // initialization logic. initialize: function(){}, // Manually bind a single named route to a callback. For example: // // this.route('search/:query/p:num', 'search', function(query, num) { // ... // }); // route: function(route, name, callback) { if (!_.isRegExp(route)) route = this._routeToRegExp(route); if (_.isFunction(name)) { callback = name; name = ''; } if (!callback) callback = this[name]; var router = this; Backbone.history.route(route, function(fragment) { var args = router._extractParameters(route, fragment); if (router.execute(callback, args, name) !== false) { router.trigger.apply(router, ['route:' + name].concat(args)); router.trigger('route', name, args); Backbone.history.trigger('route', router, name, args); } }); return this; }, // Convert a route string into a regular expression, suitable for matching // against the current location hash. _routeToRegExp: function(route) { route = route.replace(escapeRegExp, '\$&') //把正则里面需要转移的字符进行转移 .replace(optionalParam, '(?:$1)?') //把捕获变成非捕获 并且变成惰性匹配 .replace(namedParam, function(match, optional) { return optional ? match : '([^/?]+)'; }) //如果是：w+格式转化成([^/?]+) 如果是非捕获格式(?: 则不进行转换 .replace(splatParam, '([^?]*?)'); //把这种*w+格式替换成 ([^?]*?) return new RegExp('^' + route + '(?:\?([\s\S]*))?$'); }, // Simple proxy to `Backbone.history` to save a fragment into the history. navigate: function(fragment, options) { Backbone.history.navigate(fragment, options); return this; }, // Execute a route handler with the provided parameters. This is an // excellent place to do pre-route setup or post-route cleanup. execute: function(callback, args, name) { if (callback) callback.apply(this, args); }, // Bind all defined routes to `Backbone.history`. We have to reverse the // order of the routes here to support behavior where the most general // routes can be defined at the bottom of the route map. _bindRoutes: function() { if (!this.routes) return; this.routes = _.result(this, 'routes'); var route, routes = _.keys(this.routes); while ((route = routes.pop()) != null) { this.route(route, this.routes[route]); } }, // Given a route, and a URL fragment that it matches, return the array of // extracted decoded parameters. Empty or unmatched parameters will be // treated as `null` to normalize cross-browser behavior. _extractParameters: function(route, fragment) { var params = route.exec(fragment).slice(1); return _.map(params, function(param, i) { // Don't decode the search params. if (i === params.length - 1) return param || null; return param ? decodeURIComponent(param) : null; }); } }); Backbone.Router.extend = function(protoProps, staticProps) { var parent = this; var child; // The constructor function for the new subclass is either defined by you // (the "constructor" property in your `extend` definition), or defaulted // by us to simply call the parent's constructor. if (protoProps && _.has(protoProps, 'constructor')) { child = protoProps.constructor; } else { child = function(){ return parent.apply(this, arguments); }; } // Add static properties to the constructor function, if supplied. //将静态方法和 parent上的静态方法一起扩展到child上面去 _.extend(child, parent, staticProps); // Set the prototype chain to inherit from `parent`, without calling // `parent`'s constructor function. //创建一个新的构造含糊Surrogate ; //this.constructor = child的意思是 Surrogate实例化后的对象 让对象的构造函数指向child // Surrogate的原型就是parent的原型 // 然后实例化给child的原型, // 这里不是直接从new parent给child.prototype 而是创建一个新的构造函数，我也不知道为啥要这样 var Surrogate = function(){ this.constructor = child; }; Surrogate.prototype = parent.prototype; child.prototype = new Surrogate; // Add prototype properties (instance properties) to the subclass, // if supplied. // 把第一个参数上的属性扩展到child.prototype if (protoProps) _.extend(child.prototype, protoProps); // Set a convenience property in case the parent's prototype is needed // later. // 拿一个属性引用父的原型, 以免以后要用到. child.__super__ = parent.prototype; return child; } })(); </script> </body> </html>
history怎么实现一个页面里面让浏览器前进后退了?用到了以下的方法
onhashchange pushstate
onhashchange 给window绑定onhashchange事件,当描点变化的时候,触发事件,然后就可以改变页面了
但onhashchange是从ie8开始能够支持,如果要做le6,7的兼容则必须用其他的办法,backbone的实现是创建一个隐藏的iframe,同时改变浏览器的url上的锚点和iframe的锚点,用一个定时器不停的监听浏览器url的变化
pushstate，html5里面新方法,给window绑定onpopstate方法,查看history.state的值,如果自己通过history.pushState改变了history.state的值,就当做该url之前已经存在,如果history.state是undefined，表示是新地址,要用history.pushState加到history里面去。
下面3个小demo分别是实现用onhashchange，pushstate和隐藏iframe实现浏览器前进和后退
onhashchange方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Lottery Demo</title> <style type="text/css"> *{padding:0;margin:0;} </style> </head> <body> <div id="wrap"></div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var urlHash = { "one" : "我是第一页", "two" : "我是第二页", "three" : "我是第三页" } function c(){ var hash = location.hash.replace("#",""); if(hash in urlHash){ $("#wrap").html(urlHash[hash]); }else{ $("#wrap").html("该锚点没有对应的页面"); } } function n(fragment){ location.hash = fragment; } window.attachEvent ? window.attachEvent('onhashchange', c) : window.addEventListener("hashchange",c,false); n("one"); //用n函数跳转描点 </script> </body> </html>
pushstate
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Lottery Demo</title> <style type="text/css"> *{padding:0;margin:0;} </style> </head> <body> <div id="wrap"></div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var urlHash = { "one" : "我是第一页", "two" : "我是第二页", "three" : "我是第三页" } function n(fragment){ //history.pushState({lk:fragment,text:fragment}, "", fragment); var text =urlHash[fragment] || "没有对应的页面"; history.pushState({lk:fragment,text:text}, "", fragment); $("#wrap").html(history.state.text); } window.addEventListener("popstate",function(){ if(history.state){ $("#wrap").html(history.state.text); } },false); n("one"); //用n函数跳转描点 </script> </body> </html>
用iframe的方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Lottery Demo</title> <style type="text/css"> *{padding:0;margin:0;} </style> </head> <body> <div id="wrap"></div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var urlHash = { "one" : "我是第一页", "two" : "我是第二页", "three" : "我是第三页" } var iframe = document.createElement('iframe') iframe.src = 'javascript:0'; iframe.style.display = 'none'; iframe.tabIndex = -1; var iframeWindow = document.body.insertBefore(iframe, document.body.firstChild).contentWindow; var currFragment = null; function n(fragment){ if(currFragment == fragment || fragment=="")return; currFragment = fragment; window.location.hash = '#' + fragment; window.iframeWindow.document.open().close(); window.iframeWindow.location.hash = '#' + fragment; var text =urlHash[fragment] || "没有对应的页面"; $("#wrap").html(text); } setInterval(function(){ var fragment = window.location.hash.replace("#","") n(fragment) }, 50); //用n函数跳转描点 </script> </body> </html>
Backbone.History
Backbone.History是一个类,Backbone.history才是Backbone.History实例化后的对象,即Backbone.history = new Backbone.History;
Backbone.History有以下比较重要的方法
start
要启动Backbone的路由功能,首先必须调用Backbone.history.start(),start方法做了以下一些事情
首页设置 History.started=true 表示该路由功能已经启动
然后看当前浏览器是否支持onhashChange,参数入的参数是希望通过hash的方式还是希望通过pushstate的方式改变url
根据传入的root来设置url路径将怎么改变,默认以当前的路径
如果浏览器不支持onhashchange(不支持hashchange肯定也不会支持pushstate的,因为onhashchange出现的时候,还没有出现pushstate),创建一个iframe
如果是pushstate方式 绑定window的popstate事件去监听url改变
如果是hashchange方式 绑定window的hashchange事件去监听url改变
如果不支持onhashchange,则设置一个定时器为监听url的改变
var r = Backbone.history; r.navigate("one",true);//这里锚点是不会改变的 因为没有调用start方法 r.start(); r.navigate("one",true);//锚点可以改变了
getFragment
获取当前的锚点或者是地址(地址，暂且这么说吧,因为pushstate方式就是后面那串地址不同)
route (reg,callback)
添加对路由的监听事件,第一个参数是个正则,第2个参数是回调函数。以{route: route, callback: callback}的形式存在this.handlers中,当路由改变的时候,会遍历this.handlers,如果符合其中的route正则,则会执行相关回调
var r = Backbone.history; r.route(/^a/,function(){alert("a")}); //监听描点如果是以a开头,则弹出a r.route(/^[^a]/,function(){alert("not a")}) //监听描点如果不是以a开头,则弹出not a r.start() r.navigate("aasd/asdf/ss",true) r.navigate("bxx/asdf/ss",true)
navigate (fragment, [options])
第一个参数个地址,需要进入的地址,第2个参数可以是对象,也可以是布尔值,true,表示路由要改变,如果有对应的回调事件也要执行,false表示不需要执行对应的回调事件，第2个参数当是对象的时候,trigger值得意义和布尔值的时候一样,replace值表示修改路由,但是不触发相应的回调事件,replace是不会记录在history里面,返回的时候不会有替换之前的那个地址.在然后改变url地址,设置了pushstate的用pushstate方式,支持onhashchang的直接用location.href来改变描点，不支持onhashchange的,除了改变location.href还要改变iframe的location.href。最后在触发相关监听路由的回调事件
在调用navigate方法的时候就会调用一次回调事件了,监听的时候也会调用一次回调事件的,所以在监听的时候会判断是不是同一个路由,同一个就不执行回调了,监听执行额回调事件也是在浏览器的前进和后退的时候在会执行,只用调用navigate,监听是不会执行回调的,是navigate方法里面主动调用的
一些例子
要启用路由功能一定要先调用start
var r = Backbone.history; r.start(); r.navigate("aaa",true) //r.navigate("aaa",{trigger:true}) 这种方式和上面那种方式是一样的
第二个参数如果设置成false,路由会改变,但是监听函数是不会触发的
var r = Backbone.history; r.start(); r.route(/^a/,function(){alert("a")}) r.route(/^b/,function(){alert("b")}) r.navigate("aaaa",true) //可以触发监听回调 r.navigate("aaaa",false) //触发不了监听回调
如果第二个参数是一个对象,且设置了replace为true，改变路由后,之前的路由是不会记录在history里面的,而且监听路由的回调也不会执行
var r = Backbone.history; r.start(); r.route(/a^/,function(){alert(1)}) r.navigate("as",{trigger:true,replace:true}) //监听路由的回调是不会执行的,且history中不会记录之前的路由
所以第二个参数false和replace的却别就在于histroy中是否记录之前的路由,他们的相同点是都不会触发监听回调
Backbone.Router
Backbone.Router基本上对Backbone.history一些方法的封装了.
route router.route(route, name, [callback])
route方法就是添加路由，路由对应的回调,他有3个参数,第一个参数就是路由了,第2个参数是方法名,如果传递了,当匹配域名的时候就会从Router这个对象里面去掉用该方法名,第3个参数也是回调,不设置第2个参数的时候就会调用第3个参数的回调
route的执行过程如下,首先判断route参数是不是正则表达式,如果不是则转成正则表达式,转换过程下
首先,把字符串route里面需要转义的字符全部转义,转义规则如下
var escapeRegExp = /[-{}[]+?.,\^$|#s]/g; route = route.replace(escapeRegExp, '\$&');
需要转义的字符有\,-,{,},[,],+,.,\,?
然后把捕获变成非捕获，并且变成惰性匹配，因为这个正则后面要用到的是test方法,根本就不需要捕获,捕获会耗去更多的内存.
var optionalParam = /((.*?))/g; route = route.replace(optionalParam, '(?:$1)?')
然后在把 ：w+格式 转化成([^/?]+),路由上面的传参数的格式/:xxx,这个主要是把参数转换成([^/?]+),这个这则的意思就是不能是/和?的任意字符,因为参数的规则就是route/:arguments,如果带了/可能就路径错了,如果有?那就可能是url的参数
var namedParam = /((?)?:w+/g; route = route.replace(namedParam, function(match, optional) { return optional ? match : '([^/?]+)'; })
在然后 把点*以及*后面的字符串转化成([^?]*?),惰性匹配非?字符串 这个替换是干嘛用的还没看懂
var splatParam = /*w+/g; route = route.replace(splatParam, '([^?]*?)');
最后给route字符串加上开头的符号和结尾的符号'^' + route + '(?:\?([\s\S]*))?$'，意思是说开头必须也route开头,后面可以跟参数,然后实例化这个字符串为正则对象并且返回
处理完正则之后,通过Backbone.history.route方法来监听该路由正则,如果在前进后退的时候路由匹配该正则就是执行回调
navigate (fragment, [options])
这个直接调用的Backbone.history.navigate(fragment, options);
var r = new Backbone.Router; r.route("aa/:a/:a",function(){ alert(Array.prototype.join.apply(arguments)) }) Backbone.history.start() r.navigate("aa/bb/cc",true) //传入bb cc 两个参数,可以打印出来
routes _bindRoutes
如果设置了routes,可以用_bindRoutes一次性绑定对routes里面的路由监听,_bindRoutes里面就是遍历routes,调用this,route进行绑定
Backbone.Router = Backbone.Router.extend({ alertA : function(){alert("a")} }) var r = new Backbone.Router({ routes : { "aa" : "alertA", "bb" : function(){alert("b")}, } }) Backbone.history.start() //先扩展alertA方法 然后通过routes批量绑定,如果value对应的是字符串,则会在实例化的r上找该方法,如果是函数就执行该函数 r.navigate("aa",true); r.navigate("bb",true)