富应用中 URL 管理以及 Javascript 测试

丁文森

URL 存在的意义在于使用者可以使用一段字符串就可以找到对应的资源。富应用中的内容改变都是通过 Javascript 去改变文档内容,某种角度上来说整个网站其实只需要一个 URL。如果真的使用同一个URL的话,用户就无法快速的通过特定字符串进入他想到达到资源。就像搜索引擎的表单都是 GET 而不是 POST,你可以把你搜索结果的链接发给你的朋友,然后他们也可以看到相同的内容。于是必须允许 URL 变化。

URL 变化却不会让网页从新载入只有两种方法。一个是使用锚链接,即 http://url/#path 的方式实现。另一种就是需要浏览器支持的 history.pushState ,后者 github 有使用,Pajax 方案也是使用了这种方法。由于是写的第一版,目前只实现了锚链接的实现。

相关代码传送门:https://github.com/HaiyiYun/VintJS/blob/master/src/location.js

由于 URL 改变后浏览器没有触发新的请求,就意味着你需要通过 Javascript 去知道 URL 发生了变化。HTML5 的规范中同时规定了onhashchange 的方法,老式的浏览器和 IE 的 documentMode 下面都不支持,于是就需要使用 setInterval 方法来不断的读取当前 url ,如果 url 发生了变化就要触发相应的事件。之前的事件模型在这里又派上了用途。直接 this.trigger('urlChange') 便完成了这里的工作,而不需要去考虑路由的代码或者其他地方的代码。

此时还需要的工作就是去解析新的 URL ,先获取当前的绝对地址,然后去解析。具体参考 __checkUrl 的源码。分成当前的 path ,这个会影响当前使用的路由,还有就是 search 的对象。这一块的代码是在阅读了 Angularjs 的基础上完成的,同时也引用了 Angularjs 的 hash_prefix 设置。谷歌开发文档中有提到 Ajax Url 的规则,传送门:https://developers.google.com/webmasters/ajax-crawling/docs/getting-started?hl=zh-CN ,#! 的规则是比较友好的做法,所以预留了这个设置。

完成解析工作后要做的就是去试着改变 URL。直接改变 URL,其中还包括 location.herf = 'xxx' 和 location.replace('xxx') 两种方式的区别。一种会在浏览器的历史记录里面留下痕迹,一种不会。然后需要改变 path ,改变 search 的对应的方法,还有就是获取当前 url 、 path 、 search 的方法。

这些都完成之后, URL 相关的功能基本上就告一段落。接下来要做的就是路由,将当前的 path 解析至对应的路由上面去并去渲染页面。


华丽丽的分隔符后开始说说 javascript 的测试。

做程序的人大多了解测试。写完一个函数后就去测试一下,看看写出来的代码是不是能够达到自己预期的目标。浏览器的 javascript 除了要验证函数的输入是否覆盖全面、结果是否等于预期,还需要防止自己的代码在一些特定的浏览器上面存在bug。传统的测试方法就是在完成后手动去触发事件,然后手动输入来检测是否得到预期的效果。在接触具体的测试框架前,我自己的做法常常是在代码里面写一些测试的代码,然后输出检测是否和预期相同。这种的问题就是如果需要检验多种浏览器的话,工作比较累赘。

引入了测试框架后工作简单了很多。例如 Qunit,jasmine, 我现在用的是 jasmine ,传送门:http://pivotal.github.io/jasmine/ 。写完一个方法,然后写一些简单的测试用例,在所有浏览器上面允许就可以知道结果。而无需自己去手动触发或者是写代码输出然后去比照。


前篇传送门:

给自己挖个坑,开始去开发javascript富应用框架

从 BackboneJS 的源码开始说事件模型

阅读 3.2k

Vincent
完美主义者,概念主义者,左脑右脑趋于平衡者。

完美主义者,概念主义者,左脑右脑趋于平衡者。

787 声望
34 粉丝
0 条评论

完美主义者,概念主义者,左脑右脑趋于平衡者。

787 声望
34 粉丝
文章目录
宣传栏