react.js - 一般JS框架的路由是用了什么设计模式？

问题描述

问 题

一般来说，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的匹配。这就是责任链模式。

这篇关于react.js - 一般JS框架的路由是用了什么设计模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！