快捷導(dǎo)航

JS設(shè)計(jì)模式之責(zé)任鏈模式應(yīng)用詳解

更新時(shí)間：2023年08月27日 09:37:53 作者：慕仲卿

JS責(zé)任鏈模式是一種行為型設(shè)計(jì)模式,它允許多個對象按照順序處理請求,直到其中一個對象能夠處理請求為止,這樣的對象鏈被稱為責(zé)任鏈,本文將給大家詳細(xì)講講責(zé)任鏈模式在JS中的應(yīng)用,需要的朋友可以參考下

責(zé)任鏈模式（Chain of Responsibility Pattern）

定義：

一種行為型設(shè)計(jì)模式，它允許多個對象按照順序處理請求，直到其中一個對象能夠處理請求為止。這樣的對象鏈被稱為責(zé)任鏈。

特點(diǎn)：

在責(zé)任鏈模式中，每個處理請求的對象都有一個對下一個對象的引用，形成一個鏈條。
當(dāng)客戶端發(fā)送請求時(shí)，請求會沿著鏈條傳遞，直到被某個處理器對象處理或者整個鏈條結(jié)束。

參與者：

抽象處理器（Abstract Handler）：定義了處理請求的接口和維護(hù)下一個處理器的引用。通常實(shí)現(xiàn)為抽象類或接口。
具體處理器（Concrete Handler）：具體實(shí)現(xiàn)了處理請求的方法。如果可以處理請求，則進(jìn)行處理；否則將請求傳遞給下一個處理器。

工作流程：

客戶端創(chuàng)建并初始化責(zé)任鏈中的處理器對象，并設(shè)置好它們的處理順序。
當(dāng)客戶端發(fā)送請求時(shí)，請求從鏈條的開頭開始傳遞。
每個處理器檢查自己是否能夠處理請求，如果可以，則進(jìn)行處理并停止傳遞；否則將請求傳遞給下一個處理器。（這個過程必然會用到if else）
這個過程持續(xù)進(jìn)行，直到請求被處理或者整個鏈條結(jié)束。

優(yōu)點(diǎn)：

解耦發(fā)送者和接收者，使得請求的發(fā)送者不需要知道哪個對象會處理請求。
可以動態(tài)地添加或修改處理器對象，從而避免將請求的處理邏輯硬編碼到單個對象中，增加了代碼的可維護(hù)性和可擴(kuò)展性。

缺點(diǎn)：

整個鏈條的長度可能會對性能產(chǎn)生影響，特別是在鏈條非常長時(shí)。

使用場景：

處理者是動態(tài)的或者是不能預(yù)先確定的：有多個對象可以處理請求，但具體的處理者只在運(yùn)行時(shí)確定
希望將請求的發(fā)送者和接收者解耦，讓請求可以自由地在對象之間傳遞。

示例：

// 抽象處理器
class Handler {
? nextHandler: Handler|null = null;
? setNext(handler: Handler) {
? ? this.nextHandler = handler;
? }
? abstract handleRequest(request: number): void;
}
// 具體處理器1
class ConcreteHandler1 extends Handler {
? handleRequest(request: number) {
? ? request <= 10 ? console.log(`Request ${request} handled by ConcreteHandler1`) : this.nextHandler?.handleRequest(request);
? }
}
// 具體處理器2
class ConcreteHandler2 extends Handler {
? handleRequest(request: number) {
? ? request > 10 && request <= 20 ? console.log(`Request ${request} handled by ConcreteHandler2`) : this.nextHandler?.handleRequest(request);
? }
}
// 具體處理器3
class ConcreteHandler3 extends Handler {
? handleRequest(request) {
? ? request > 20 && request <= 80 ? console.log(`Request ${request} handled by ConcreteHandler3`) : this.nextHandler?.handleRequest(request);
? }
}
// 異常處理器
class ConcreteHandlerX extends Handler {
? handleRequest(request) {
? ? throw new Error(`Request ${request} can not be handled by ConcreteHandler chain`);
? }
}
// 創(chuàng)建處理對象
const handler1 = new ConcreteHandler1();
const handler2 = new ConcreteHandler2();
const handler3 = new ConcreteHandler3();
const errorhandler = new ConcreteHandlerX();
// 處理對象成鏈
handler1.setNext(handler2);
handler2.setNext(handler3);
handler3.setNext(errorhandler);
// 客戶端發(fā)送請求
handler1.handleRequest(5); ? // 輸出: Request 5 handled by ConcreteHandler1
handler2.handleRequest(15); ?// 輸出: Request 15 handled by ConcreteHandler2
handler3.handleRequest(25); ?// 輸出: Request 25 handled by ConcreteHandler3
handler1.handleRequest(90); ?// 直接報(bào)錯

原生實(shí)現(xiàn)：

事件處理機(jī)制：在瀏覽器中，事件處理機(jī)制就是一個典型的責(zé)任鏈模式的應(yīng)用。當(dāng)事件發(fā)生時(shí)，它會從目標(biāo)元素開始沿著 DOM 樹向上傳播，每個元素都有機(jī)會處理該事件。如果某個元素?zé)o法處理事件，它會將事件傳遞給它的父級元素，直到找到能夠處理事件的元素或者事件冒泡至根元素。
中間件（Middleware）模式：在 Web 開發(fā)中，中間件模式也是一種常見的責(zé)任鏈模式的應(yīng)用。例如，Express.js 框架中的中間件允許你按照順序添加不同的中間件函數(shù)來處理 HTTP 請求。請求將依次經(jīng)過這些中間件函數(shù)，每個中間件函數(shù)都有可能對請求進(jìn)行處理、修改或者將請求傳遞給下一個中間件函數(shù)。
JavaScript Promise：Promise 是 JavaScript 中用于處理異步操作的一種機(jī)制。當(dāng)使用 Promise 鏈?zhǔn)秸{(diào)用時(shí)，每個 Promise 對象都有一個 then() 方法，可以將回調(diào)函數(shù)添加到鏈條中。當(dāng)前一個 Promise 對象執(zhí)行完成后，它會自動將結(jié)果傳遞給下一個 Promise 對象，形成一個責(zé)任鏈?zhǔn)降奶幚怼?/p>
jQuery Ajax：在 jQuery 的 Ajax 功能中，可以使用 $.ajax() 方法發(fā)送異步請求，并通過 .done()、.fail()、.always() 等方法添加相應(yīng)的回調(diào)函數(shù)。這些回調(diào)函數(shù)可以按照順序連接起來，形成一個責(zé)任鏈，每個回調(diào)函數(shù)都有機(jī)會處理請求的結(jié)果。