摘要：命令模式的由來(lái)，其實(shí)是回調(diào)函數(shù)的一個(gè)面向?qū)ο蟮奶娲?，命令模式早已融入到了語(yǔ)言之中。

模式是對(duì)某情景下，針對(duì)某種問(wèn)題的某種解決方案。而一個(gè)設(shè)計(jì)模式是用來(lái)解決一個(gè)經(jīng)常出現(xiàn)的設(shè)計(jì)問(wèn)題的經(jīng)驗(yàn)方法。這么說(shuō)來(lái)，每個(gè)模式都可能有著自己的意圖，應(yīng)用場(chǎng)景，使用方法和使用后果。本文的行文思路和目的皆在于了解各個(gè)模式的定義，應(yīng)用場(chǎng)景和用實(shí)例說(shuō)明如何在前端開(kāi)發(fā)中使用。
本文所設(shè)計(jì)到的概念和實(shí)例大多來(lái)自《Head First設(shè)計(jì)模式》和《JavaScript設(shè)計(jì)模式和開(kāi)發(fā)實(shí)踐》二書，前者以生動(dòng)形象的例子和簡(jiǎn)明幽默的句子闡述了何為設(shè)計(jì)模式，鑒于JavaScript語(yǔ)言的特殊性，后者以實(shí)例說(shuō)明了在JavaScript中如何應(yīng)用設(shè)計(jì)模式，兩本都是我讀后收獲非常大的書。
關(guān)于模式的分類，是為了建立起模式之間的關(guān)系。本文采用最廣為人知的分類：創(chuàng)建型、行為型、結(jié)構(gòu)型來(lái)敘述。本文只涉及到部分模式，在之后的學(xué)習(xí)過(guò)程中，本人還好不斷修改和補(bǔ)充。
“模式只是指導(dǎo)方針，實(shí)際工作中，可以改變模式來(lái)適應(yīng)實(shí)際問(wèn)題。”

將對(duì)象實(shí)例化，這類模式都提供一個(gè)方法，將客戶從所需要的實(shí)例化的對(duì)象中解耦。

策略模式定義了算法組，分別封裝起來(lái)，讓他們之間可以互相替換，此模式讓算法的變化獨(dú)立于使用算法的客戶。

要達(dá)到某一個(gè)目的，根據(jù)具體的實(shí)際情況，選擇合適的方法。適合于實(shí)現(xiàn)某一個(gè)功能有多種方案可以選擇的情景。

策略類的組成：

一組策略類，策略類封裝了具體的算法，并負(fù)責(zé)具體的計(jì)算過(guò)程；

環(huán)境類：負(fù)責(zé)接收客戶的請(qǐng)求，并把請(qǐng)求委托給某一個(gè)策略類；

一個(gè)按不同等級(jí)計(jì)算年終獎(jiǎng)的例子

// 策略組
var strategies = {
    "S": function(salary){
        return salary * 4;
    },
    "A": function(salary){
        return salary * 3;
    },
    "B":function(salary){
        return salary * 2
    }
};

// 內(nèi)容組
var calculateBonus = function(level,salary){
    return strategies[level](salary);
}

// 執(zhí)行
console.log(calculateBonus("S",20000)); // 輸出：80000
console.log(calculateBonus("A",10000)); // 輸出：30000

單件模式確保一個(gè)類只有一個(gè)實(shí)例，并提供一個(gè)全局訪問(wèn)點(diǎn)。

用于創(chuàng)建獨(dú)一無(wú)二的，只能有一個(gè)實(shí)例的對(duì)象，單件模式給了我們一個(gè)全局的訪問(wèn)點(diǎn)，和全局變量一樣方便又沒(méi)有全局變量的缺點(diǎn)。

沒(méi)有公開(kāi)的構(gòu)造器，利用延遲實(shí)例化的方式來(lái)創(chuàng)建單件，這種做法對(duì)資源敏感的對(duì)象特別重要。

傳統(tǒng)語(yǔ)言的實(shí)現(xiàn)：

而對(duì)JavaScript而言，并無(wú)類的概念，因此要實(shí)現(xiàn)它的核心，確保只有一個(gè)實(shí)例并提供全局訪問(wèn)。但是把全局變量當(dāng)成單例來(lái)使用容易造成命名污染。

防止命名空間污染的方法：

使用命名空間

使用閉包封裝私有變量

JavaScript惰性單例
惰性單例指的是在需要的時(shí)候才創(chuàng)建對(duì)象單例。

代碼示例：

// 單例模式
var getSingle = function(fn){
    var result;
    return function(){
        return result || (result = fn.apply(this,arguments))
    }
};

