|
在發(fā)布事件時，我們可以添加所有在事件對象中監(jiān)聽器所需要的信息，例如： this.fire(‘help’, {helpTopic: ‘Event Broadcasting’});
fire()方法的兩個參數分別為發(fā)布事件的名稱（也就是Y.Base為它增加前綴的類的名稱）和包含一些特性的對象（這些特性需要復制給事件對象）。這樣監(jiān)聽器就不需要為了獲取一些信息而遍歷注冊事件模塊，從而達到了松耦合的目的。監(jiān)聽器通過“事件廣播”知道有這樣的一些模塊，甚至可能有很多這樣的模塊會響應help事件，但并不需要關注是哪一個模塊正在響應它。這種方法也簡化了日后新模塊的添加。
事件和默認行為
要改變一個類的行為，通常的辦法是建立一個子類，然后重寫它的方法。YUI也可以完成這些工作。你可以用Y.Base.create來創(chuàng)建一個基類Y.Widget，然后用Y.Base.create來創(chuàng)建一個新的類來作為基類的擴展，并給予其一些特殊的行為。例如，先創(chuàng)建基類： Y.MySimpleWidget = Y.Base.create(
‘simpleWidget’,
Y.Widget,
[],
{
// instance members here, amongst them:
renderUI: function () {
this.get(CBX).append(Y.Node.create(‘ … whatever goes into the widget … ‘ ));
}
},
{
ATTRS: {
// configuration attributes
}
// other static members
}
);
然后創(chuàng)建子類： Y.MyFancyWidget = Y.Base.create(
‘fancyWidget’,
Y.MySimpleWidget,
[],
{
renderUI: function () {
Y.MyFancyWidget.superclass.renderUI.apply(this, arguments);
this.get(CBX).append(Y.Node.create(‘ … add some bells and whistles … ‘ ));
}
// Presumably the fancy version does not need any further static members so I skip the last argument
);
我們可以看到，MyFancyWidget通過添加一些細節(jié)改進了MySimpleWidget。但是這在某些情況下會有些問題，所以你需要設計一個更靈活，更容易改變的基類。自定義事件會對你有所幫助。
假設有個排序類，擁有key和direction兩個參數，聲明如下： sort: function (key, direction) {
// sorting happens here
},
如果這個函數的行為在某些情況下需要更改，您可以這么做，在initializer方法中添加自定義事件： initializer: function (config) {
// amongst many other things:
this.publish(SORT, {defaultFn: this._defSortFn});
},
若SORT是一個具有排序功能的實例，你可以這樣聲明它的sort函數： sort: function(key, direction) {
this.fire(SORT, {key:key, direction:direction});
},
這樣子，排序函數就轉換為一個具有相同參數的事件觸發(fā)函數。這樣只是提供了一個轉換接口，你仍然需要通過原始的排序函數來設計一個類： _defSortFn: function (ev) {
var key = ev.key, direction = ev.direction;
// same code as the original sort function
},
這個_defSortFn類的函數體與原始的方法一模一樣，達到相同的排序目的。但是你可以從事件對象中知道key和direction參數，只要一段簡單的代碼段就可以設置一個監(jiān)聽器，并且改變排序方法。 myObjectThatSorts.on(‘sort’, function (ev) {
var key = ev.key, direction = ev.direction;
ev.preventDefault();
// now do your own sort
});
通過preventDefault我讓myObjectThatSorts不再執(zhí)行_defSortFn中的排序方法，從而可以根據我需要的結果做任何事，無論原來的排序是什么樣。我甚至不用關心它是否停止，只要監(jiān)聽after事件來翻轉UI上用來顯示排序方向的箭頭。
我也可以改變事件對象。當事件觸發(fā)時，我們得到的是根據事件對象復制的一個對象，它從before監(jiān)聽器開始傳播，通過默認的函數，到達after監(jiān)聽器，然后被丟棄。你可以在過程中改變它的一些屬性的值。當然，在默認方法執(zhí)行后再做任何改變是沒有影響的，在執(zhí)行之前改變事件對象才能對方法有所影響。例如。 myObjectThatSorts.on(‘sort’, function (ev) {
ev.direction = (ev.direction===’desc’?'asc’:'desc’);
});
這樣將得到倒置的排序結果。
出處：Taobao.com UED Team
責任編輯：bluehearts
上一頁 使用YUI 3開發(fā)Web應用的訣竅 [7] 下一頁 使用YUI 3開發(fā)Web應用的訣竅 [9]
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 8 頁 使用YUI 3開發(fā)Web應用的訣竅 [8]
