|
與其他模塊的通信
在實現(xiàn)一個模塊之后，它會和其他模塊進行交互。傳統(tǒng)的方法是緊耦合（通過Nicholas Zakas的視頻中我們可以了解什么是緊耦合什么是松耦合），也就是通過方法調(diào)用和屬性賦值來將這些模塊緊密聯(lián)系在一起，在這兒就不贅述了。下面我們介紹另一種方法——自定義事件，Y.Base里面包含了你所需要的全部方法。
首先，在initializer中，你要發(fā)布這個自定義事件，讓大家都知道它： initializer: function (cfg) {
this.publish(‘eventName’, { /*… options … */});
},
需要注意的是，事件名稱最好是一個常見單詞，因為在后面你會經(jīng)常使用它，常見單詞可以避免出現(xiàn)拼寫錯誤。然后，假設你擁有一個對象，例如： var myWidget = new Y.MyWidget({ /* .. attributes … */ });
此時，你可以為它綁定事件： myWidget.after(‘eventName’, this._eventNameListener, this);
然而，這樣做雖然不像直接的方法調(diào)用那樣聯(lián)系緊密，但是由于必須有一個myWidget的實例，所以其實質(zhì)還是緊耦合。也就是說，在兩個模塊的通信中，一個模塊必須知道另一個的細節(jié)，或者存在一個監(jiān)視模塊為它們建立連接。在這個過程中，有兩個配置項是非常重要的，broadcast和emitFacade。
第一個，broadcast，可以讓你在其他的模塊中為這個事件設置監(jiān)聽器。broadcast默認值為0，此時只能用前面所示的那個方法。如果希望事件可以在任何地方被監(jiān)聽，你需要改變broadcast的值。如果只是在沙箱內(nèi)，broadcast值為1，如果需要在各個沙箱間，則broadcast值為2。一個沙箱如下所示： YUI().use( ‘module1′, …, ‘moduleN’, function (Y) {
// this is your sandbox
});
在頁面中可以有多個這樣的沙箱： YUI().use( ‘module1′, …, ‘moduleN’, function (Y) {
// this is your sandbox
});
YUI().use( ‘moduleX-1′, …, ‘moduleX-N’, function (Z) {
// this is another sandbox
});
如果你設置broadcast值為2，你就可以在沙箱2中監(jiān)聽在沙箱1中發(fā)布的事件，具體細節(jié)請看Event user guide。我們繼續(xù)討論簡單沙箱的情況。
要在一個沙箱內(nèi)監(jiān)聽另一個模塊中發(fā)布的事件，必須知道的是這個模塊的靜態(tài)屬性NAME的值和事件名稱�；叵胂�，Y.Base.create方法所帶的第一個參數(shù)的值，就是NAME屬性的值。因此，如果你創(chuàng)建了這樣一個模塊： Y.MyWidget = Y.Base.create(
‘xxxx’,
Y.Widget,
// … and so on
然后在initializer發(fā)布了一個’help’事件： initializer: function (config) {
this.publish(‘help’, {
broadcast: 1,
emitFacade: true
});
},
那么，要在其他模塊的沙箱內(nèi)監(jiān)聽這個事件，就可以這樣做： Y.after(‘xxxx:help’, function (ev) { … }, this);
在這里調(diào)用了Y.after，而不是myWidget.after，所以我不再需要一個實例才能觸發(fā)這個事件。你也可以用同樣的方法來監(jiān)聽DOM事件或者其他的自定義事件，比如’valueChange’等，不同的僅僅是引號前面的前綴。你也可以使用別的東西作為前綴，Y.base會接受這個值，但是通常情況下，Y.base提供的默認值已經(jīng)足夠了。你還需要設置emitFacade值，因為需要一個對象來觸發(fā)事件，從而為ev.target提供門面值（facade value）。也許你會想，如果監(jiān)聽器所在的模塊獲得了注冊事件模塊的對象，那不是重新成為緊耦合了么。但事實并非如此，只要你在監(jiān)聽器模塊中不保留這個對象，耦合就不復存在。此外，我們還有更好的辦法。
出處：Taobao.com UED Team
責任編輯：bluehearts
上一頁 使用YUI 3開發(fā)Web應用的訣竅 [6] 下一頁 使用YUI 3開發(fā)Web應用的訣竅 [8]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 7 頁 使用YUI 3開發(fā)Web應用的訣竅 [7]
