|
YUI_config
在頁面中調(diào)用一個模塊的最簡單的方法是通過scirpt標(biāo)簽來引用腳本，或者是將它放在script標(biāo)簽的url指向的combo文件中（combo可以通過手動連接或者支持combo的服務(wù)器自動完成）。而將自定義模塊集成到Y(jié)UI Loader中是一個更好的辦法，可以極大的改進(jìn)性能。這種方法很重要的一點(diǎn)是在使用YUI.add()插入模塊時引入依賴文件（通過requires的最后一個參數(shù)），這樣在調(diào)用use()時就可以按照正確的順序調(diào)用它們。
對于小的web應(yīng)用，你可以在頁面load時加載所有內(nèi)容，但是對于大型應(yīng)用，這樣是很不合理的，因?yàn)闀ㄙM(fèi)太長的時間。你可以使用很多次use()方法去請求各個模塊所需要的文件，然而這種讓Loader在模塊加載時去查找本模塊的依賴文件是非常耗時的，它可能需要建立很多個請求，直到獲得它需要的文件為止。相反，你可以預(yù)先告訴Loader各個模塊和它的依賴文件，這樣，當(dāng)遇到這個模塊時，加載器就可以并行的對它們進(jìn)行處理。
為此，你需要為YUI Lodaer添加模塊說明和要求來建立模塊依賴關(guān)系，最簡單的方法就是建立一個包含這些信息的yui_config.js文件（可以改為其他名字），如下所示： YUI_config = {
filter:’raw’,
//combine:false,
gallery: ‘gallery-2011.02.18-23-10′,
groups: {
js: {
base: ‘build/’,
modules: {
‘myWidget’: {
path: ‘myWidget/myWidget.js’,
requires: ['widget', 'widget-parent', 'widget-child', 'widget-stdmod', 'transition'],
skinnable: true
},
// other modules here
}
}
// other groups here
}
};
將這段代碼放在常規(guī)的<script>標(biāo)簽內(nèi)，并放在第一個YUI().use()代碼段之前。它用來配置（YUI）庫加載前需要的一些全局屬性。，就像以前你必須放在YUI().use()的第一個參數(shù)一樣，現(xiàn)在YUI可以代替你做這些。你可以使用這兒所列的任何配置項(xiàng)。
filter：“min”：產(chǎn)品代碼（去除注釋后的最簡版本）；
debug：bebug版本（帶有一些log語句，包含console組件）；
raw：非最簡版本（不帶log，含有注釋）；其中后兩者通常只應(yīng)用于開發(fā)環(huán)境中。
combine：這個配置項(xiàng)僅僅應(yīng)用在combo后一些難解決的bug的查找時。
gallery：如果你使用了gallery模塊，填上它的版本號。
group：這個屬性用來描述你的模塊。
首先是組的名稱，這里叫‘js’，也可以是其他名稱。 你可以為放置在相同位置的一系列文件創(chuàng)建一個這樣的組，每個組的第一個參數(shù)用來聲明文件的根路徑（可以是相對路徑或者絕對路徑）。除base之外，還有一些組的基本屬性，具體請參照這兒。
最后是modules屬性，需要在這列舉這個組的所有模塊。調(diào)用每個模塊的關(guān)鍵詞是模塊的名稱，也就是你在YUI().add()和YUI().use()的第一個參數(shù)。path是模塊相關(guān)文件的位置，可以是在base基礎(chǔ)上的相對路徑，如果文件放在其他地方，也可以用全路徑。其他的屬性可以在這兒找到，和放在YUI.add()結(jié)尾的一樣。requires屬性里面可以是YUI modules, gallery modules或者你自己創(chuàng)建的modules，無論是這個組的還是其他組的。此外，如果設(shè)置skinnable:true的話，皮膚會被自動加載，就像我在文章開頭所講的那樣。
為了簡化這些工作，我創(chuàng)建了一個Windows腳本文件，可以為我自動配置YUI_config。它會掃描并閱讀每一個模塊文件，并提取出每一個YUI.add中的參數(shù)。對于我來說，它很有用，但并不一定適合你。
結(jié)語
YUI3非常靈活，你可以通過很多方法建立你的模塊。比如通過Y.Base來派生，其實(shí)我也不是經(jīng)常這么做，只是偶爾會用到，但在復(fù)雜系統(tǒng)中，依然非常推薦使用Y.Base。
原文：http://ued.taobao.com/blog/2011/04/14/a-recipe-for-a-yui-3-application/
本文鏈接：http://m.95time.cn/tech/web/2011/8412.asp 
出處：Taobao.com UED Team
責(zé)任編輯：bluehearts
上一頁 使用YUI 3開發(fā)Web應(yīng)用的訣竅 [8] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 9 頁 使用YUI 3開發(fā)Web應(yīng)用的訣竅 [9]
