2015-11-01 |

一个类似backbone路由的纯净route

一个类似backbone路由的纯净route

 

大家用backbone、angular,可能都习惯了内置的路由,这两个框架的路由都是非常优秀的,强大而简单。

客户端(浏览器)路由原理其实比较简单,其实就是监听hash的变化。

在之前的架构探讨中,说到director.js这个路由类库不好使,那么,在这一篇,我们尝试自行实现一个简洁而且非常好使的路由类库。

原理先介绍,无非几个步骤:

  • 建立配置表(字符串路径和函数的映射)

  • 监听路由(onhashchange)

  • 处理路由变化,跟配置表的路径做匹配

    • 路径转化为正则表达式

    • 正则exec,匹配+抽取参数

其中难点就在于路径转化为正则表达式,director没做好就是这一步,而backbone则做得非常非常强大,那么我们可以尝试把backbone这一块代码抠出来。

路由表:

一个类似backbone路由的纯净route

监听路由变化:

一个类似backbone路由的纯净route处理路由变化,先拼凑正则表达式:

一个类似backbone路由的纯净route

从原来的:module2/:name变成标准的正则表达式,个中奥妙大家自行顿悟

循环匹配:

一个类似backbone路由的纯净route然后。。。做个简单的测试:

一个类似backbone路由的纯净route好了,全文完。

本文源码:

https://github.com/kenkozheng/HTML5_research/tree/master/backbone-route


 


发表评论

    评价:
    验证码: 点击我更换图片