日期:2013-08-29  浏览次数:20545 次

置信每个前端工程师都有本人喜爱的javascript框架,说情感也好,道信仰也罢,javascript框架带给人的不只仅是便捷的开发,更有一种纯粹的逻辑美感,不管是jquery曼妙的简约,还是yui魔术般的沙箱,都使我们产生无穷的想象。然而,js框架却又必然无法做到面面俱到的完满无瑕,比如jquery在OO方面做出的让步,以及yui在功用上做的牺牲,无不给人传达一种缺憾美、一种理想的理想主义。今天,我们来看看yui3在框架设计中的这些牺牲和让步,以便让我们愈加深刻的理解yui3的全貌,并将其优势发挥至最佳。

1、种子的一步到位 or 颗粒化

所谓种子一步到位是指只需在页面引入一个种子文件的script标签,比如prototype和jquery,只需引入一个prototype.js或jquery.js就可以了,他们将各自对dom操作和event的封装等等都囊括进一个文件中,并尽力将其做到最小,这样做的好处是不言而喻的,使用框架非常简单。然而yui将这些功用做了级别划分和颗粒化设计,从概念上笼统出来“核心”、“工具”和“组件”,每个小功用放在一个文件当中,需求的时候则要自行去援用,yui文档中给出的大量demo都采用这种方法,这种设计显然不像jquery那样对初学者敌对,而且使用起来不够傻瓜,为了实现一个小功用,甚至要引入三四个js文件。yui这样做的缘由有两个,一是yui实在太大,把所有功用都搞进一个文件中确实有点不靠谱,二是为其动态加载的框架设计做铺垫。

2、手动引入 or 动态加载

往页面中写js的传统方法是,直接将js文件作为script标签路径写在页面中,使用yui也可以这样引入页面,但yui更推荐使用loader进举动态加载。动态加载脚本的渊源很复杂,目前来看次要缘由有三,其一,页面中手写js标签无论如何都会占用一个http请求,即便这个请求是一个304,动态加载的文件缓存后则不必发起真实的http请求,其二,动态加载可以实现按需加载,而且可以依据js文件之间的依赖进行去重和排序,手写标签加载js文件则必须让开发者去额外关注一下文件的排序、反复等等,其三,动态加载有利于页面代码的语义化,这使得开发者只关怀“需求什么”,而不用去在意“如何得到”。当项目变得越发臃肿,维护成本越来越高的时候,这中小技巧会有不小的好处的。

3、逻辑启动的单一入口 or 沙箱

我们在页面中启动一个js逻辑通常是放在一个类似onDomReady的方法中,如果页面中存在多个逻辑的时候怎样办呢?比如,a实现了逻辑A,页面代码是这样的

<script src="logicA.js" />
<script>
$.onDomReady(function(){
___LogicA.start();
});
</script>

这段代码通常写在页面的尾部,这段逻辑所伴随的html代码是埋藏在页面的某处,这时b要在页面中添加逻辑B,b的做法是首先找到尾部的这段代码,然后更改成如下容貌:

<script src="logicA.js" />
<script src="logicB.js" />
<script>
$.onDomReady(function(){
___LogicA.start();
___LogicB.start();
});
</script>

同样,B逻辑所伴随的html代码也是埋藏在页面的某处,这样看来,js逻辑和其伴随的html代码如此分离,以致于到了删减功用的时候,往往删掉html却忘了删js,或者删掉js忘了删除html,在重用代码的时候也会是个麻烦。同样,在调试的时候,工程师也要打开两个窗口分别关注js和html,即便这两段代码在同一个文件当中。如此则不如把代码写成这样:

<!–A逻辑的html代码段–>
<script src="logicA.js" />
<script>
$.onDomReady(function(){
___LogicA.start();
});
</script>

<!–B逻辑的html代码段–>
<script src="logicB.js" />
<script>
$.onDomReady(function(){
___LogicB.start();
});
</script>

这种coding写法正是yui所提倡的,也就是所谓的沙箱,每个逻辑包含在一个沙箱中,各司其则互不干扰。当第三者浏览代码的时候也立即明白这就是一个独立的功用块,包含典型的html结构和启动逻辑的js,要重用,整块拷走即可。