|
4、代碼污染 or 沙箱
剛才提到的沙箱可以解決一部分代碼污染的問(wèn)題，新人閱讀代碼不用再看著亂碼般的源碼，“瞻前顧后”小心翼翼的尋找html和js的對(duì)應(yīng)關(guān)系。但這種寫(xiě)法也存在隱患，現(xiàn)在的前端開(kāi)發(fā)越來(lái)越復(fù)雜也更多的使用分層，比如底層使用yui，中間層是自定義的工具庫(kù)，或者再加一個(gè)項(xiàng)目的widget組件庫(kù)，寫(xiě)頁(yè)面邏輯則是基于這些庫(kù)進(jìn)行開(kāi)發(fā)。這樣的話，每段邏輯可能寫(xiě)成這個(gè)樣子：
<!–A邏輯的html代碼段–>
<script src="widget.js" /><!–項(xiàng)目的widget庫(kù)–>
<script src="logicA.js" />
<script>
$.onDomReady(function(){
___LogicA.start();
});
</script>
盡管我們可以約定，將項(xiàng)目用到的所有的組件都統(tǒng)一加載進(jìn)頁(yè)面中，但當(dāng)組件越來(lái)越多的時(shí)候，就出現(xiàn)了上文所說(shuō)的一步到位和顆�；g的矛盾，當(dāng)每個(gè)控件單獨(dú)占用一個(gè)js文件和與之相伴隨的css皮膚，一個(gè)相對(duì)復(fù)雜的邏輯就變成了上文所說(shuō)的手動(dòng)引入js文件，并隨之引入一些顯而易見(jiàn)的弊端：
<!–復(fù)雜的A邏輯的html代碼段，使用了日歷，彈層，幻燈–>
<script src="calendar.js"/><!–日歷–>
<script src="box.js" /><!–彈層–>
<script src="tabview.js" /><!–幻燈原型–>
<script src="slider.js" /><!–幻燈–>
<script src="logicA.js" />
<script>
$.onDomReady(function(){
___LogicA.start();
});
</script>
首先，手寫(xiě)大量的js文件會(huì)各自占用單獨(dú)的http請(qǐng)求，在者，這個(gè)場(chǎng)景中，slider.js繼承自tabview.js，因此要著重關(guān)注他們的順序，第三，如果別人在頁(yè)面的其他地方也使用了日歷或者幻燈，還要再加兩個(gè)相同的js標(biāo)簽？其實(shí)，說(shuō)到這里，我們已經(jīng)可以隱約看到大項(xiàng)目團(tuán)隊(duì)開(kāi)發(fā)的影子了，在一個(gè)迭代及其頻繁的項(xiàng)目中，開(kāi)發(fā)者需要在短的時(shí)間內(nèi)完成一個(gè)復(fù)雜頁(yè)面的某個(gè)功能的開(kāi)發(fā)，而且不能影響到頁(yè)面的其他功能，畢竟，每添加一個(gè)功能，QA mm們都要將與之牽連的所有功能都要回歸，可辛苦了我們的QA mm們。在這種情況下，一個(gè)功能的開(kāi)發(fā)可能和同一個(gè)頁(yè)面其他功能的開(kāi)發(fā)相互并行。互相不屬于同一個(gè)項(xiàng)目組，也不知曉對(duì)方的實(shí)現(xiàn)。這種模式則是我們經(jīng)常遇到的多人開(kāi)發(fā)，沖突也大都由此產(chǎn)生，每個(gè)功能單獨(dú)看來(lái)是正確的，合并到一起會(huì)產(chǎn)生沖突和bug，這時(shí)調(diào)試bug則需要兩個(gè)工程師同時(shí)進(jìn)行，很麻煩。甚者，當(dāng)組件升級(jí)了，比如，tabview.js再繼承自tab.js，則又要去聯(lián)系各個(gè)工程師，將每個(gè)引用tabview.js的地方之前再加上一個(gè)tab.js，很麻煩。我們說(shuō)，這種多人協(xié)作模式所帶來(lái)的沖突也是代碼污染的一種，因?yàn)槊總�(gè)人只能掌控類似tms區(qū)塊那么巴掌大的地方，所組成的最終頁(yè)面是什么樣，都不知道。更何況，這種生猛的引用js，也會(huì)阻塞頁(yè)面加載，占用http請(qǐng)求，影響性能。
鑒于此，yui將js的動(dòng)態(tài)引入機(jī)制也并入其沙箱設(shè)計(jì)之中，我要引用的只是一個(gè)名字，比如slider.js，他依賴tabview.js，tabview.js依賴tab.js，這樣我只需引用一個(gè)名叫”slider”的東西即可，不用操心他依賴什么，更不用管如何引入到頁(yè)面中，yui都幫我們搞定：
<script>
TB.addmoudle({
___logicA:{
______fullpath:'logica.js',
______requires:['slider']
___}
}).use('logicA',function(Y){
___LogicA.start();
});
</script>
當(dāng)我們看最終組成的頁(yè)面的時(shí)候，看到的只是埋藏在頁(yè)面各個(gè)角落的這些簡(jiǎn)短的結(jié)構(gòu)一致的js代碼段。很易理解，這點(diǎn)代碼也不用像長(zhǎng)的代碼塊壓成一行。（更多細(xì)節(jié)可參照 前端弱架構(gòu)導(dǎo)致的代碼污染 ）
出處：Taobao.com UED Team
責(zé)任編輯：bluehearts
上一頁(yè) YUI3設(shè)計(jì)中的激進(jìn)和妥協(xié) [1] 下一頁(yè) YUI3設(shè)計(jì)中的激進(jìn)和妥協(xié) [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) YUI3設(shè)計(jì)中的激進(jìn)和妥協(xié) [2]
