java 设计模式 路由器_一般JS框架的路由是用了什么设计模式?

路由器主要是编译器模式与责任链模式,但这不是主要的。

首先要解决怎么监听地址栏

有三套方案

onpopstate, 加在window上, 这是HTML5 History新API

onhashchange,加在window上, IE8开始 支持

onpropertychange, 加在document上,用于对付IE6-7

但IE6-7在后退时不会产生历史记录,需要重写iframe的文档来产生历史记录。因此,我们加一个定时器,用求监听iframe。

此外,我们还要加一个全局的点击事件,劫持 所有链接,当用户点击时,会导致地址栏发生变化。有些地址只是改变了一些参数与hash,我们就阻止它跳转,让它进入路由系统。并且手动修改地址栏。

但地址栏发生变化时,对应的回调就会触发。

然后在回调里面截取地址栏中的有效数据,比如onpopstate是抽取location的pathname,而其他情况是抽取hash。这些最好自己用正则来处理,还要decodeURIComponent, 然后进入匹配正则阶段。

正则是怎么来的呢、

一开始我们要定义许多路由规则,如

router.add("aaa/:bbb", cb1)

router.add("aaa/ddd/:bbb", cb2)

router.add("ddd/:ddd", cb3)

它们会转换成正则,至少如何转换,可以看一下express。 angular的路由规则转正则函数也是来自express。

或看backbone 。这里就是编译器模式。

然后这些正则与后面回调全部变成一个个对象,放到数组中。然后拿我们刚才的字符串,逐个匹配,符合了就触发。这里可能会有许多处理。如抽取queryString什么的,queryString的匹配。这就是责任链模式。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值