首先來看看這樣一個應用情境,網頁上有個連結,比如說進階搜尋,點擊以後會出現一個搜尋面板。由於面板裡有很多搜尋欄位,而這些搜尋欄位又有很多資料,因此決定採用非同步來載入該搜尋面板。以jQuery為例,代碼可能會這麼寫:
$('#advance_search’).bind(‘click’, function(e){
$('#advance_search_panel’).load(‘/xxx/advance_search.html"’);
});
但是呢,又需要在載入後做一些處理,比如說隱藏掉正在載入的提示文字或者表徵圖,好說,就給load加上callback
….load(‘…..', function(){
$('#waiting_message’).hide();
})
面板裡面有個搜尋按鈕,點擊進行搜尋,載入完需要綁定click事件,於是我們又在下面加上:
….load(‘…..', function(){
$('#waiting_message’).hide();
$('#search_button’).bind(‘click’, do_advance_search);
})
某一天,其他有些頁面也要加上這個進階搜尋,但是呢,載入完成後的處理又都不一樣,有的頁面需要隱藏掉某個div,有的頁面需要綁定一些操作等,這時候怎麼辦?難道都去改這個load方法嗎?
有一種方法可以解決這個問題,加上callback參數用以回調,比如 new AdvancedSearch(callback); 當然,除此以外,其實還有一種更優雅的方法,事件驅動。
代碼寫起來很簡單,載入完畢後觸發這個事件:
….load(‘….', function() {
$().trigger(‘advanced_search_load_complete’);
})
需要在載入完成後做某些操作的地方綁定一下事件處理函數即可:
$().bind(‘advanced_search_load_complete’, function(){
……
});
封裝的地方不用任何改動,其它地方愛做什麼操作就做什麼操作,這就是事件驅動的魅力,極大的松耦合。
總結一下,事件驅動好處是什麼呢?
1. 松耦合的互動,事件發行者和訂閱者無須知道對方的存在。
2. 多對多的關係,多個事件發行者對應多個訂閱者。
3. 一個個事件發布出來,針對這些事件作出響應,這就是一個業務情境,每個步驟清晰自然。
4. 事件發布可以帶參數,事件處理者可以拿到關於該事件的任何資料。
基於事件驅動的javascript編程模型不同於常見的全域函數隨便調的javascript,它的模組更內聚,更容易複用,在業務不可預知的前提下,業務代碼改變得更少。
目標,更漂亮的javascript!事件驅動,我們都來擁抱它。