javascript常見設計模式

設計模式：軟件設計過程當中針對特定問題的簡潔而優雅的解決方案

---

1.單例模式

單例模式的定義：保證一個類僅有一個實例，並提供一個訪問它的全局訪問點。實現的方法爲先判斷實例存在與否，若是存在則直接返回，若是不存在就建立了再返回，這就確保了一個類只有一個實例對象。
適用場景：實現一個單一對象，好比彈窗，不管被建立多少次，只應該有一個實例對象。

class Modal {
    constructor(title, content) {
        this.title = title;
        this.content = content;
    }
}

const getModal = (function () {
    let instance = null;
    return function () {
        if (!instance) {
            instance = new Modal('標題', '文本內容');
        }
        return instance;
    }
})();

let a = getModal();
let b = getModal();

console.log(a === b); // true

---

2. 策略模式

策略模式的目的就是將算法的使用算法的實現分離開來。
策略模式至少由兩部分組成：
1.策略類：策略類封裝了具體的算法，並負責具體的計算過程，是可變的；
2.環境類：環境類接受客戶的請求，隨後將請求委託給某一個策略類，不可變；

/*策略類*/
var levelOBJ = {
    "A": function(money) {
        return money * 4;
    },
    "B" : function(money) {
        return money * 3;
    },
    "C" : function(money) {
        return money * 2;
    } 
};
/*環境類*/
var calculateBouns =function(level,money) {
    return levelOBJ[level](money);
};
console.log(calculateBouns('A',10000)); // 40000

---

3. 代理模式

代理模式的定義：爲一個對象提供一個代用品或佔位符，以便控制對它的訪問。
圖片懶加載就是一種典型有用場景：

function LazyImg() {}
LazyImg.prototype.getImg = function () {
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    imgNode.src = './fake.png';
    return imgNode;
}
LazyImg.prototype.setImg = function (src) {
    var imgNode = this.getImg();
    var img = new Image();
    img.onload = function() {
        imgNode.src = this.src;
    }
    img.src = src;
}

var pic = new LazyImg();

cx.setImg('./rel.png');

---

4. 中介者模式

中介者模式的定義：經過一箇中介者對象，其餘全部的相關對象都經過該中介者對象來通訊，而不是相互引用，當其中的一個對象發生改變時，只須要通知中介者對象便可。經過中介者模式能夠解除對象與對象之間的緊耦合關係。
現實生活中，航線上的飛機只須要和機場的塔臺通訊就能肯定航線和飛行狀態，而不須要和全部飛機通訊。同時塔臺做爲中介者，知道每架飛機的飛行狀態，因此能夠安排全部飛機的起降和航線安排。

---

5.裝飾者模式

裝飾者模式的定義：在不改變對象自身的基礎上，在程序運行期間給對象動態地添加方法。