转载

为移动端开发提供纯前端的路由方案

市面上有大量的SPA框架，如AngularJs， backbone， Knockout等，对于追求极致小得移动端来说，都比较大，重！

正在苦恼的时候，我们的 wikieswan 解决了这一问题。github地址： vipspa

使用方法非常的简单：

1 <!doctype html>  2 <html>  3 <head>  4     <meta charset="utf-8" >  5     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  6     <meta name="msapplication-tap-highlight" content="no">      7     <meta content="yes" name="apple-mobile-web-app-capable">  8     <meta content="black" name="apple-mobile-web-app-status-bar-style">  9     <meta content="telephone=no" name="format-detection"> 10     <title>vipspa demo</title> 11     <link rel="stylesheet" type="text/css" href="css/main.css"> 12      13 </head> 14 <body> 15     <ul> 16         <li><a href="#home">首页</a></li> 17         <li><a href="#content">公司简介</a></li> 18         <li><a href="#contact">联系我们</a></li> 19     </ul> 20     <div  id="ui-view"></div> 21     <script type="text/html" id="error"> 22         <!--可以自定义错误信息--> 23         <div> 24             {{errStatus}} 25         </div> 26         <div> 27             {{errContent}} 28         </div> 29     </script> 30      31     <script type="text/javascript" src="lib/zepto-1.1.4.min.js"></script> 32     <script type="text/javascript" src="lib/vipspa.js"></script> 33     <script type="text/javascript" src="js/require.vipspa.config.js"></script> 34 </body> 35 </html>  View Code

github 上有详细的使用介绍，在此不再赘述。

下面我们研究下源码。

vipspa.js

首先看下基本的代码结构:

1 (function() {  2     // 构造函数  3      function Vipspa(){  4           5     };  6   7     //中间部分  8     Vipspa.prototyp = {  9         //.... 10     }; 11  12     window.vipspa = new Vipspa(); // 当然这块可以提取出来 13 }();//这块也可以做继续的改进  View Code

这是一个简单的模型模式。其中运用了匿名闭包，我们将简单的创建匿名函数，并立即执行。所有函数内部代码都在闭包内。它提供了整个应用生命周期的私有和状态。

如果我们想进一步扩展的话，可以把window.vipspa = new Vipspa();提取出来做进一步的扩展。

然后我们追踪构造函数原型的原型方法。

1 var  routes = {  2         view: '#ui-view',  3         router: {  4             'home': {  5                 templateUrl: 'views/home.html',  6                 controller: 'js/app/home.js'  7             },  8             'content': {  9                 templateUrl: 'views/content.html', 10                 controller: 'js/app/content.js' 11             }, 12             'contact': { 13                 templateUrl: 'views/contact.html', 14                 controller: 'js/app/contact.js' 15             }, 16             'defaults': 'home' //默认路由 17         } 18     };  View Code

1 vipspa.start(routes);  View Code

是不是看上去有点熟悉，是的，就像 angularJs中的 ui-route 插件

好了看下Vipspa.prototype.start

1 var self = this;  View Code

这里可能会有疑问：为什么非得把this保存起来呢？这是因为，内部函数（比如本函数里面包含的两个匿名函数）

在搜索this变量时，只会搜索到属于它自己的this，而不会搜索到包含它的那个函数的this。

所以，为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。

在 self 对象中设置了 routerMap（routes中的router）和 mainView（routes中的view）属性

然后执行startRouter函数，当锚部分发生变化时（window.onhashchange）再次执行startRouter函数

下面我们看startRouter函数做了什么？

1 var hash = location.hash; 2         var routeObj = vipspa.parse(hash); 3         routerAction(routeObj);  View Code

这里需要说明下：

1.location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一些非常有意义的事情。

2.vipspa.parse(hash) 解析获取到得hash值

3. 执行关键函数 routerAction();

在 routerAction 中做了什么事情呢？

我们点击URL时希望做什么事情呢？，当然是执行该路由对应的html和js

我们通过ajax请求