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

模塊的定義

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

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

 

---