事件分發(fā)的作用

在為頁(yè)面添加各類交互功能時(shí)，我們熟知的最簡(jiǎn)單的做法就是為頁(yè)面元素綁定事件，然后在事件處理函數(shù)中，做我們想要做的動(dòng)作。就像這樣的代碼：

element.onclick = function(event){  // Do anything.};

如果我們要做的動(dòng)作不復(fù)雜，那么實(shí)際邏輯功能的代碼，放在這里是可以的。如果今后需要修改，再到這段事件處理函數(shù)的位置來(lái)修改。

再進(jìn)一步，為了做適當(dāng)?shù)拇a復(fù)用，我們可能會(huì)把邏輯功能中的一部分分拆到一個(gè)函數(shù)內(nèi)：

element.onclick = function(event){  // Other code here.  doSomethingElse();};

這里的函數(shù)doSomethingElse對(duì)應(yīng)的功能可能會(huì)在其他地方用到，所以會(huì)這樣做分拆。此外，可能會(huì)有設(shè)定坐標(biāo)這樣的功能（假定函數(shù)名為setPosition），則還需要用到瀏覽器事件對(duì)象event提供的諸如指針位置一類的信息：

element.onclick = function(event){  // Other code here.  doSomethingElse();  setPosition(event.clientX, event.clientY);};

此處有一個(gè)不推薦的做法是直接把event對(duì)象傳遞給setPosition。這是因?yàn)椋智暹壿嫻δ芎褪录陕?tīng)兩種職責(zé)，是一種良好的實(shí)踐。只讓事件處理函數(shù)本身接觸到瀏覽器事件對(duì)象event，有利于降低代碼耦合，方便獨(dú)立測(cè)試及維護(hù)。

那么，功能越來(lái)越多，越來(lái)越復(fù)雜了會(huì)怎么樣呢？如果沿用之前的做法，可能是這個(gè)樣子：