var createLoginLayer = function(){
    var div = document.createElement("div");
    div.innerHTML = "我是登陸窗";
    div.style.display = "none";
    document.body.appendChild(div);
}

var createSingleLoginLayer = getSingle(createLoginLayer);

工廠方法模式定義了一個(gè)創(chuàng)建對(duì)象的接口，但由子類決定要實(shí)例化的類是哪一個(gè)，工廠方法讓類把實(shí)例化推遲到子類。

創(chuàng)建新對(duì)象，且該對(duì)象需要被被封裝。

工廠模式通過(guò)讓子類來(lái)決定該創(chuàng)建的對(duì)象是什么，來(lái)達(dá)到將對(duì)象創(chuàng)建的過(guò)程封裝的目的。

創(chuàng)建對(duì)象的方法使用的是繼承，用于創(chuàng)建一個(gè)產(chǎn)品的實(shí)例；

提供一個(gè)借口，用于創(chuàng)建相關(guān)或依賴對(duì)象的家族，而不需要明確指定具體類。

定義一個(gè)負(fù)責(zé)創(chuàng)建一組產(chǎn)品的接口，這個(gè)接口內(nèi)的每一個(gè)方法都負(fù)責(zé)創(chuàng)建一個(gè)具體產(chǎn)品。抽象工廠的方法通常以工廠方法的方式實(shí)現(xiàn)。

創(chuàng)建對(duì)象的方法使用的是組合，把一群相關(guān)的產(chǎn)品集合起來(lái)，類似于工廠里有一個(gè)個(gè)的車間。用于創(chuàng)建一組產(chǎn)品。

類和對(duì)象如何交互和分配職責(zé)

在一個(gè)方法中定義一個(gè)算法的骨架，而將一些步驟延遲到子類中。模板方法使得子類可以在不改變算法結(jié)構(gòu)的情況下，重新定義算法中的某些步驟。模板就是一個(gè)方法，這個(gè)方法將算法定義為一個(gè)步驟，其中的任何步驟都可以是抽象的，由子類負(fù)責(zé)實(shí)現(xiàn)。

適用于算法的結(jié)構(gòu)保持不變，同時(shí)由子類提供部分實(shí)現(xiàn)的情況。常被架構(gòu)師用于搭建項(xiàng)目的框架，架構(gòu)師定好了骨架，程序員繼承了骨架的結(jié)構(gòu)之后，負(fù)責(zé)往里面填空。

鉤子是一種被聲明在抽象類中的方法，只有空的或默認(rèn)的實(shí)現(xiàn)。鉤子的存在，可以讓子類有能力對(duì)算法的不同點(diǎn)進(jìn)行掛鉤。要不要掛鉤，由子類決定（可選）。在容易變化的地方放置鉤子，鉤子可以有一個(gè)默認(rèn)的實(shí)現(xiàn)，但是究竟要不要“掛鉤”，這由子類自行決定。

一個(gè)經(jīng)典的coffee or tea的例子

// 創(chuàng)建抽象父類

var Beverage = function(){};

Beverage.prototype.boilWater = function(){
    console.log("把水煮沸");
};

// 三個(gè)空方法，由子類實(shí)現(xiàn)
Beverage.prototype.brew = function(){};
Beverage.prototype.pourIncup = function(){};
Beverage.prototype.addCondimwnts = function(){};

// 實(shí)現(xiàn)順序
Beverage.prototype.init = function(){
    this.boilWater();
    this.brew();
    this.pourInCup();
    this.addCondiments();
};

// 實(shí)現(xiàn)煮咖啡
var Coffee = function(){};

Coffee.prototype = new Beverage();

Coffee.prototype.brew =function(){
    console.log("煮咖啡");
};

Coffee.prototype.pourIncup = function(){
    console.log("coffee倒入杯子");
};

Coffee.prototype.addCondiments = function(){
    console.log("加糖和牛奶");
};

var coffee = new Coffee();
coffee.init();

// 實(shí)現(xiàn)怕茶
var Tea = function(){};

Tea.prototype = new Beverage();

Tea.prototype.brew =function(){
    console.log("泡茶");
};

Tea.prototype.pourIncup = function(){
    console.log("tea倒入杯子");
};

Tea.prototype.addCondiments = function(){
    console.log("加檸檬");
};

var tea = new Tea();
tea.init();

命令模式將請(qǐng)求封裝成對(duì)象，以便使用不同的請(qǐng)求、隊(duì)列或者日志來(lái)參數(shù)化其他對(duì)象，命令模式也支持可撤銷的操作。

