javascript 事件驅動編程【轉（原文為“事件驅動的javascript”）】

　　呵呵，該了一下標題，我覺得這樣更容易理解，轉載：http://www.cnblogs.com/blusehuang/archive/2009/10/19/javascript_event_driven.html?login=1#commentform

首先來看看這樣一個應用情境，網頁上有個連結，比如說進階搜尋，點擊以後會出現一個搜尋面板。由於面板裡有很多搜尋欄位，而這些搜尋欄位又有很多資料，因此決定採用非同步來載入該搜尋面板。以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！事件驅動，我們都來擁抱它。