element.onclick = function(event){  doMission1();  doMission2(event.clientX, event.clientY);  doMission3();  // ...  doMissionXX();};

雖然這樣用也沒(méi)問(wèn)題，但這種時(shí)候其實(shí)就可以考慮更優(yōu)雅的寫(xiě)法：

element.onclick = function(event){  amplify.publish( "aya:clicked", {    x: event.clientX,    y: event.clientY  });};

這種形式就是事件分發(fā)，請(qǐng)注意，這里的事件并不是指瀏覽器原生的事件（event對(duì)象），而是邏輯層面的自定義事件。上面的aya:clicked就是一個(gè)隨便寫(xiě)（really?）的自定義事件名稱。

顯然到這還沒(méi)結(jié)束，為了完成之前的復(fù)雜的功能，我們還需要將自定義事件和要做的事關(guān)聯(lián)在一起：

amplify.subscribe( "aya:clicked", doMission1);// ...amplify.subscribe( "aya:clicked", doMission2);// ...

看起來(lái)又繞了回來(lái)？沒(méi)錯(cuò)，但這是有用的。一方面，瀏覽器原生事件的偵聽(tīng)被分離并固化了下來(lái)，以后如果邏輯功能有變化，例如減少幾個(gè)功能，則只需要到自定義事件的關(guān)聯(lián)代碼部分做刪減，而不需要再關(guān)心原生事件。另一方面，邏輯功能的調(diào)整變得更為靈活，可以在任意的代碼位置通過(guò)subscribe添加功能，而且可以自行做分類管理（自定義的事件名）。

簡(jiǎn)單來(lái)說(shuō)，事件分發(fā)通過(guò)增加一層自定義事件的冗余（在只有簡(jiǎn)單的邏輯功能時(shí)，你就會(huì)覺(jué)得它是冗余），降低了代碼模塊之間的耦合度，使得邏輯功能更為清晰有條理，便于后續(xù)維護(hù)。

等下，前面那個(gè)出境了好幾次的很有存在感的amplify是干什么的？

Nice，終于是時(shí)候介紹這個(gè)了。
AmplifyJS

事件分發(fā)是需要一定的方法來(lái)實(shí)現(xiàn)的。實(shí)現(xiàn)事件分發(fā)的設(shè)計(jì)模式之一，就是發(fā)布/訂閱(Publish/Subscribe)。

AmplifyJS是一個(gè)簡(jiǎn)單的JavaScript庫(kù)，主要提供了Ajax請(qǐng)求、數(shù)據(jù)存儲(chǔ)、發(fā)布/訂閱三項(xiàng)功能（每一項(xiàng)都可獨(dú)立使用）。其中，發(fā)布/訂閱是核心功能，對(duì)應(yīng)命名是amplify.core。

amplify.core是發(fā)布/訂閱設(shè)計(jì)模式的一個(gè)簡(jiǎn)潔的、清晰的實(shí)現(xiàn)，加上注釋一共100多行。讀完amplify的源碼，就可以比較好地理解如何去實(shí)現(xiàn)一個(gè)發(fā)布/訂閱的設(shè)計(jì)模式。
代碼全貌

amplify.core的源碼整體結(jié)構(gòu)如下：

(function( global, undefined ) {var slice = [].slice,  subscriptions = {};var amplify = global.amplify = {  publish: function( topic ) {    // ...  },  subscribe: function( topic, context, callback, priority ) {    // ...  },  unsubscribe: function( topic, context, callback ) {    // ...  }};}( this ) );

可以看到，amplify定義了一個(gè)名為amplify的全局變量（作為global的屬性），它有3個(gè)方法publish、subscribe、unsubscribe。此外，subscriptions作為一個(gè)局部變量，它將保存發(fā)布/訂閱模式涉及的所有自定義事件名及其關(guān)聯(lián)函數(shù)。
publish

publish即發(fā)布，它要求指定一個(gè)topic，也就是自定義事件名（或者就叫做話題），調(diào)用后，所有關(guān)聯(lián)到某個(gè)topic的函數(shù)，都將被依次調(diào)用：

publish: function( topic ) {  // [1]  if ( typeof topic !== "string" ) {    throw new Error( "You must provide a valid topic to publish." );  }  // [2]  var args = slice.call( arguments, 1 ),    topicSubscriptions,    subscription,    length,    i = 0,    ret;  if ( !subscriptions[ topic ] ) {    return true;  }  // [3]  topicSubscriptions = subscriptions[ topic ].slice();  for ( length = topicSubscriptions.length; i < length; i++ ) {    subscription = topicSubscriptions[ i ];    ret = subscription.callback.apply( subscription.context, args );    if ( ret === false ) {      break;    }  }  return ret !== false;},

[1]，參數(shù)topic必須要求是字符串，否則拋出一個(gè)錯(cuò)誤。

[2]，args將取得除topic之外的其他所有傳遞給publish函數(shù)的參數(shù)，并以數(shù)組形式保存。如果對(duì)應(yīng)topic在subscriptions中沒(méi)有找到，則直接返回。

[3]，topicSubscriptions作為一個(gè)數(shù)組，取得某一個(gè)topic下的所有關(guān)聯(lián)元素，其中每一個(gè)元素都包括callback及context兩部分。然后，遍歷元素，調(diào)用每一個(gè)關(guān)聯(lián)元素的callback，同時(shí)帶入元素的context和前面的額外參數(shù)args。如果任意一個(gè)關(guān)聯(lián)元素的回調(diào)函數(shù)返回false，則停止運(yùn)行其他的并返回false。
subscribe

訂閱，如這個(gè)詞自己的含義那樣（就像訂本雜志什么的），是建立topic和callback的關(guān)聯(lián)的步驟。比較特別的是，amplify在這里還加入了priority（優(yōu)先級(jí)）的概念，優(yōu)先級(jí)的值越小，優(yōu)先級(jí)越高，默認(rèn)是10。優(yōu)先級(jí)高的callback，將會(huì)在publish的時(shí)候，被先調(diào)用。這個(gè)順序的原理可以從前面的publish的源碼中看到，其實(shí)就是預(yù)先按照優(yōu)先級(jí)從高到低依次排列好了某一topic的所有關(guān)聯(lián)元素。

subscribe: function( topic, context, callback, priority ) {    if ( typeof topic !== "string" ) {      throw new Error( "You must provide a valid topic to create a subscription." );    }    // [1]    if ( arguments.length === 3 && typeof callback === "number" ) {      priority = callback;      callback = context;      context = null;    }    if ( arguments.length === 2 ) {      callback = context;      context = null;    }    priority = priority || 10;    // [2]    var topicIndex = 0,      topics = topic.split( //s/ ),      topicLength = topics.length,      added;    for ( ; topicIndex < topicLength; topicIndex++ ) {      topic = topics[ topicIndex ];      added = false;      if ( !subscriptions[ topic ] ) {        subscriptions[ topic ] = [];      }      // [3]      var i = subscriptions[ topic ].length - 1,        subscriptionInfo = {          callback: callback,          context: context,          priority: priority        };      // [4]      for ( ; i >= 0; i-- ) {        if ( subscriptions[ topic ][ i ].priority <= priority ) {          subscriptions[ topic ].splice( i + 1, 0, subscriptionInfo );          added = true;          break;        }      }      // [5]      if ( !added ) {        subscriptions[ topic ].unshift( subscriptionInfo );      }    }    return callback;  },

[1]，要理解這一部分，請(qǐng)看amplify提供的API示意：

amplify.subscribe( string topic, function callback )amplify.subscribe( string topic, object context, function callback )amplify.subscribe( string topic, function callback, number priority )amplify.subscribe(  string topic, object context, function callback, number priority )

可以看到，amplify允許多種參數(shù)形式，而當(dāng)參數(shù)數(shù)目和類型不同的時(shí)候，位于特定位置的參數(shù)可能會(huì)被當(dāng)做不同的內(nèi)容。這也在其他很多JavaScript庫(kù)中可以見(jiàn)到。像這樣，通過(guò)參數(shù)數(shù)目和類型的判斷，就可以做到這種多參數(shù)形式的設(shè)計(jì)。

[2]，訂閱的時(shí)候，topic是允許空格的，空白符將被當(dāng)做分隔符，認(rèn)為是將一個(gè)callback關(guān)聯(lián)到多個(gè)topic上，所以會(huì)使用一個(gè)循環(huán)。added用作標(biāo)識(shí)符，表明新加入的這個(gè)元素是否已經(jīng)添加到數(shù)組內(nèi)，初始為false。

[3]，每一個(gè)callback的保存，實(shí)際是一個(gè)對(duì)象，除callback外還帶上了context（默認(rèn)為null）和priority。

[4]，這個(gè)循環(huán)是在根據(jù)priority的值，找到關(guān)聯(lián)元素應(yīng)處的位置。任何topic的關(guān)聯(lián)元素都是從無(wú)到有，且依照priority數(shù)值從小到大排列（已排序的）。因此，在比較的時(shí)候，是先假設(shè)新加入的元素的priority數(shù)值較大（優(yōu)先級(jí)低），從數(shù)組尾端向前比較，只要原數(shù)組中有關(guān)聯(lián)元素的priority數(shù)值比新加入元素的小，循環(huán)就可以中斷，且可以確定地用數(shù)組的splice方法將新加入的元素添加在此。如果循環(huán)一直運(yùn)行到完畢，則可以確定新加入的元素的priority數(shù)值是最小的，此時(shí)added將保持為初始值false。

[5]，如果到這個(gè)位置，元素還沒(méi)有被添加，那么執(zhí)行添加，切可以確定元素應(yīng)該位于數(shù)組的最前面（或者是第一個(gè)元素）。
unsubscribe

雖然發(fā)布和訂閱是最主要的，但也會(huì)有需要退訂的時(shí)候（雜志不想看了果斷退！）。所以，還會(huì)需要一個(gè)unsubscribe。

unsubscribe: function( topic, context, callback ) {  if ( typeof topic !== "string" ) {    throw new Error( "You must provide a valid topic to remove a subscription." );  }  if ( arguments.length === 2 ) {    callback = context;    context = null;  }  if ( !subscriptions[ topic ] ) {    return;  }  var length = subscriptions[ topic ].length,    i = 0;  for ( ; i < length; i++ ) {    if ( subscriptions[ topic ][ i ].callback === callback ) {      if ( !context || subscriptions[ topic ][ i ].context === context ) {        subscriptions[ topic ].splice( i, 1 );                // Adjust counter and length for removed item        i--;        length--;      }    }  }}

讀過(guò)前面的源碼后，這部分看起來(lái)就很容易理解了。根據(jù)指定的topic遍歷關(guān)聯(lián)元素，找到callback一致的，然后刪除它。由于使用的是splice方法，會(huì)直接修改原始數(shù)組，因此需要手工對(duì)i和length再做一次調(diào)整。
Amplify使用示例

官方提供的其中一個(gè)使用示例是：

amplify.subscribe( "dataexample", function( data ) {  alert( data.foo ); // bar});//...amplify.publish( "dataexample", { foo: "bar" } );

結(jié)合前面的源碼部分，是否對(duì)發(fā)布/訂閱這一設(shè)計(jì)模式有了更明確的體會(huì)呢？
補(bǔ)充說(shuō)明

你可能也注意到了，AmplifyJS所實(shí)現(xiàn)的典型的發(fā)布/訂閱是同步的（synchronous）。也就是說(shuō)，在運(yùn)行amplify.publish(topic)的時(shí)候，是會(huì)沒(méi)有任何延遲地把某一個(gè)topic附帶的所有回調(diào)，全部都運(yùn)行一遍。
結(jié)語(yǔ)

Pub/Sub是一個(gè)比較容易理解的設(shè)計(jì)模式，但非常有用，可以應(yīng)對(duì)大型應(yīng)用的復(fù)雜邏輯。本文簡(jiǎn)析的AmplifyJS是我覺(jué)得寫(xiě)得比較有章法而且簡(jiǎn)明切題（針對(duì)單一功能）的JavaScript庫(kù)，所以在此分享給大家。