詳解Javascript事件驅動的來龍去脈
對于Javascript事件驅動大家了解很多，本文將從一個應用場景開始講起，希望本文對大家使用好Javascript事件驅動有所幫助。
首先來看看這樣一個應用場景，網(wǎng)頁上有個鏈接，比如說高級搜索，點擊以后會出現(xiàn)一個搜索面板。由于面板里有很多搜索字段，而這些搜索字段又有很多數(shù)據(jù)，因此決定采用異步來加載該搜索面板。以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參數(shù)用以回調，比如 new AdvancedSearch(callback); 當然，除此以外，其實還有一種更優(yōu)雅的方法，事件驅動。
代碼寫起來很簡單，加載完畢后觸發(fā)這個事件:
- ….load(‘….', function() {
- $().trigger(‘advanced_search_load_complete’);
- })
需要在加載完成后做某些操作的地方綁定一下事件處理函數(shù)即可:
- $().bind(‘advanced_search_load_complete’, function(){
- ……
- });
封裝的地方不用任何改動，其它地方愛做什么操作就做什么操作，這就是事件驅動的魅力，極大的松耦合。
總結一下，事件驅動好處是什么呢？
1. 松耦合的交互，事件發(fā)布者和訂閱者無須知道對方的存在。
2. 多對多的關系，多個事件發(fā)布者對應多個訂閱者。
3. 一個個事件發(fā)布出來，針對這些事件作出響應，這就是一個業(yè)務場景，每個步驟清晰自然。
4. 事件發(fā)布可以帶參數(shù)，事件處理者可以拿到關于該事件的任何數(shù)據(jù)。
基于事件驅動的Javascript編程模型不同于常見的全局函數(shù)隨便調的Javascript，它的模塊更內聚，更容易復用，在業(yè)務不可預知的前提下，業(yè)務代碼改變得更少。
目標，更漂亮的Javascript事件驅動，我們都來擁抱它。
原文標題：事件驅動的javascript
鏈接：http://www.cnblogs.com/blusehuang/archive/2009/10/19/javascript_event_driven.html
【編輯推薦】
