溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何使用javascript中的職責鏈模式，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
介紹：很多情況下，在一個軟件系統中可以處理某個請求的對象不止一個。例如一個網絡請求過來，需要有對象去解析request Body，需要有對象去解析請求頭，還需要有對象去對執行對應controller。請求一層層傳遞，讓每一個對象都基于請求完成自己的任務，然后將請求傳遞給下一個處理程序。是不是感覺有點中間件的感覺。
定義：職責鏈就是避免請求發送者與接收者耦合在一起，讓多個對象都有可能接收請求。將這些對象連成一條鏈，并沿著鏈傳遞請求，直到有對象處理它為止。職責鏈模式是一種對象行為型模式。
場景：我們繼續畫圓，我們準備了兩組示例：
示例：
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以上 ）觀察上面的代碼，這是很常見的邏輯，通過參數來決定執行哪個方法。首先drawByRadius方法職責過重，其次這樣的方式在修改，新增時需要修改源代碼，不符合開關原則。
我們使用職責鏈模式重寫下：
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('執行：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('執行：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('執行：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)
// 執行：drawSmalCircle
// 執行：drawMediumCircle
// 執行：drawBigCircle
// 畫一個大圓 （ 20以上
circle.draw(15)
// 執行：drawSmalCircle
// 執行：drawMediumCircle
// 畫一個中圓 （ 10-20 ）
// 執行：drawBigCircle
circle.draw(5)
// 執行：drawSmalCircle
// 畫一個小圓（ 10以下 ）
// 執行：drawMediumCircle
// 執行：drawBigCircle以上就是職責鏈模式的實例代碼，drawSmalCircle，drawMediumCircle，drawBigCircle稱為處理者類，處理者類保存了下一級對象的引用，
當我每執行一次draw時，程序會挨個執行職責鏈上的每一個方法。
職責鏈模式分為純職責鏈和不純職責鏈，純的職責鏈在處理請求時，只能選擇全部處理不傳遞或者全部傳遞不處理。我們這里的例子就是不純職責鏈。它允許處理完成后繼續向后傳遞。
職責鏈模式總結：
優點：
* 降低耦合，互相都不清楚執行順序以及執行處理的類。
* 請求對象僅需維持一個指向其后繼者的引用，簡化了對象的相互連接。
* 新增修改職責鏈結構方便，滿足開關原則。
缺點：
* 由于沒有明確接受者，可能職責鏈走到最后都沒有被正確處理。
* 職責鏈較長時會導致系統性能受影響。
* 建鏈不當，會造成循環調用，導致系統陷入死循環。
適用場景：
* 多個對象處理同一請求
* 動態創建執行順序，流程
看完上述內容，是不是對如何使用javascript中的職責鏈模式有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
