javascript常見(jiàn)設(shè)計(jì)模式

crelaber 發(fā)布于2019-08-26 10:14 / 2504人閱讀

摘要：設(shè)計(jì)模式軟件設(shè)計(jì)過(guò)程中針對(duì)特定問(wèn)題的簡(jiǎn)潔而優(yōu)雅的解決方案單例模式單例模式的定義保證一個(gè)類僅有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。通過(guò)中介者模式可以解除對(duì)象與對(duì)象之間的緊耦合關(guān)系。

設(shè)計(jì)模式：軟件設(shè)計(jì)過(guò)程中針對(duì)特定問(wèn)題的簡(jiǎn)潔而優(yōu)雅的解決方案

1.單例模式

單例模式的定義：保證一個(gè)類僅有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。實(shí)現(xiàn)的方法為先判斷實(shí)例存在與否，如果存在則直接返回，如果不存在就創(chuàng)建了再返回，這就確保了一個(gè)類只有一個(gè)實(shí)例對(duì)象。
適用場(chǎng)景：實(shí)現(xiàn)一個(gè)單一對(duì)象，比如彈窗，無(wú)論被創(chuàng)建多少次，只應(yīng)該有一個(gè)實(shí)例對(duì)象。

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

const getModal = (function () {
    let instance = null;
    return function () {
        if (!instance) {
            instance = new Modal("標(biāo)題", "文本內(nèi)容");
        }
        return instance;
    }
})();

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

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

2. 策略模式

策略模式的目的就是將算法的使用算法的實(shí)現(xiàn)分離開(kāi)來(lái)。
策略模式至少由兩部分組成：
1.策略類：策略類封裝了具體的算法，并負(fù)責(zé)具體的計(jì)算過(guò)程，是可變的；
2.環(huán)境類：環(huán)境類接受客戶的請(qǐng)求，隨后將請(qǐng)求委托給某一個(gè)策略類，不可變；

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

3. 代理模式

代理模式的定義：為一個(gè)對(duì)象提供一個(gè)代用品或占位符，以便控制對(duì)它的訪問(wèn)。
圖片懶加載就是一種典型有用場(chǎng)景：

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. 中介者模式

中介者模式的定義：通過(guò)一個(gè)中介者對(duì)象，其他所有的相關(guān)對(duì)象都通過(guò)該中介者對(duì)象來(lái)通信，而不是相互引用，當(dāng)其中的一個(gè)對(duì)象發(fā)生改變時(shí)，只需要通知中介者對(duì)象即可。通過(guò)中介者模式可以解除對(duì)象與對(duì)象之間的緊耦合關(guān)系。
現(xiàn)實(shí)生活中，航線上的飛機(jī)只需要和機(jī)場(chǎng)的塔臺(tái)通信就能確定航線和飛行狀態(tài)，而不需要和所有飛機(jī)通信。同時(shí)塔臺(tái)作為中介者，知道每架飛機(jī)的飛行狀態(tài)，所以可以安排所有飛機(jī)的起降和航線安排。

5.裝飾者模式

裝飾者模式的定義：在不改變對(duì)象自身的基礎(chǔ)上，在程序運(yùn)行期間給對(duì)象動(dòng)態(tài)地添加方法。