我們知道，YUI3的設計始終圍繞著(zhù)“模塊”展開(kāi)。今天我不想過(guò)多解釋什么是模塊，因為Nicholas Zakas在他的文章”構建可伸縮的前端架構“中已經(jīng)做了詳盡說(shuō)明。在這里我將著(zhù)重闡述如何構建這些模塊。文章中的大部分內容都可以從在線(xiàn)文檔查閱，并有其他可代替的方法。當然在線(xiàn)API文檔的內容大而全。本文只是介紹其中的精華的部分——基于YUI3開(kāi)發(fā)web應用的訣竅，這里的“訣竅”更針對短小精悍的程序場(chǎng)景，不像Nicholas Zakas所指的架構級場(chǎng)景，畢竟僅憑本文的篇幅無(wú)法全部展開(kāi)講述YUI3。

模塊的定義

首先我們要對模塊進(jìn)行定義，一種常見(jiàn)的方法是將頁(yè)面可視區域的不同部分做切分，導航、菜單、正文、邊欄面板等等。然后查一下YUI是否已經(jīng)提供了這些模塊，比如YUI3就沒(méi)有提供“菜單”組件，但提供了Node-MenuNav插件，這個(gè)插件可以將結構化好的html代碼（ul>li）渲染成具有交互行為的菜單?；蛘吣憧梢灾苯尤UI Gallery中去找基礎組件。不管怎樣，你總會(huì )找到一種容器或者布局，可以讓你往里填充你需要的東西，ok，讓我們從這里開(kāi)始。

我建議將每個(gè)模塊都封裝進(jìn)一個(gè)文件，放在和文件名同名的目錄中，比如weather模塊應當放在/weather/weather.js中，這樣做的原因是，有可能你的組件會(huì )依賴(lài)一些樣式，包括css和img等，將這些樣式和資源文件放到和js同一個(gè)目錄下，YUILoader就會(huì )很方便的找到他們。這樣，樣式文件就可以放在weather/assets/skins/sam/weather.css，同樣，其他圖片和樣式也可以按這種方式放置，當然我們假設你沒(méi)有使用YUI Builder來(lái)打包你的項目，這就有點(diǎn)說(shuō)來(lái)話(huà)長(cháng)了。assets目錄和skin目錄的含義不言自明，但sam目錄就搞不懂啥意思了，其實(shí)sam是YUI配置項中skin的默認值，指代YUI內嵌組件的默認樣式，sam取名自其設計師Sam Lind。因此你也可以使用你的昵稱(chēng)作為你的組件皮膚名稱(chēng)，當然這需要你在YUI全局配置中傳入skin參數，簡(jiǎn)單起見(jiàn)，我們這里只使用默認皮膚。

 

---