有時(shí)候需要向某些對(duì)象發(fā)送請(qǐng)求，但是并不知道請(qǐng)求的接受者是誰(shuí)，也不知道請(qǐng)求的操作是什么，將‘對(duì)象的請(qǐng)求者‘從’命令的執(zhí)行者’中解耦。使用此模式的優(yōu)點(diǎn)還在于，command對(duì)象擁有更長(zhǎng)的生命周期，可以在程序運(yùn)行的任何時(shí)刻去調(diào)用這個(gè)方法。

命令模式將動(dòng)作和接受者包進(jìn)對(duì)象中。這個(gè)對(duì)象只暴露出一個(gè)execute()方法，當(dāng)此方法被調(diào)用的時(shí)候，接受者就會(huì)進(jìn)行這些動(dòng)作。從外面來(lái)看，其它對(duì)象不知道究竟哪個(gè)接受者進(jìn)行了這些動(dòng)作，只知道如果調(diào)用execute()方法，請(qǐng)求目的就達(dá)到了。

命令模式的由來(lái)，其實(shí)是回調(diào)函數(shù)的一個(gè)面向?qū)ο蟮奶娲?，命令模式早已融入到了JavaScript語(yǔ)言之中。

// 命令模式
// 具體的命令執(zhí)行動(dòng)作（廚師炒菜）
var MenuBar = {
    refresh:function(){
        console.log("刷新菜單界面")
    }
}

// 傳遞命令（把菜單給廚師）
var RefreshMenuBarCommand = function(receiver){
    return{
        execute:function(){
            receiver.refresh();
        }
    }
}

// 可見(jiàn)的命令（菜單）
var setCommand = function(button,command){
    button.onclick = function(){
        command.execute()
    }
}

// 請(qǐng)求命令（點(diǎn)餐）
var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);

// 執(zhí)行命令（在顧客不可見(jiàn)的情況下，廚師炒菜）
setCommand(button1,refreshMenuBarCommand)

迭代器模式提供一種方法順序訪問(wèn)一個(gè)聚合對(duì)象中的各個(gè)元素，而又不暴露其內(nèi)部的表示，有內(nèi)部迭代器和外部迭代器之分，其中內(nèi)部迭代器全接手整個(gè)迭代過(guò)程，外部只需要一次初始調(diào)用，而外部迭代器必須顯式的請(qǐng)求下一個(gè)元素。

需要順序訪問(wèn)一個(gè)組合內(nèi)的多個(gè)對(duì)象的時(shí)候使用。

一個(gè)對(duì)比對(duì)象的例子

var Iterator = function(obj){
    var current = 0;

    var next = function(){
        current + = 1;
    };

    var isDone = function(){
        return current >=obj.length;
    };

    var getCurrItem = function(){
        return obj[current];
    };

    return{
        next:next,
        isDone:isDone,
        getCurrItem:getCurrItem
    }
}

var compare = function(iterator1,iterator2){
    while(!iterator1.isDone() && !iterator2.isDone()){
        if (iterator1.getCurrItem() !== iterator2.getCurrItem()) {
            throw new Error("iteraor1和iteraor2不相等");
        }
        iterator1.next();
        iterator2.next();
    }
    alert("二者相等");
}

var iterator1 = Iterator([1,2,3]);
var iterator2 = Iterator([1,2,3]);

compare(iterator1,iterator2);

又稱發(fā)布-訂閱模式，定義了對(duì)象之間的一對(duì)多依賴，這樣一來(lái)，當(dāng)一個(gè)對(duì)象改變狀態(tài)時(shí)，它的所有依賴者都會(huì)收到通知并自動(dòng)更新。

幫你的對(duì)象知悉現(xiàn)狀，不會(huì)錯(cuò)過(guò)該對(duì)象感興趣的事情，對(duì)象甚至可以在運(yùn)行時(shí)決定是否需要繼續(xù)被通知，就像你關(guān)注了京東商城某款產(chǎn)品的降價(jià)信息，當(dāng)該商品降價(jià)，你就會(huì)通過(guò)短信或者郵件獲得通知，而不用你每天都登陸去看了，這種情況下，京東商城就是主題（subject），作為客戶的你就是觀察者了。

主題是具有狀態(tài)的對(duì)象，并且可以控制這些狀態(tài)；

觀察者使用這些狀態(tài)，雖然這些狀態(tài)不屬于它們；

主題和觀察者之間數(shù)據(jù)的傳輸有推（push）和拉（pull）兩種，推得方式被認(rèn)為更加正確；

廣泛應(yīng)用在異步編程中；

二者之間通過(guò)松耦合聯(lián)系在一起；

