|
相信每個(gè)前端工程師都有自己喜愛(ài)的javascript框架，說(shuō)情感也好，道信仰也罷，javascript框架帶給人的不僅僅是便捷的開(kāi)發(fā)，更有一種純粹的邏輯美感，不管是jquery曼妙的簡(jiǎn)潔，還是yui魔術(shù)般的沙箱，都使我們產(chǎn)生無(wú)窮的想象。然而，js框架卻又必然無(wú)法做到面面俱到的完美無(wú)瑕，比如jquery在OO方面做出的讓步，以及yui在性能上做的犧牲，無(wú)不給人傳達(dá)一種缺憾美、一種理想的現(xiàn)實(shí)主義。今天，我們來(lái)看看yui3在框架設(shè)計(jì)中的這些犧牲和讓步，以便讓我們更加深刻的理解yui3的全貌，并將其優(yōu)勢(shì)發(fā)揮至最佳。
1、種子的一步到位 or 顆粒化
所謂種子一步到位是指只要在頁(yè)面引入一個(gè)種子文件的script標(biāo)簽，比如prototype和jquery，只要引入一個(gè)prototype.js或jquery.js就可以了，他們將各自對(duì)dom操作和event的封裝等等都囊括進(jìn)一個(gè)文件中，并盡力將其做到最小，這樣做的好處是顯而易見(jiàn)的，使用框架非常簡(jiǎn)單。然而yui將這些功能做了級(jí)別劃分和顆�；O(shè)計(jì)，從概念上抽象出來(lái)“核心”、“工具”和“組件”，每個(gè)小功能放在一個(gè)文件當(dāng)中，需要的時(shí)候則要自行去引用，yui文檔中給出的大量demo都采用這種方法，這種設(shè)計(jì)顯然不像jquery那樣對(duì)初學(xué)者友好，而且使用起來(lái)不夠傻瓜，為了實(shí)現(xiàn)一個(gè)小功能，甚至要引入三四個(gè)js文件。yui這樣做的原因有兩個(gè)，一是yui實(shí)在太大，把所有功能都搞進(jìn)一個(gè)文件中確實(shí)有點(diǎn)不靠譜，二是為其動(dòng)態(tài)加載的框架設(shè)計(jì)做鋪墊。
2、手動(dòng)引入 or 動(dòng)態(tài)加載
往頁(yè)面中寫(xiě)js的傳統(tǒng)方法是，直接將js文件作為script標(biāo)簽路徑寫(xiě)在頁(yè)面中，使用yui也可以這樣引入頁(yè)面，但yui更推薦使用loader進(jìn)行動(dòng)態(tài)加載。動(dòng)態(tài)加載腳本的淵源很復(fù)雜，目前來(lái)看主要原因有三，其一，頁(yè)面中手寫(xiě)js標(biāo)簽無(wú)論如何都會(huì)占用一個(gè)http請(qǐng)求，即使這個(gè)請(qǐng)求是一個(gè)304，動(dòng)態(tài)加載的文件緩存后則不必發(fā)起真實(shí)的http請(qǐng)求，其二，動(dòng)態(tài)加載可以實(shí)現(xiàn)按需加載，而且可以根據(jù)js文件之間的依賴(lài)進(jìn)行去重和排序，手寫(xiě)標(biāo)簽加載js文件則必須讓開(kāi)發(fā)者去額外關(guān)注一下文件的排序、重復(fù)等等，其三，動(dòng)態(tài)加載有利于頁(yè)面代碼的語(yǔ)義化，這使得開(kāi)發(fā)者只關(guān)心“需要什么”，而不用去在意“如何得到”。當(dāng)項(xiàng)目變得越發(fā)臃腫，維護(hù)成本越來(lái)越高的時(shí)候，這中小技巧會(huì)有不小的好處的。
3、邏輯啟動(dòng)的單一入口 or 沙箱
我們?cè)陧?yè)面中啟動(dòng)一個(gè)js邏輯通常是放在一個(gè)類(lèi)似onDomReady的方法中，如果頁(yè)面中存在多個(gè)邏輯的時(shí)候怎么辦呢？比如，a實(shí)現(xiàn)了邏輯A，頁(yè)面代碼是這樣的
<script src="logicA.js" />
<script>
$.onDomReady(function(){
___LogicA.start();
});
</script>
這段代碼通常寫(xiě)在頁(yè)面的尾部，這段邏輯所伴隨的html代碼是埋藏在頁(yè)面的某處，這時(shí)b要在頁(yè)面中增加邏輯B，b的做法是首先找到尾部的這段代碼，然后更改成如下模樣：
<script src="logicA.js" />
<script src="logicB.js" />
<script>
$.onDomReady(function(){
___LogicA.start();
___LogicB.start();
});
</script>
同樣，B邏輯所伴隨的html代碼也是埋藏在頁(yè)面的某處，這樣看來(lái)，js邏輯和其伴隨的html代碼如此分離，以至于到了刪減功能的時(shí)候，往往刪掉html卻忘了刪js，或者刪掉js忘了刪除html，在重用代碼的時(shí)候也會(huì)是個(gè)麻煩。同樣，在調(diào)試的時(shí)候，工程師也要打開(kāi)兩個(gè)窗口分別關(guān)注js和html，即使這兩段代碼在同一個(gè)文件當(dāng)中。如此則不如把代碼寫(xiě)成這樣：
<!–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寫(xiě)法正是yui所提倡的，也就是所謂的沙箱，每個(gè)邏輯包含在一個(gè)沙箱中，各司其則互不干擾。當(dāng)?shù)谌邽g覽代碼的時(shí)候也立即明白這就是一個(gè)獨(dú)立的功能塊，包含典型的html結(jié)構(gòu)和啟動(dòng)邏輯的js，要重用，整塊拷走即可。
出處：Taobao.com UED Team
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) YUI3設(shè)計(jì)中的激進(jìn)和妥協(xié) [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) YUI3設(shè)計(jì)中的激進(jìn)和妥協(xié) [1]
第 2 頁(yè) 
