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

市面上有大量的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请求

1 <div  id="ui-view"></div>
View Code

 刷新该视图,并加载对应的js(routerItem.controller)怎么加载对应的js呢?通过loadScript方法

通过脚本创建一个<script>元素,地址指向routerItem.controller,可在callback函数中执行所传入的数据。

该方法也可用于JSONP中得跨域。

好了,这个微框架先介绍到这里,欢迎大家指正和吐槽。

转载于:https://www.cnblogs.com/peterli2013/p/4986874.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值