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

1、为移动端开发提供纯前端的路由方案市面上有大量的SPA 框架，如 AngularJs ，backbone ，Knockout等，对于追求极致小得移动端来说，都比较大，重！正在苦恼的时候， 我们的 wikieswan 解决了这一问题。 github 地址： vipspa使用方法非常的简单：1 45 67 8 910vipspa demo11121516首页17公司简介18联系我们192021222324errStatus252627errContent28293032 github 上有详细的使用介绍， 在此不再赘述。下面我们研究下源码。vipspa.js首先看下基本的代码结构: 1 (funct

2、ion() 2/ 构造函数3function Vipspa()45;67/中间部分8Vtotyp = 9/.10;1112window.vipspa = new Vipspa(); /当然这块可以提取出来13 ();/ 这块也可以做继续的改进这是一个简单的模型模式。其中运用了匿名闭包，我们将简单的创建匿名函数，并立即执行。所有函数内部代码都在闭包内。它提供了整个应用生命周期的私有和状态。如果我们想进一步扩展的话，可以把 window.vipspa = new Vipspa(); 提取出来做进一步的扩展。然后我们追踪构造函数原型的原型方法。1 varroutes = 2view: #ui-vie

3、w,3router: 4home: 5templateUrl: views/home.html,6controller: js/app/home.js7,8content: 9templateUrl: views/content.html,10controller: js/app/content.js11,12contact: 13templateUrl: views/contact.html,14controller: js/app/contact.js15,16defaults: home /默认路由1718;1 vipspa.start(routes);是不是看上去有点熟悉， 是的，就像

4、angularJs 中的 ui-route插件好了看下这里可能会有疑问：为什么非得把 this 保存起来呢？这是因为，内部函数（比如本函数里面包含的两个匿名函数）在搜索 this 变量时， 只会搜索到属于它自己的this，而不会搜索到包含它的那个函数的this 。所以，为了在内部函数能使用外部函数的this 对象，要给它赋值了一个名叫self 的变量。在 self对象中 设置了routerMap （ routes 中的 router ）和 mainView （routes 中的 view ） 属性然后执行 startRouter函数，当锚部分发生变化时window.onhashchange ）

5、再次执行 startRouter 函数下面我们看startRouter函数做了什么？1 var hash =location.hash;2var routeObj = vipspa.parse(hash);3routerAction(routeObj);这里需要说明下：1.location 是 javascript 里边管理地址栏的内置对象，比如 location.href 就管理页面的 url ，用 location.href=url 就可以直接将页面重定向 url 。而 location.hash 则可以用来获取或设置页面的标签值。比如 http:/domain/#admin 的 location.hash=#admin 。利用这个属性值可以做一些非常有意义的事情。解析获取到得hash 值3. 执行关键函数routerAction();在 routerAction 中做了什么事情呢？我们点击 URL 时希望做什么事情呢？，当然是执行该路由对应的 html 和 js我们通过 ajax 请求 1 刷新该视图，并加载对应的js （ routerItem.controller）怎么加载对应的js 呢 ?通过 loadScript方法通过脚本创建一个 元素，地址