本文實例講述了javascript設(shè)計模式 ? 職責(zé)鏈模式原理與用法。分享給大家供大家參考，具體如下：

介紹：很多情況下，在一個軟件系統(tǒng)中可以處理某個請求的對象不止一個。例如一個網(wǎng)絡(luò)請求過來，需要有對象去解析request Body，需要有對象去解析請求頭，還需要有對象去對執(zhí)行對應(yīng)controller。請求一層層傳遞，讓每一個對象都基于請求完成自己的任務(wù)，然后將請求傳遞給下一個處理程序。是不是感覺有點中間件的感覺。

定義：職責(zé)鏈就是避免請求發(fā)送者與接收者耦合在一起，讓多個對象都有可能接收請求。將這些對象連成一條鏈，并沿著鏈傳遞請求，直到有對象處理它為止。職責(zé)鏈模式是一種對象行為型模式。

場景：我們繼續(xù)畫圓，我們準(zhǔn)備了兩組示例：

示例：

var Circle = function(){ this.radius = 0; this.drawByRadius = function(radius){ if(radius < 5){ this.drawVerySmalCircle(); }else if(radius < 10){ this.drawSmalCircle(); }else if(radius < 15){ this.drawMediumCircle(); }else if(radius < 20){ this.drawBigCircle(); }else{ this.drawVeryBigCircle(); } } this.drawVerySmalCircle = function(){ console.log(’畫一個超小的圓（ 5以下 ）’); } this.drawSmalCircle = function(){ console.log(’畫一個小圓（ 5-10 ）’); } this.drawMediumCircle = function(){ console.log(’畫一個中圓 （ 10-15 ）’); } this.drawBigCircle = function(){ console.log(’畫一個大圓 （ 15-20 ）’); } this.drawVeryBigCircle = function(){ console.log(’畫一個超大的圓 （ 20以上 ）’); }} var circle = new Circle();circle.drawByRadius(30);//畫一個超大的圓 （ 20以上 ）

觀察上面的代碼，這是很常見的邏輯，通過參數(shù)來決定執(zhí)行哪個方法。首先drawByRadius方法職責(zé)過重，其次這樣的方式在修改，新增時需要修改源代碼，不符合開關(guān)原則。

我們使用職責(zé)鏈模式重寫下：

var drawSmalCircle = function(min,max){ this.max = max; this.min = min; this.nextCircle; this.setNextDraw = function(circle){ this.nextCircle = circle; } this.draw = function(radius){ console.log(’執(zhí)行：drawSmalCircle’); if(this.min < radius && radius < this.max){ console.log(’畫一個小圓（ 10以下 ）’); } if(this.nextCircle){ this.nextCircle.draw(radius) } }} var drawMediumCircle = function(min,max){ this.max = max; this.min = min; this.nextCircle; this.setNextDraw = function(circle){ this.nextCircle = circle; } this.draw = function(radius){ console.log(’執(zhí)行：drawMediumCircle’); if(this.min < radius && radius < this.max){ console.log(’畫一個中圓 （ 10-20 ）’); } if(this.nextCircle){ this.nextCircle.draw(radius) } }} var drawBigCircle = function(min,max){ this.max = max; this.min = min; this.nextCircle; this.setNextDraw = function(circle){ this.nextCircle = circle; } this.draw = function(radius){ console.log(’執(zhí)行：drawBigCircle’); if(this.min < radius && radius < this.max){ console.log(’畫一個大圓 （ 20以上 ）’); } if(this.nextCircle){ this.nextCircle.draw(radius) } }} function initChain(){ var smalCircle = new drawSmalCircle(0,10); var mediumCircle = new drawMediumCircle(10,20); var bigCircle = new drawBigCircle(20,100); smalCircle.setNextDraw(mediumCircle); mediumCircle.setNextDraw(bigCircle); return smalCircle;} var circle = initChain();circle.draw(30)// 執(zhí)行：drawSmalCircle// 執(zhí)行：drawMediumCircle// 執(zhí)行：drawBigCircle// 畫一個大圓 （ 20以上 circle.draw(15)// 執(zhí)行：drawSmalCircle// 執(zhí)行：drawMediumCircle// 畫一個中圓 （ 10-20 ）// 執(zhí)行：drawBigCirclecircle.draw(5)// 執(zhí)行：drawSmalCircle// 畫一個小圓（ 10以下 ）// 執(zhí)行：drawMediumCircle// 執(zhí)行：drawBigCircle

以上就是職責(zé)鏈模式的實例代碼，drawSmalCircle，drawMediumCircle，drawBigCircle稱為處理者類，處理者類保存了下一級對象的引用，

當(dāng)我每執(zhí)行一次draw時，程序會挨個執(zhí)行職責(zé)鏈上的每一個方法。

職責(zé)鏈模式分為純職責(zé)鏈和不純職責(zé)鏈，純的職責(zé)鏈在處理請求時，只能選擇全部處理不傳遞或者全部傳遞不處理。我們這里的例子就是不純職責(zé)鏈。它允許處理完成后繼續(xù)向后傳遞。

職責(zé)鏈模式總結(jié)：

優(yōu)點：* 降低耦合，互相都不清楚執(zhí)行順序以及執(zhí)行處理的類。* 請求對象僅需維持一個指向其后繼者的引用，簡化了對象的相互連接。* 新增修改職責(zé)鏈結(jié)構(gòu)方便，滿足開關(guān)原則。

缺點：* 由于沒有明確接受者，可能職責(zé)鏈走到最后都沒有被正確處理。* 職責(zé)鏈較長時會導(dǎo)致系統(tǒng)性能受影響。* 建鏈不當(dāng)，會造成循環(huán)調(diào)用，導(dǎo)致系統(tǒng)陷入死循環(huán)。

適用場景：* 多個對象處理同一請求* 動態(tài)創(chuàng)建執(zhí)行順序，流程

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。