指定好主題（發(fā)布者）；

給主題一個(gè)緩存列表，用于存放回調(diào)函數(shù)以便通知觀察者；

發(fā)布消息時(shí)，主題遍歷緩存列表，觸發(fā)里面存放的訂閱者回調(diào)函數(shù)；

訂閱者接受信息，各自處理；

一個(gè)獲取房?jī)r(jià)信息變化的例子

var salesOffice = {};   //定義售樓處

salesOffice.clienList = [];  //緩存列表，存放訂閱者的回調(diào)函數(shù)

// 注冊(cè)為觀察者
salesOffice.listen = function(key,fn){
    if (!this.clienList[key]) {
        this.clienList[key]=[];  // 如果還沒(méi)有訂閱過(guò)此消息，給該類消息訂閱一個(gè)緩存列表
    }
    this.clienList[key].push(fn); //訂閱的消息添加進(jìn)消息緩存列表
};

// 不再觀察
salesOffice.remove = function(key,fn){
    var fns = this.clienList[key];

    if (!fns) {
        return false; // 無(wú)人關(guān)注此類消息，直接返回；
    }
    if (!fn) {
        fns&&(fns.length = 0 ); // 沒(méi)有傳入具體的回調(diào)函數(shù)，表示需要取消key對(duì)應(yīng)消息的所有訂閱
    }else{
        for ( var l = fns.length-1; l >=0;l--){
            var _fn = fns[l];
            if (_fn===fn) {
                fns.splice(l,1); // 刪除對(duì)應(yīng)訂閱
            }
        }
    }
};

