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

模塊的定義

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

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

 

---