策略模式

概念

• 不同策略分開處理
• 避免出現(xiàn)大量 if...else 或者 switch...case

演示

未使用策略模式的時候代碼是這個樣子的

class User {
    constructor (type) {
        this.type = type;
    }
    buy() {
        if(this.type === "ordinary") {
            console.log("普通用戶購買");
        } else if(this.type === "member") {
            console.log("會員用戶購買");
        }else if(this.type === "VIP") {
            console.log("VIP用戶購買");
        }
    }
}
// 測試代碼
let u1 = new User('ordinary')
u1.buy()
let u2 = new User('member')
u1.buy()
let u3 = new User('VIP')
u1.buy()

使用策略模式的代碼

class OridnaryUser {
    buy() {
        console.log("普通用戶購買")
    }
}
class MemberUser {
    buy() {
        console.log("會員用戶購買")
    }
}
class VipUser {
    buy() {
        console.log("VIP用戶購買")
    }
}
let u1 = new OridnaryUser();
let u2 = new MemberUser();
let u3 = new VipUser();

設計原則驗證

• 不同策略，分開處理，而不是混合在一起
• 符合開放封閉原則

模板方法模式

什么是模板方法？

一個方法代碼太多，我們可以拆分開來，或者組合其他的方法一起執(zhí)行
可以通過一個方法，對自己內(nèi)部的一些相關(guān)順序執(zhí)行方法進行一個合并，對外輸出一個統(tǒng)一的方法。
簡單用代碼演示

class Action {
    handle() {
        handle1();
        handle2();
        handle3();
    }
    handle1() {
        console.log(1)
    }
    handle2() {
        console.log(2)
    }
    handle3() {
        console.log(3)
    }
}

職責鏈模式

概念

• 異步操作可能分為多個職責角色來完成
• 把這些角色都分開，然后用一個鏈串起來
• 將發(fā)起者和各個處理者進行隔離

代碼演示

比如你需要請假，需要各個審批，一級一級的審批，代碼如下

class Action {
    constructor(name) {
        this.name = name;
        this.nextAction = null;
    }
    setNextAction(action) {
        this.nextAction = action;
    }
    handle() {
        console.log(`${this.name} 審批`)
        if(this.nextAction !== null){
            this.nextAction.handle();
        }
    }
}
// 測試
let a1 = new Action("組長");
let a2 = new Action("經(jīng)理");
let a3 = new Action("總監(jiān)");
a1.setNextAction(a2);
a2.setNextAction(a3);
a1.handle();

運行結(jié)果

運行結(jié)果.png

JS中的鏈式操作

• 職責鏈模式和業(yè)務結(jié)合較多，JS中能夠聯(lián)想到鏈式操作
• Jquery的鏈式操作， Promise.then的鏈式操作

設計原則驗證

• 發(fā)起者于各個處理者進行隔離
• 符合開放封閉原則

本文資料來自慕課網(wǎng)-雙越老師-Javascript 設計模式系統(tǒng)講解與應用視頻課程