市面上有大量的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>
github 上有详细的使用介绍，在此不再赘述。
下面我们研究下源码。
首先看下基本的代码结构:
1 (function() {
2 // 构造函数
3 function Vipspa(){
4
5 };
6
7 //中间部分
8 Vipspa.prototyp = {
9 //....
10 };
11
12 window.vipspa = new Vipspa(); // 当然这块可以提取出来
13 }();//这块也可以做继续的改进
这是一个简单的模型模式。其中运用了匿名闭包，我们将简单的创建匿名函数，并立即执行。所有函数内部代码都在闭包内。它提供了整个应用生命周期的私有和状态。
如果我们想进一步扩展的话，可以把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 };
1 vipspa.start(routes);
是不是看上去有点熟悉，是的，就像 angularJs中的 ui-route 插件
好了看下Vipspa.prototype.start
1 var self = this;
这里可能会有疑问：为什么非得把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);
这里需要说明下：
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请求
1 <div id="ui-view"></div>
刷新该视图，并加载对应的js（routerItem.controller）怎么加载对应的js呢?通过loadScript方法
通过脚本创建一个<script>元素，地址指向routerItem.controller，可在callback函数中执行所传入的数据。
该方法也可用于JSONP中得跨域。
好了，这个微框架先介绍到这里，欢迎大家指正和吐槽。