首页 > 代码库 > 自己动手写一个前端路由插件
自己动手写一个前端路由插件
在单页应用上，前端路由并不陌生。单页应用是指在浏览器中运行的应用，在使用期间页面不会重新加载。
基本原理:以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生改变时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。
基于hash的前端路由优点是：能兼容低版本的浏览器。
history 是 HTML5 才有的新 API，可以用来操作浏览器的 session history (会话历史)。
从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。
SPA的核心即是前端路由。何为路由呢？说的通俗点就是网址，比如https://www.talkingcoder.com/article/6333760306895988699；专业点就是每次GET或者POST等请求，在服务端有一个专门的正则配置列表，然后匹配到具体的一条路径后，分发到不同的Controller，然后进行各种操作后，最终将html或数据返回给前端，这就完成了一次IO。当然，目前绝大多数的网站都是这种后端路由，也就是多页面的，这样的好处有很多，比如页面可以在服务端渲染好直接返回给浏览器，不用等待前端加载任何js和css就可以直接显示网页内容，再比如对SEO的友好等。那SPA的缺点也是很明显的，就是模板是由后端来维护或改写。前端开发者需要安装整套的后端服务，必要还得学习像PHP或Java这些非前端语言来改写html结构，所以html和数据、逻辑混为一谈，维护起来即臃肿也麻烦。然后就有了前后端分离的开发模式，后端只提供API来返回数据，前端通过Ajax获取到数据后，再用一定的方式渲染到页面里，这么做的优点就是前后端做的事情分的很清楚，后端专注在数据上，前端专注在交互和可视化上，从此前后搭配，干活不累，如果今后再开发移动App，那就正好能使用一套API了，当然缺点也很明显，就是首屏渲染需要时间来加载css和js。这种开发模式被很多公司认同，也出现了很多前端技术栈，比如以jQuery+artTemplate+Seajs(requirejs)+gulp为主的开发模式所谓是万金油了。在Node.js出现后，这种现象有了改善，就是所谓的大前端，得益于Node.js和JavaScript的语言特性，html模板可以完全由前端来控制，同步或异步渲染完全由前端自由决定，并且由前端维护一套模板，这就是为什么在服务端使用artTemplate、React以及即将推出的Vue2.0原因了。那说了这么多，到底怎样算是SPA呢，其实就是在前后端分离的基础上，加一层前端路由。
前端路由，即由前端来维护一个路由规则。实现有两种，一种是利用url的hash，就是常说的锚点（#），JS通过hashChange事件来监听url的改变，IE7及以下需要用轮询；另一种就是HTML5的History模式，它使url看起来像普通网站那样，以"/"分割，没有#，但页面并没有跳转，不过使用这种模式需要服务端支持，服务端在接收到所有的请求后，都指向同一个html文件，不然会出现404。所以，SPA只有一个html，整个网站所有的内容都在这一个html里，通过js来处理。
前端路由的优点有很多，比如页面持久性，像大部分音乐网站，你都可以在播放歌曲的同时，跳转到别的页面而音乐没有中断，再比如前后端彻底分离。前端路由的框架，通用的有Director，更多还是结合具体框架来用，比如Angular的ngRouter，React的ReactRouter，以及我们后面用到的Vue的vue-router。这也带来了新的开发模式：MVC和MVVM。如今前端也可以MVC了，这也是为什么那么多搞Java的钟爱于Angular。
开发一个前端路由，主要考虑到页面的可插拔、页面的生命周期、内存管理等。
(function() { window.Router = function() { var self = this; self.hashList = {}; /* 路由表 */ self.index = null; self.key = ‘!‘; window.onhashchange = function() { self.reload(); }; }; /** * 添加路由,如果路由已经存在则会覆盖 * @param addr: 地址 * @param callback: 回调函数，调用回调函数的时候同时也会传入相应参数 */ Router.prototype.add = function(addr, callback) { var self = this; self.hashList[addr] = callback; }; /** * 删除路由 * @param addr: 地址 */ Router.prototype.remove = function(addr) { var self = this; delete self.hashList[addr]; }; /** * 设置主页地址 * @param index: 主页地址 */ Router.prototype.setIndex = function(index) { var self = this; self.index = index; }; /** * 跳转到指定地址 * @param addr: 地址值 */ Router.prototype.go = function(addr) { var self = this; window.location.hash = ‘#‘ + self.key + addr; }; /** * 重载页面 */ Router.prototype.reload = function() { var self = this; var hash = window.location.hash.replace(‘#‘ + self.key, ‘‘); var addr = hash.split(‘/‘)[0]; var cb = getCb(addr, self.hashList); if(cb != false) { var arr = hash.split(‘/‘); arr.shift(); cb.apply(self, arr); } else { self.index && self.go(self.index); } }; /** * 开始路由，实际上只是为了当直接访问路由路由地址的时候能够及时调用回调 */ Router.prototype.start = function() { var self = this; self.reload(); } /** * 获取callback * @return false or callback */ function getCb(addr, hashList) { for(var key in hashList) { if(key == addr) { return hashList[key] } } return false; }})();每次hash的变化我们还可以通过onhashchange事件【核心+精髓】来监听，然后做出相应的处理。。
<!DOCTYPE html><html> <head> <meta charset="utf8" /> <script type="text/javascript" src="http://www.mamicode.com/router.js"></script> <style type="text/css"> </style> </head> <body> <a href="http://www.mamicode.com/#!index">go to index</a><br /> <a href="http://www.mamicode.com/#!search/SB/shi/ni">go to search</a> </body> <script type="text/javascript"> window.onload = function() { var router = new Router(); router.add(‘index‘, function() { alert(‘current page: index‘); }); router.add(‘search‘, function(wd, sortType, sortBy) { alert(‘current page: search‘ + ‘\nwd: ‘ + wd + ‘\nsortType: ‘ + sortType + ‘\nsortBy: ‘ + sortBy); }); router.setIndex(‘index‘); router.start(); }; </script></html>
自己动手写一个前端路由插件