相信每個(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í)別劃分和顆粒化設(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文件之間的依賴進(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è)類似onDomReady的方法中，如果頁(yè)面中存在多個(gè)邏輯的時(shí)候怎么辦呢？比如，a實(shí)現(xiàn)了邏輯A，頁(yè)面代碼是這樣的

<script src=”logicA.js” />
<script>
$.onDomReady(function(){
LogicA.start();
});
</script>
　　5、顆粒化 or http請(qǐng)求數(shù)
　　這的確是一對(duì)矛盾，顆粒化帶來(lái)了項(xiàng)目開(kāi)發(fā)、管理、和代碼重用的高效率，卻又引入了更多的http請(qǐng)求數(shù)，好在yui提供了combo，可以將所有的http請(qǐng)求合并成一個(gè)。只需在YUI引入的時(shí)候配置下combo屬性即可，高顆粒化的請(qǐng)求數(shù)瞬間降低一倍以上。在之前做雅虎關(guān)系的時(shí)候，在yui2和yui3pre并存的情況下，可以將請(qǐng)求降低到4個(gè)，yui2和3各一個(gè)種子，各自一個(gè)combo。當(dāng)然這是在hack掉yui的loader的前提下。yui默認(rèn)不會(huì)合并非yui文件（更多細(xì)節(jié)可以閱讀基于yui的團(tuán)隊(duì)開(kāi)發(fā)）。即使這樣，我們?nèi)匀豢梢钥刂莆覀兊膆ttp請(qǐng)求數(shù)，在不hack yui的情況下，可以解決部分性能問(wèn)題。
　　6、懶惰加載 or 即時(shí)加載即時(shí)執(zhí)行
　　上文提到，邏輯依賴沙箱，沙箱依賴的js文件則是延時(shí)加載的，這樣就導(dǎo)致一個(gè)問(wèn)題，當(dāng)頁(yè)面比較龐大的時(shí)候，會(huì)等待頁(yè)面js加載完畢才會(huì)渲染動(dòng)作，這樣的用戶體驗(yàn)不佳，而即時(shí)加載即使運(yùn)行則可以渲染出模塊后隨即渲染動(dòng)作，當(dāng)網(wǎng)速一定的時(shí)候，兩者看似是一對(duì)不可調(diào)和的矛盾，yui 動(dòng)態(tài)加載的機(jī)制比較折中的處理了這個(gè)問(wèn)題，A邏輯需要a.js，B邏輯需要b.js，A邏輯則只會(huì)在a.js加載完成后執(zhí)行，而不管b.js是否加載完成，而當(dāng)A需要a.js和b.js的時(shí)候，A則需要等待a.js和b.js都加載完成才會(huì)執(zhí)行，B邏輯只需判斷當(dāng)前是否已經(jīng)加載b.js，如果b.js已經(jīng)在其他模塊中引入進(jìn)來(lái)，B則可以立即執(zhí)行。但確定的是，所有的js的引入一定是在domReady后執(zhí)行的，也就是說(shuō)，不管怎樣，動(dòng)作的渲染一定是在頁(yè)面html結(jié)構(gòu)出來(lái)后才開(kāi)始執(zhí)行的，用戶體驗(yàn)上還是會(huì)有損失。
　　7、面向接口的設(shè)計(jì) or 面向dom的設(shè)計(jì)
　　我們知道jquery的插件習(xí)慣將所有的動(dòng)作都加載到一個(gè)$(‘#id’)上，使用的時(shí)候只要執(zhí)行類似$(‘#id’).init()即可。這看起來(lái)簡(jiǎn)潔明快，開(kāi)發(fā)者的邏輯的思路也始終沒(méi)有離開(kāi)“節(jié)點(diǎn)”，很方便理解，而對(duì)yui3 的node擴(kuò)展就不那么方便，從yui3的pre版到正式版，對(duì)node擴(kuò)展的方法在不斷的修改（更多細(xì)節(jié)看這里：擴(kuò)展yui3 node的定時(shí)器），這也可以看出yui設(shè)計(jì)者在對(duì)node擴(kuò)展性設(shè)計(jì)時(shí)的糾結(jié)和苦惱：要不要允許開(kāi)發(fā)者去擴(kuò)展node節(jié)點(diǎn)呢？大概是因?yàn)樵O(shè)計(jì)者們對(duì)prototype先天的弊端心有余悸。目前看來(lái)，設(shè)計(jì)者還沒(méi)有完全走出糾結(jié)，盡管對(duì)node擴(kuò)展相比yui3第一個(gè)預(yù)覽版方便了很多，開(kāi)發(fā)者仍然不能像寫(xiě)jquery插件那樣優(yōu)雅自如的對(duì)node進(jìn)行擴(kuò)展。相反，zakas卻將更多的精力放在了widget接口的設(shè)計(jì)上，在這一點(diǎn)上，相比jquery，yui3則具有無(wú)可限量的優(yōu)越性，因?yàn)樵趛ui3中，組件不僅僅是組件，而是一個(gè)有血有肉的生命體，他可以出生，可以成長(zhǎng)，可以被改造，可以死亡，組件在這些復(fù)雜的運(yùn)行時(shí)環(huán)境中自我錘煉，因此，一個(gè)復(fù)雜頁(yè)面在yui3的技術(shù)體系中，變成了一個(gè)由無(wú)數(shù)組件鏈接而成的生態(tài)系統(tǒng)，這種生物鏈所帶來(lái)的設(shè)計(jì)創(chuàng)新和新視野是其他js框架無(wú)論如何也無(wú)法超越的。關(guān)于yui3的組件開(kāi)發(fā)更多細(xì)節(jié)可以參照：基于yui3的組件開(kāi)發(fā)1 和 克軍在D2上的分享《從yui2到y(tǒng)ui3看前端的演變》。
　　8、苗條的身材 or 龐大的身軀
　　說(shuō)到這里，大概會(huì)有很多人拍磚。其實(shí)jquery和yui同屬兩類不同的js框架，一個(gè)苗條纖細(xì)，一個(gè)身重如山，兩者之間其實(shí)沒(méi)有什么水深火熱，只是使用范圍不同罷了，類似jquery的輕框架的使用范圍是博客級(jí)別的小網(wǎng)站，尤其適合單人開(kāi)發(fā)，代碼寫(xiě)一次不再修改，而且很適合初學(xué)者學(xué)習(xí)使用，給初學(xué)者帶來(lái)自信。yui則使用與企業(yè)級(jí)的項(xiàng)目中的團(tuán)隊(duì)開(kāi)發(fā)，項(xiàng)目維護(hù)周期遠(yuǎn)遠(yuǎn)超過(guò)開(kāi)發(fā)周期，因此yui性能一定比不過(guò)jquery，jquery的續(xù)航能力也一定不如yui，沒(méi)有最優(yōu)秀，只有最適合。當(dāng)然這自然也擋不住我個(gè)人對(duì)迷人的jquery的喜愛(ài)，只要我們能從各個(gè)js框架學(xué)到東西，能提高自己做前端架構(gòu)的能力，就ok。
　　說(shuō)了這么多，其實(shí)只有一個(gè)觀點(diǎn)，人無(wú)完人，框架無(wú)完框架，缺憾之處必有權(quán)衡。以上YY，歡迎拍磚！
				        

        

        
        
      
        
it知識(shí)庫(kù)：YUI3設(shè)計(jì)中的激進(jìn)和妥協(xié)，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。