一、概述
職責鏈模式(Chain of responsibility),就是使多個對象都有機會處理請求,從而避免請求的發(fā)送者和接受者之間的耦合關(guān)系。將這個對象連成一條鏈,并沿著這條鏈傳遞該請求,直到有一個對象處理他為止。
貌似和數(shù)據(jù)結(jié)構(gòu)中的鏈表一樣。
但,不要搞混了,職責鏈可不等于鏈表哦,因為職責鏈可以在任何一個節(jié)點開始往下查找,而鏈表,則必須從頭結(jié)點開始往下查找。
比如,DOM事件機制中的冒泡事件就屬于職責鏈,而捕獲事件則屬于鏈表。
二、利用職責鏈模擬冒泡
假設(shè)我們有三個對象:li、ul、div,三者關(guān)系圖如下:

比如,當我們觸發(fā)li對象時,如果li沒有阻止冒泡,那么將會傳遞給ul對象,到了ul,如果沒有阻止冒泡,則會傳遞給div對象(假設(shè)這里div為根節(jié)點)。同理,ul、div。
看到這兒,很清楚適合用職責鏈模式,編寫這樣的需求。
但,怎么使用JavaScript實現(xiàn)職責鏈模式呢?
如下,我們可以通過原型鏈的方式構(gòu)建基本架構(gòu):
function CreateDOM(obj){ this.next = obj || null;}; CreateDOM.prototype = { handle: function(){ if(this.next){ this.next.handle(); } }};每當我們利用CreateDOM構(gòu)造函數(shù),創(chuàng)建一個對象時,就將與之關(guān)聯(lián)的對象傳遞進去(嗯,這樣很鏈表)。
然后,當我們觸發(fā)某個對象,執(zhí)行handle方法時,就可以沿著這條鏈,走下去了。
但,需注意,當某個對象的handle屬性覆蓋了原型鏈中的handle時,怎么繼續(xù)往下傳呢?
利用CreateDOM.prototype.handle.call(this);就好了。
So,實現(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); }};以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答