前端开发概念:基于URL的开发之另类简化思路

前言:

我提出这个概念 “基于URL的开发”, 基于只是给 deep-linking技术取个专业的、更易于理解的名称而已。本文面向的对象是高级前端工程师、架构师,所以对很多概念不多做解释。

 

正文:

Deep-linking是前端技术的热门话题之一,想必多数人已经熟悉。然而其巨大的部署成本和代码复杂度,使得很多人在小型项目上,都敬而远之。

所以小方尝试寻求更简便、快速——开发和测试成本可控的方案。

请看以下雷人代码
http://jsfiddle.net/lanshunfang/djwcj/

在这个例子中,小方使用了基于 onhashchange及location.hash值的行为定义和触发,其中:

  1. 第一个Selector based 的按钮示例,是基于jQuery选择器和事件的 URL开发模型,该此模型中,location.hash的值的含义是:如果location.hash发生变化,则浏览器应该触发 location.hash 中的/selector/@value元素上已经绑定的/event/@value事件。
    • 很多时候,我们只是简单的希望如果hashchange被触发(也就是location.hash发生了值改变),相应的事件可以得以执行。比如在这个网站中,我们期待如果 location.hash有改变,则相应的左边的标签可以被点击。
    • 这个模型已经可以满足很多人的需要,基于其上的开发,可以衍生出很多有用的程序设计。
  2. 第二个Function based的按钮示例则更是直截了当。
    • 这个模型直接将等待执行的 function body (函数体)写到 location.hash中。
    • 这个是万能的,基于这个模型,你可以使location.hash的值里面直接包含你定义的函数。请注意,示例中函数执行的 scope是全局的。当然,你自己完全可以通过二次开发,创建你自己的scope。
    • 你转入的函数(命名或者匿名)最终会被调用其 toString()方法,然后使用encodeURIComponent写在hash中,最后由$.globalEval()在hashchange时执行。
    • 同理,在hashchange事件被触发时,函数就被执行了。

可能需要补充的一点,hashchange 只会发生在hash真的被change的时候哦。也就是,如果你新设的hash值与旧hash值是完全一样的,则这个事件不会被触发。

另外,提一下,location.hash长度在很多浏览器下都有一些限制,不过主流浏览器最少也能够支持:2083字符。不过无论如何,你写在url中的函数体原型,尽量不要有换行符,注释,空格等(函数对象的toString()方法会原封不动的保存这些特殊字符,加上encodeURIComponent会产生额外的长度,所以小心使用),而且如果可能,尽量压缩一下(压缩工具点击这里)  参考: http://stackoverflow.com/questions/1571753/max-length-of-url-hash-parameter

 

小结:

由于开发成本和预算的有限,程序设计模式有时需要兼顾很多因素。快,准,狠,是Agile的题中之义了。

有任何问题,欢迎联系小方: lanshufang # gmail.com,LinkedIn:  http://www.linkedin.com/pub/paul-lan/20/607/497