最常用的js設計模式總結

策略模式

要解決if扎堆最好的辦法是什麼？答：策略模式

核心

將算法的使用和算法的實現分離開來。
一個基於策略模式的程序至少由兩部分組成：
第一個部分是一組策略類（可理解爲構建一個json對象），策略類封裝了具體的算法，並負責具體的計算過程。
第二個部分是環境類Context，Context接受客戶的請求，隨後把請求委託給某一個策略類。=需要使用這個對象。

// 加權映射關係（策略類）
var levelMap = {
    S: 10,
    A: 8,
    B: 6,
    C: 4
};

// 組策略
var scoreLevel = {
    basicScore: 80,

    S: function() {
        return this.basicScore + levelMap['S']; 
    },

    A: function() {
        return this.basicScore + levelMap['A']; 
    },

    B: function() {
        return this.basicScore + levelMap['B']; 
    },

    C: function() {
        return this.basicScore + levelMap['C']; 
    }
}

// 調用
function getScore(level) {
    return scoreLevel[level] ? scoreLevel[level]() : 0;
}

console.log(
    getScore('S'),
    getScore('A'),
    getScore('B'),
    getScore('C'),
    getScore('D')
); // 90 88 86 84 0

代理模式

核心

代理模式主要有三種：保護代理、虛擬代理、緩存代理
保護代理主要實現了訪問主體的限制行爲。
在主體函數外面套了一個限制函數，常見於過濾，防抖，多業務調用某一方法處理參數時。

// 主體，發送消息
function sendMsg(msg) {
    console.log(msg);
}

// 代理，對消息進行過濾
function proxySendMsg(msg) {
    // 無消息則直接返回
    if (typeof msg === 'undefined') {
        console.log('deny');
        return;
    }
    
    // 有消息則進行過濾
    msg = ('' + msg).replace(/泥\s*煤/g, '');

    sendMsg(msg);
}


sendMsg('泥煤呀泥 煤呀'); // 泥煤呀泥 煤呀
proxySendMsg('泥煤呀泥 煤'); // 呀
proxySendMsg(); // deny

發佈-訂閱模式

這個模式實際寫業務代碼很難用上，常見於框架設計之中。例如vue的事件監聽watcher更新dom便是使用該模式。

核心

定義了對象間的一種一對多的依賴關係，當一個對象的狀態發 生改變時，所有依賴於它的對象都將得到通知