// 通知函數(shù)
salesOffice.trigger = function(){ // 發(fā)布消息
    var key = Array.prototype.shift.call(arguments), // 取出消息類型
    fns = this.clienList[key]; // 取出該消息對(duì)應(yīng)的函數(shù)集合

    if (!fns || fns.length === 0) {
        return false; // 如果沒(méi)有訂閱，則返回
    }

    for(var i = 0 , fn; i
狀態(tài)模式（State）
定義
允許對(duì)象在內(nèi)部狀態(tài)改變時(shí)改變它的行為，對(duì)象好像看起來(lái)修改了它的類。
使用場(chǎng)景
解決某些需要場(chǎng)景的問(wèn)題。
實(shí)現(xiàn)

將狀態(tài)封裝為獨(dú)立的類，并將請(qǐng)求委托給當(dāng)前的狀態(tài)對(duì)象，當(dāng)對(duì)象的內(nèi)部狀態(tài)改變時(shí)，會(huì)帶來(lái)不同的行為變化；

不同的狀態(tài)下有不同的行為；

狀態(tài)模式的關(guān)鍵是把事物的每種狀態(tài)封裝為多帶帶的類，跟狀態(tài)有關(guān)的行為被封裝在這個(gè)類的內(nèi)部。


var light = function(){
    this,currState = FSM.off;//設(shè)計(jì)默認(rèn)狀態(tài)
    this.button = null;
};

Light.prototype.init = function(){
    var button = document.createElement("button"),
    self = this;

    button.innerHtml = "已關(guān)燈";
    this.button = document.body.appendChild(button);

    this.button.onclick = function(){
        self.currState.buttonWasPress.call(self);
    }
};

var FSM = {
    off:{
        buttonWasPress:function(){
            console.log("關(guān)燈");
            this.button.innerHTML = "下一次按我是開(kāi)燈"；
            this.currState = FSM.on;
        }
    },
    on:{
        buttonWasPress:function(){
            console.log("開(kāi)燈");
            this.button.innerHTML = "下一次點(diǎn)擊是關(guān)燈";
            this.currState = FSM.off;
        }
    }
};

var light = new Light();
light.init();

結(jié)構(gòu)型
把類和對(duì)象組合到更大的結(jié)構(gòu)中
裝飾者模式（Decorator）
定義
動(dòng)態(tài)的將責(zé)任附加到對(duì)象上。它比繼承更具有彈性。

缺點(diǎn)：

在設(shè)計(jì)中加入大量的小類，導(dǎo)致別人不理解設(shè)計(jì)方式；

類型問(wèn)題；

增加代碼的復(fù)雜度


使用場(chǎng)景
增加行為到包裝對(duì)象上，在不改變對(duì)象自身的基礎(chǔ)上，在程序運(yùn)行期間給對(duì)象動(dòng)態(tài)的添加職責(zé)，比如說(shuō)點(diǎn)了一杯咖啡，添加其它調(diào)料的過(guò)程，或者類似于在炒菜的過(guò)程中，加油加鹽加料酒的過(guò)程。
實(shí)現(xiàn)

裝飾者和被裝飾者具有一樣的類型，也就是有共同的超類；

新的行為由組合對(duì)象得到；

行為來(lái)自裝飾者和基礎(chǔ)組件，或與其它裝飾者之間的組合關(guān)系；



一個(gè)沖咖啡的例子
// 被裝飾者
var coffee = function(){
    make:function(){
        console.log("沖咖啡");
    }
}

//裝飾者1
var sugerDecorator = function(){
    console.log("加糖");
}

// 裝飾者2
var milkDecorator = function(){
    console.log("加奶");
}

var coffee1 = coffee.make;

coffee.make = function(){
    coffee1();
    sugerDecorator();
}

var coffee2 = coffee.make;

coffee.make = function(){
    coffee2();
    milkDecorator();
}

coffee.make(); // 沖咖啡加糖加奶
代理模式（Proxy）
定義
代理模式為另一個(gè)對(duì)象提供一個(gè)替身或占位符以控制對(duì)這個(gè)對(duì)象的訪問(wèn)
使用場(chǎng)景
使用代理模式創(chuàng)建對(duì)象，讓代表對(duì)象控制某對(duì)象的訪問(wèn)，被代理的對(duì)象可以是遠(yuǎn)程的對(duì)象，創(chuàng)建開(kāi)銷大的對(duì)象或者需要安全控制的對(duì)象。

保護(hù)代理用于過(guò)濾掉一些請(qǐng)求；

虛擬代理把一些開(kāi)銷大的請(qǐng)求延遲到真正需要它的時(shí)候才去創(chuàng)建（最常用）；


使用方法
類圖

一個(gè)圖片預(yù)加載的例子
var myImage = (function(){
    var imgNode = document.createElement("img");
    document.body.appendChild(imgNode);

    return{
        setSrc:function(src){
            imgNode.src = src;
        }
    }
})();

var proxyImage = (function(){
    var img = new Image;
    img.onload = function(){
        myImage.setSrc(this.src)
    }

    return{
        setSrc:function(src){
            myImage.setSrc("../loading.gif");
            img.src = src;
        }
    }
})();

proxyImage.setSrc("http;//.../123.jpg");
外觀模式（Facade）
定義
提供了一個(gè)統(tǒng)一的接口
適合場(chǎng)景
通過(guò)實(shí)現(xiàn)一個(gè)提供更合理的接口的外觀類，可以將一個(gè)復(fù)雜的子系統(tǒng)變得容易使用，不僅簡(jiǎn)化了接口，也將客戶從組件中解耦。
適配器模式（Adapter）
定義
又名包裝器，適配器模式將一個(gè)類的接口，轉(zhuǎn)換為客戶期望的另一個(gè)接口，適配器讓原本接口不兼容的類可以合作無(wú)間。
類圖

適應(yīng)場(chǎng)景
包裝某些對(duì)象，讓它們的接口看起來(lái)不像自己而像是被的東西，將類的接口轉(zhuǎn)為想要的接口，以便實(shí)現(xiàn)不同的接口；就像你買了港版手機(jī)，附帶的港版的充電器，你需要一個(gè)轉(zhuǎn)接頭才能使用，這個(gè)轉(zhuǎn)接頭的功能就類似于適配器。
值得注意的是這是一種亡羊補(bǔ)牢的措施。
實(shí)現(xiàn)

客戶通過(guò)目標(biāo)接口調(diào)用適配器的方法對(duì)適配器發(fā)出請(qǐng)求；

適配器使用被適配者接口把請(qǐng)求轉(zhuǎn)換為被被適配者的一個(gè)或多個(gè)接口；

客戶接受到調(diào)用的結(jié)果，但是并未察覺(jué)這一切是適配器在起作用。


對(duì)象適配器類圖

類適配器類圖

一個(gè)適配器實(shí)例
// 適配器模式
var googleMap = {
    show:function(){
        console.log("開(kāi)始渲染谷歌地圖")
    }
};

var baiduMap = {
    display:function(){
        console.log("開(kāi)始渲染百度地圖")
    }
};

var baidumapAdapter = {
    show : function(){
        return baiduMap.display();
    }
};

renderMap(googleMap);
renderMap(baiduMapAdapter);
說(shuō)明
本文由zhangwang首發(fā)于簡(jiǎn)書和segmentfault,轉(zhuǎn)載請(qǐng)加以說(shuō)明。
參考書籍

《Head First設(shè)計(jì)模式》

《JavaScript設(shè)計(jì)模式和開(kāi)發(fā)實(shí)踐》