職責(zé)鏈模式（Chain of responsibility），就是使多個(gè)對(duì)象都有機(jī)會(huì)處理請(qǐng)求，從而避免請(qǐng)求的發(fā)送者和接受者之間的耦合關(guān)系。將這個(gè)對(duì)象連成一條鏈，并沿著這條鏈傳遞該請(qǐng)求，直到有一個(gè)對(duì)象處理他為止。

貌似和數(shù)據(jù)結(jié)構(gòu)中的鏈表一樣。

但，不要搞混了，職責(zé)鏈可不等于鏈表哦，因?yàn)槁氊?zé)鏈可以在任何一個(gè)節(jié)點(diǎn)開(kāi)始往下查找，而鏈表，則必須從頭結(jié)點(diǎn)開(kāi)始往下查找。

比如，DOM事件機(jī)制中的冒泡事件就屬于職責(zé)鏈，而捕獲事件則屬于鏈表。

二、利用職責(zé)鏈模擬冒泡

假設(shè)我們有三個(gè)對(duì)象：li、ul、div，三者關(guān)系圖如下：

比如，當(dāng)我們觸發(fā)li對(duì)象時(shí)，如果li沒(méi)有阻止冒泡，那么將會(huì)傳遞給ul對(duì)象，到了ul，如果沒(méi)有阻止冒泡，則會(huì)傳遞給div對(duì)象（假設(shè)這里div為根節(jié)點(diǎn)）。同理，ul、div。

看到這兒，很清楚適合用職責(zé)鏈模式，編寫(xiě)這樣的需求。

但，怎么使用JavaScript實(shí)現(xiàn)職責(zé)鏈模式呢？

如下，我們可以通過(guò)原型鏈的方式構(gòu)建基本架構(gòu)：

function CreateDOM(obj){
  this.next = obj || null;
};  
CreateDOM.prototype = {
  handle: function(){
    if(this.next){
      this.next.handle();
    }
  }
};

每當(dāng)我們利用CreateDOM構(gòu)造函數(shù)，創(chuàng)建一個(gè)對(duì)象時(shí)，就將與之關(guān)聯(lián)的對(duì)象傳遞進(jìn)去（嗯，這樣很鏈表）。

然后，當(dāng)我們觸發(fā)某個(gè)對(duì)象，執(zhí)行handle方法時(shí)，就可以沿著這條鏈，走下去了。

但，需注意，當(dāng)某個(gè)對(duì)象的handle屬性覆蓋了原型鏈中的handle時(shí)，怎么繼續(xù)往下傳呢？

利用CreateDOM.prototype.handle.call(this);就好了。

So，實(shí)現(xiàn)li、ul和div代碼如下：

var li = null, 
  ul = null, 
  div = null;
div = new CreateDOM();
div.handle = function(stopBubble){
  console.log('DIV');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  }
};
ul = new CreateDOM(div);
ul.handle = function(stopBubble){
  console.log('UL');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  }
};
li = new CreateDOM(ul);
li.handle = function(stopBubble){
  console.log('LI');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  }
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: