摘要：模式迭代器模式顧名思義，迭代器可以將對于一個聚合對象內(nèi)部元素的訪問與業(yè)務(wù)邏輯分離開。模式組合模式組合模式將對象組合成樹形結(jié)構(gòu)，以表示層級結(jié)構(gòu)。重點是，葉結(jié)點與中間結(jié)點有統(tǒng)一借口。本文總結(jié)自設(shè)計模式與開發(fā)實踐，曾探著

模式1 - 單例模式

單例模式的核心是確保只有一個實例，并且提供全局訪問。

特點：

滿足“單一職責(zé)原則” ： 使用代理模式，不在構(gòu)造函數(shù)中判斷是否已經(jīng)創(chuàng)建過該單例;

滿足惰性原則

應(yīng)用：
彈出登陸窗口。

實例：

var getSingle = function (fn) {
    var res;
    return function() {
        return res || (res = fn.apply(this, arguments));
    }
}

var createPopup() {
    var div = document.createElement("div");
    div.innerHTML = "Login window";
    div.style.display = "none"; 
    document.body.appendChild(div);
    return div;
}

var createLoginPopup = getSingle(createPopup);            //create popup div here by using a given function, 滿足兩個原則 

document.getElementById("loginBt").onclick = function() {
    var popup = createLoginPopup();
    pop.style.display = "block";
}

模式2 - 策略模式

定義一個個可以相互替換的算法，并且把他們封裝起來。

特點：

符合開放-封閉原則 ： 要修改使用的算法時不用深入函數(shù)內(nèi)部進(jìn)行修改，只需修改策略類;

將算法的實現(xiàn)與使用分離開，提高算法復(fù)用性;

通過組合、委托和多態(tài)避免多重條件選擇語句;

應(yīng)用：
動畫實現(xiàn)不同的緩動效果。

一般分為兩個部分：策略類于環(huán)境類。策略類用于封裝各種算法，并且負(fù)責(zé)具體的計算過程; 環(huán)境類負(fù)責(zé)接收用戶的請求，并且把請求委托給某一個策略類。因為各個策略類實現(xiàn)的算法和計算的結(jié)果不同，而環(huán)境類調(diào)用策略類的方法卻是相同的，這就體現(xiàn)了多態(tài)性。要想實現(xiàn)不同的算法，只需要替換環(huán)境類中的策略類即可。

在js中，我們不必構(gòu)造策略類，可直接使用函數(shù)作為策略對象。

示例：

var strategies = {
    "s1": function() {
        //algo 1
    },
    "s2": function() {
        //algo 2
    }, 
    "s3": function() {
        //algo 3
    }
 }
 
 var someContext =  new SomeConext();
 someContext.start("s1");  //using s1 to calculate
 //someContext.add("s1");  or add s1 as a rule for validation
 

模式3 - 代理模式

代理就像一個經(jīng)紀(jì)人，當(dāng)用戶不方便直接訪問某個對象或者需要對訪問進(jìn)行一些過濾/加工時，可以通過代理來進(jìn)行對象訪問。代理會對請求進(jìn)行一些處理，然后再將請求傳遞給本體。

一般分為保護(hù)代理和虛擬代理：

保護(hù)代理負(fù)責(zé)過濾掉一些請求;

虛擬代理則是將一些花銷比較大的操作延遲到真正他的時候再去創(chuàng)建，例如new一個對象。

特點：

保證對象符合單一職責(zé)原則;

應(yīng)用：
圖片預(yù)加載， 合并http請求， 惰性加載， 緩存代理（避免重復(fù)計算，可以寫一個通用的緩存對象（其實就是一個閉包），將高階函數(shù)作為參數(shù)傳入）。

模式4 - 迭代器模式

顧名思義，迭代器可以將對于一個聚合對象內(nèi)部元素的訪問與業(yè)務(wù)邏輯分離開。

一般分為內(nèi)部迭代器和外部迭代器：

內(nèi)部迭代器只需一次初始調(diào)用，不需要關(guān)心迭代器的內(nèi)部實現(xiàn)；

外部迭代器需要顯式地請求下一個元素，因此可以手工控制迭代過程和順序，例如調(diào)用iterator.next();

無論是哪種迭代器，只要聚合對象有l(wèi)ength屬性并且可以通過下標(biāo)訪問，那么就可以被迭代。因此類數(shù)組對象及字面量對象（用for in）都可以。

絕大部分語言都內(nèi)置了迭代器。

應(yīng)用：
可以通過添加終止條件來中斷迭代：在callback函數(shù)中判斷，如果return值為false，則通過break跳出迭代循環(huán)。
由此可以設(shè)計根據(jù)瀏覽器類型創(chuàng)建的返回對象，按優(yōu)先級一個個迭代。

模式5 － 訂閱發(fā)布模式

將許多對象弱耦合起來，當(dāng)一個對象的狀態(tài)發(fā)生變化時，所有訂閱了該變化的對象都會收到通知。
DOM事件是典型的訂閱發(fā)布模式，同時我們還可以自定義事件：

var event = {
    clients : {},
    listen : function (signal,fn){
        if(!this.clients[signal]) {
            this.clients[signal] = [];
        }
        this.clients[signal].push(fn);    
    },
    trigger: function (arguments){  //not only trigger the event, but also send some data
        var sig = Array.prototype.shift.call(arguments);
        fns = this.clients[sig];
        
        if(!fns || fns.length === 0)  return false;
        for(var i = 0; i < fns.length; i++) {
            var fn = fns[i];
            fn.apply(this, arguments);
        }
    },
    remove:  function (signal,fn){
        var fns = this.clients[signal];
        if(!fns)  return false;
        if(!fn) {   
            //remove all fns
            delete this.clients[signal];
        } else {
            for(var i = 0; i 
可以通過離線消息棧來保存沒有被訂閱的但是發(fā)生了的事件，等到有人訂閱再依次取出執(zhí)行。
應(yīng)用：
網(wǎng)站登錄－當(dāng)用戶登錄成功并且ajax返回數(shù)據(jù)后，trigger事件，需要用到用戶數(shù)據(jù)的渲染模塊訂閱該事件。

模式6－命令模式
可以解決請求發(fā)送者和請求接受者之間的耦合關(guān)系。實際上，我們只需要調(diào)用command對象中的execute方法就行，他會自動調(diào)用命令接收者對應(yīng)的命令。
示例：
var tv = {
    open: function() {
        console.log("open tv");
    },
    close: function() {
        console.log("turn off tv");
    },
    nextChannel: function() {
        console.log("next channel");
    }
}

//相當(dāng)于我把receiver的一些可用操作封裝到command對象里了，并且提供了統(tǒng)一的接口
var openTVCmd = function(receiver) {
    return {
        execute: function(){
            receiver.open();
        },
        undo : function() {
            //go to previous channel
            
        }
    }
}

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");

var setCmd = function(button, cmd) {
    button.onclick = function(){
        cmd.execute();
    }
}

var opentvcmd = new openTVCmd();
setCmd(btn1, opentvcmd);
btn2.onclick = function(){    //undo command
    opentvcmd.undo();
}

應(yīng)用：

可實現(xiàn)命令的撤銷和重做，只需紀(jì)錄一個oldState或者使用一個緩存來存放歷史命令；

可實現(xiàn)命令隊列，將command對象壓入堆棧，只需依次調(diào)用他們的execute函數(shù)，由此可實現(xiàn)宏命令；


可分為智能命令和傻瓜命令：
1.智能命令不需要知道receiver，可自己完成請求，代碼上類似策略模式，但目的不同；
2.傻瓜命令則只負(fù)責(zé)將請求傳遞給真正的receiver。

模式7－組合模式
組合模式將對象組合成樹形結(jié)構(gòu)，以表示層級結(jié)構(gòu)。借助于對象的多態(tài)性，它使得用戶可以統(tǒng)一地對待組合對象（單個對象的組合）和單個對象。
應(yīng)用：

可實現(xiàn)宏命令，只需要調(diào)用根結(jié)點的execute，程序會自動遍歷整棵樹并依次執(zhí)行各中間節(jié)點和葉結(jié)點的execute函數(shù)。重點是，葉結(jié)點與中間結(jié)點有統(tǒng)一借口。

可用來模擬文件和文件夾層級結(jié)構(gòu)：


示例：
var Folder = function(name) {
    this.name = name;
    this.files = [];
}
Folder.prototype.add = function(file) {
    this.files.push(file);
}
Folder.prototype.scan = function() {
    console.log("begin scanning folder "+ this.name);
    for(var i=0; i
注意，層級1與層級2結(jié)點之間并非父子關(guān)系，只是因為他們有統(tǒng)一的借口而被聯(lián)系在一起。
可以對這兩種結(jié)點建立雙向映射，即使文件1里面含有其父結(jié)點的引用，這樣子在刪除一個文件時就需要將其在其父結(jié)點的files中刪除。
組合模式使得用戶可以忽略組合對象和單個對象的差異而統(tǒng)一對待，但這也會使得每個對象看上去都差不多，增加代碼理解的難度。

P.s.  本文總結(jié)自《JavaScript設(shè)計模式與開發(fā)實踐》，曾探著