|
模塊文件模板
這里是一段最常用的模塊定義的代碼：
/*jslint devel: true, undef: true, newcap: true, strict: true, maxerr: 50 */
/*global YUI*/
/**
* The module-name module creates the blah blah
* @module module-name
*/
YUI.add(‘module-name’, function (Y) {
"use strict";
// handy constants and shortcuts used in the module
var Lang = Y.Lang,
CBX = ‘contentBox’,
BBX = ‘boundingBox’,
NAME = ‘xxxx’;
/**
* The Xxxx class does ….
* @class Xxxx
* @extends Widget
* @uses WidgetParent
* @constructor
* @cfg {object} configuration attributes
*/
Y.Xxxx = Y.Base.create(
NAME,
Y.Widget,
[Y.WidgetParent],
{
// Instance members here
},
{
// Static members here, specially:
ATTRS: {
}
}
);
}, ’0.99′, {
requires: ['widget','widget-parent'],
skinnable: true
});
前兩行是供JSLint過(guò)濾這段代碼用的，JSLint是我非常推薦的一個(gè)javascript語(yǔ)法檢查工具。在JSLint網(wǎng)頁(yè)版本中，會(huì)有一個(gè)選項(xiàng)區(qū)來(lái)設(shè)置選項(xiàng)，這排checkbox在頁(yè)面的底部，如果你使用YUI Builder，JSLint會(huì)自動(dòng)去讀取注釋中的配置，來(lái)依此對(duì)你的代碼進(jìn)行語(yǔ)法檢查。
接下來(lái)的注釋是為了生成YUIDoc，這會(huì)為你省去不少麻煩，文檔有固定格式的模板，你只要通過(guò)注釋語(yǔ)法填充內(nèi)容就可以了。當(dāng)項(xiàng)目越來(lái)越大，你就會(huì)越來(lái)越依賴(lài)這種項(xiàng)目文檔。
現(xiàn)在開(kāi)始真正的代碼段，YUI.add()語(yǔ)句。我們用YUI.add()來(lái)告知Loader模塊名稱(chēng)、模塊內(nèi)容、以及其他的一些信息。模塊名通常使用小寫(xiě)字母加中橫線(xiàn)組成，這些模塊名稱(chēng)就是你在YUIAPI文檔左側(cè)看到的名字列表。當(dāng)然你也看到有很多不是小寫(xiě)字母加中橫線(xiàn)的命名，畢竟這種命名方法并非強(qiáng)制，你可以根據(jù)你的習(xí)慣做模塊命名。
YUI.add()的第二個(gè)參數(shù)是一個(gè)帶入YUI實(shí)例的函數(shù)，這個(gè)實(shí)例通常被命名為Y，這個(gè)回調(diào)中的邏輯即是模塊的主體部分，而你需要依賴(lài)的模塊的功能方法都會(huì)被掛載到這個(gè)Y上。跳到代碼的結(jié)尾，你會(huì)看到Y(jié)UI.add()剩下的參數(shù)，版本號(hào)（也可以不需要）和模塊配置項(xiàng)，模塊配置項(xiàng)是一個(gè)對(duì)象，這里代碼的含義就是告訴Loader這個(gè)模塊依賴(lài)了widget和widget-parent，并包含皮膚。當(dāng)然，在這個(gè)例子中widget是多余的，因?yàn)閣idget-parent依賴(lài)了widget，這時(shí)即便你寫(xiě)上widget，Loader也不會(huì)重復(fù)加載widget。而且你根本不必在意模塊的順序，Loader會(huì)計(jì)算他們的依賴(lài)關(guān)系并做好排序。你也會(huì)注意到Y(jié)UI APIdoc中Loader包含一個(gè)addModule()方法，YUI.add的功能就和它很類(lèi)似。
在函數(shù)體內(nèi)，首先是“use strict”的聲明，這個(gè)聲明源自ECMAScript5，這使你的代碼對(duì)于未來(lái)的解釋器也具備足夠好的適應(yīng)能力，對(duì)于舊的解釋器也只相當(dāng)于定義了一個(gè)孤零零的字符串值而已，不妨礙程序運(yùn)行�！皍se”聲明指定了一個(gè)函數(shù)作用域，因此將這句聲明放在YUI.add()內(nèi)比放在文件最頂部要更安全一些，因?yàn)槿绻麑⑵浞旁谌郑@回影響后續(xù)加載的所有JS邏輯。
然后是定義常量和變量的縮寫(xiě)，JavaScript本身沒(méi)有常量的概念，這里的“常量”只是一種約定，和在其他編程語(yǔ)言中一樣，常量通常使用大寫(xiě)字母和下劃線(xiàn)來(lái)命名。這樣做的好處有兩個(gè)，特別是字符串常量，一是當(dāng)你多次寫(xiě)一個(gè)字符串的時(shí)候，如果字符串拼錯(cuò)則只能在運(yùn)行時(shí)報(bào)錯(cuò)，當(dāng)改為常量形式如果出錯(cuò)在JSLint語(yǔ)法檢查時(shí)就能發(fā)現(xiàn)。二是讓YUICompressor工作效率更高，使用常量可以節(jié)省不少字節(jié)數(shù)。通常，我們更多的把配置屬性和事件名稱(chēng)定義為常量。
縮寫(xiě)，比如用Lang代替Y.Lang，寫(xiě)的更少，解釋器執(zhí)行更快(直接使用引用而不是逐級(jí)查找對(duì)象成員)。
在API docs所需的文檔注釋后是實(shí)際的代碼，我們需要將自己的模塊對(duì)象掛載在Y上， 比如 Y.Xxxx。我建議采用Y.Base.create()來(lái)創(chuàng)建模塊，這樣能創(chuàng)建Base的派生類(lèi)（Widget即派生自Base），Base模板基本能滿(mǎn)足大多數(shù)的模塊功能需求，因此不必在用其他方式來(lái)代替Y.Base.create。其中的第一個(gè)參數(shù)是模塊名稱(chēng)，NAME屬性是Base的一個(gè)描述，通常用駝峰命名法，這個(gè)名字會(huì)用于事件的前綴（例如”io:success”），抑或是組件容器的class命名前綴（例如:”yui3-xxxx-content”），此外，NAME還是執(zhí)行“實(shí)例.toString()”時(shí)的默認(rèn)返回值，在debugger模式下經(jīng)�？吹胶芏囝�(lèi)似的log。這里我們使用常量NAME來(lái)標(biāo)示類(lèi)模塊的名稱(chēng)。
create()的第二個(gè)參數(shù)是要派生的父類(lèi)。比如，你會(huì)使用Y.Base作為無(wú)UI組件的父類(lèi)、使用Y.Widget作為帶UI組件的父類(lèi)、Y.Plugin.Base作為插件的父類(lèi)、或者使用任意派生自Y.Base的子類(lèi)作為父類(lèi)，也就是說(shuō)，任意通過(guò)Y.Base.create()創(chuàng)建的類(lèi)都可以再次通過(guò)create()被繼承。
第三個(gè)參數(shù)是一個(gè)參元類(lèi)，摻元類(lèi)的方法都將掛載到你的類(lèi)上，常用的參元類(lèi)包括從Base派生來(lái)的ArrayList、從Widget.Attribute派生來(lái)的類(lèi)似Widget-Xxxx的子模塊、EventTarget和PluginHost（這兩個(gè)參元類(lèi)已經(jīng)被Base繼承），YUI中的繼承機(jī)制是如此強(qiáng)大，以至于你看Overlay的源碼僅僅是一句從Widget的繼承。子類(lèi)可以繼承自多個(gè)父類(lèi)，因此第三個(gè)參數(shù)是一個(gè)數(shù)組。
最后是實(shí)際的代碼實(shí)現(xiàn)部分。第四個(gè)和第五個(gè)參數(shù)都是對(duì)象，它們包含了實(shí)例，和類(lèi)中的靜態(tài)成員。實(shí)例屬性通過(guò)深拷貝掛載到類(lèi)的原型(prototy)上，通過(guò)this來(lái)訪(fǎng)問(wèn)他們，其他靜態(tài)成員則是可公開(kāi)訪(fǎng)問(wèn)的。
出處：Taobao.com UED Team
責(zé)任編輯：bluehearts
上一頁(yè) 使用YUI 3開(kāi)發(fā)Web應(yīng)用的訣竅 [1] 下一頁(yè) 使用YUI 3開(kāi)發(fā)Web應(yīng)用的訣竅 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 使用YUI 3開(kāi)發(fā)Web應(yīng)用的訣竅 [2]
