摘要：注意事項(xiàng)聲明函數(shù)時候處理業(yè)務(wù)邏輯區(qū)分和單例的區(qū)別，配合單例實(shí)現(xiàn)初始化構(gòu)造函數(shù)大寫字母開頭推薦注意的成本。簡單工廠模式使用一個類通常為單體來生成實(shí)例。

@(書籍閱讀)[JavaScript, 設(shè)計模式]

一直對設(shè)計模式不太懂，花了一下午加一晚上的時間，好好的看了看各種設(shè)計模式，并總結(jié)了一下。

設(shè)計模式概念解讀

設(shè)計模式的發(fā)展與在JavaScript中的應(yīng)用

設(shè)計原則

設(shè)計概念文字解讀

設(shè)計模式（Design pattern）:

>是一套被反復(fù)使用，思想成熟，經(jīng)過分類和無數(shù)實(shí)戰(zhàn)設(shè)計經(jīng)驗(yàn)的總結(jié)。使用設(shè)計模式是為了讓系統(tǒng)代碼可重用，可擴(kuò)展，可解耦，更容易被人理解且能保證代碼可靠性。設(shè)計模式使代碼開發(fā)真正工程化；設(shè)計模式是軟件工程的基石脈絡(luò)，如同大廈的結(jié)構(gòu)一樣。只有夯實(shí)地基搭好結(jié)構(gòu)，才能蓋出堅壯的大樓。也是我們邁向高級開發(fā)人員必經(jīng)的一步。

設(shè)計模式擬物化解讀

一層書柜--》兩層書柜--》各種書柜分門別類

設(shè)計模式的發(fā)展

四人幫的書，設(shè)計模式的圣經(jīng)Gof

JavaScript中的設(shè)計模式

編程語言之間是想通的；
很多本該有的東西JavaScript都有，但是并沒有作為正式的部分。這些年人們利用自己對計算機(jī)編程的思想，利用了很多晦澀的技巧實(shí)現(xiàn)了很多JavaScript設(shè)計者都未曾預(yù)計到的任務(wù)，比如各種設(shè)計模式的實(shí)現(xiàn)，比如面向?qū)ο蟮木幊獭?/p> 設(shè)計原則

設(shè)計原則詳解

設(shè)計模式的根本原因是為了代碼復(fù)用，增加可維護(hù)性。有如下原則：

【開閉原則】：對擴(kuò)展開放，對修改關(guān)閉；

【里氏轉(zhuǎn)換原則】：子類繼承父類，多帶帶調(diào)用完全可以運(yùn)行；

【依賴倒轉(zhuǎn)原則】：引用一個對象，如果這個對象有底層類型，直接引用底層；

【結(jié)構(gòu)隔離原則】：每一個接口應(yīng)該是一種角色；

【合成/聚合復(fù)用原則】：新對象應(yīng)該使用一些已有的對象，使之成為新對象的一部分；

【迪米特原則】：一個對象應(yīng)該對其它對象有盡可能少的了解；
站在巨人的肩膀上整體HOLD系統(tǒng)架構(gòu)。

單例模式的文字解讀

單例就是保證一個類只有一個實(shí)例，實(shí)現(xiàn)的方法一般是先判斷實(shí)例存在與否，如果存在則直接返回，如果不存在就創(chuàng)建了再返回，這就確保了一個類只有一個實(shí)例對象。
在JavaScript中，單例作為一個命名空間提供者，從全局命名空間里提供一個唯一的訪問點(diǎn)來訪問該對象。

單例模式的擬物化解讀

比如說一座房子只有一扇門，有一扇門就不用再開門了，如果沒有門則需要創(chuàng)建一個門。每個門都只屬于一個戶主（命名空間），門是戶與戶之間的唯一接口，你要來我家，只能從這個門進(jìn)來。
命名空間：

通常來說，命名空間是唯一識別的一套名字，這樣當(dāng)對象來自不同的地方但是名字相同的時候就不會含糊不清了。

模式作用

模塊間通信；

系統(tǒng)中某個類的對象只能存在一個；

保護(hù)自己的屬性和方法（不受外面的干擾）；

注意事項(xiàng)：

注意this的使用：隨著調(diào)用不斷變化，誰調(diào)用指向誰；

閉包容易造成內(nèi)存泄露，不需要的趕快干掉：閉包就是拿到不該拿到的東西，return；

注意new的成本。（繼承）

var single = (function() {
    var unique;
    function getInstance() {
        if (unique === undefined) {
            unique = new Construct();
        }
        return unique;
    }
    function Construct() {
        // ... 生成單例的構(gòu)造函數(shù)的代碼
    }
    return {
        getInstance: getInstance
    }

})();

文字解讀

構(gòu)造函數(shù)用于創(chuàng)建特定類型的對象-不僅聲明了使用的對象，構(gòu)造函數(shù)還可以接收參數(shù)以便第一次創(chuàng)建對象的時候設(shè)置對象的成員值?？梢宰远x構(gòu)造函數(shù)，然后在里面聲明自定義類型對象的屬性和方法；
在JavaScript里，構(gòu)造函數(shù)通常是認(rèn)為用來實(shí)現(xiàn)實(shí)例的，JavaScript沒有類的概念，但是有特殊的構(gòu)造函數(shù)。通過new關(guān)鍵字來調(diào)用自定義的構(gòu)造函數(shù)，在構(gòu)造函數(shù)內(nèi)部，this關(guān)鍵字引用的是新創(chuàng)建的對象。

擬物化解讀

每家都有一個門，但是每個門都有自己的特點(diǎn)，可以根據(jù)自己的需要添加不同的特點(diǎn)（傳入不同的值）。

模式作用：

用于創(chuàng)建特點(diǎn)類型的對象：給某一個人

第一次聲明的時候給對象賦值；

自己聲明構(gòu)造函數(shù)，賦予屬性和方法；（告訴別人自己想要怎么樣的門。）

注意事項(xiàng)

聲明函數(shù)時候處理業(yè)務(wù)邏輯；

區(qū)分和單例的區(qū)別，配合單例實(shí)現(xiàn)初始化；

構(gòu)造函數(shù)大寫字母開頭（推薦~）

注意new的成本。（繼承）（相同的盡量放在原型鏈上）

最簡單的構(gòu)造函數(shù)：

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output= function () {
        return this.model + "走了" + this.miles + "公里";
    };
}

var tom= new Car("大叔", 2009, 20000);
var dudu= new Car("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

強(qiáng)制使用new的方法：

function Car(model, year, miles) {
    if (!(this instanceof Car)) {
        return new Car(model, year, miles);
    }
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output = function () {
        return this.model + "走了" + this.miles + "公里";
    }
}

var tom = new Car("大叔", 2009, 20000);
var dudu = Car("Dudu", 2010, 5000);

console.log(typeof tom); // "object"
console.log(tom.output()); // "大叔走了20000公里"
console.log(typeof dudu); // "object"
console.log(dudu.output()); // "Dudu走了5000公里"

建造者模式文字解讀

建造者模式可以將一個復(fù)雜對象的構(gòu)建與其表示相分離，使得同樣的構(gòu)建過程可以創(chuàng)建不同的表示。也就是說，如果我們用了建造者模式，那么用戶就需要指定需要建造的類型就可以得到它們，而具體建造的過程和細(xì)節(jié)就不需要知道了。建造者模式實(shí)際，就是一個指揮者，一個建造者，一個使用指揮者調(diào)用具體建造者工作得出結(jié)果給客戶。
建造者模式主要用于“分步驟構(gòu)建一個復(fù)雜的對象”，“分步驟”是一個穩(wěn)定的算法，而復(fù)雜對象的各個部分則經(jīng)常變化。

建造者模式擬物化解讀

說一戶家人要建房子，但房子主人或家里其他人是不懂得如何去建房子的，所以他得去請幾個工人，這個建房子的隊(duì)伍還得有個工頭，來按房主人的想法來建一套房子，工頭按房主人的要求設(shè)計要求工人如何如何做；

工頭說，第一步先把房整體骨架搭起來，第二步睡房建造好，第三步把廚房裝飾好，第四步把客廳建造裝飾完畢，第五步...

工頭是不做事的，但具體建造者必須按照工頭的要求來做，第一步，第二步的這樣步驟來建造，直至整個房子完成；

創(chuàng)建者必須要有創(chuàng)建這個房屋的所有技能，即建骨架，裝飾睡房等...，即建造者所做的事，或所具有的能力，必須大于或等于指揮者要求要做的事，或具有的能力；

即指揮者是個組織者，而建造者提供技能;

模式作用：

分布構(gòu)建一個復(fù)雜的對象（包工頭對工人，工人對房子）；

解耦封裝過程和具體構(gòu)建的組件；

無需關(guān)心組件如何組裝；

各司其職，拆解流程；

注意事項(xiàng)：

一定要有一個穩(wěn)定的算法進(jìn)行支持（合同）；

加工工藝是暴露的（可以直接找工人，但是包工頭更熟悉）；

工人建造者X:

function workerBuilder() {
    this.workOne = function() {
         //建房子骨架
    }
    this.workTwo=function() {
         //建睡房
    }
    this.workThree=function() {
         //建廚房
    }
    this.workFour=function() {
         //建客廳
    }
    //....
    
    this.getResult = function() {
         //建成房子
　　　　　var house = new House();
　　　　　//house.HouseFrame ...
　　　　　return house;　
    }
}

workBuilder 是具體建造者類，workOne, Two是要做的事情，建骨架等;

當(dāng)然 workBuilder 可以多建幾個，用于表示 工人 對于每個工作執(zhí)行的方法不一樣；但工作內(nèi)容是一樣的;

指揮者類

function Director() {
     this.construct = function(builder) {
          builder.workOne();
          builder.workTwo();
          builder.workThree();
          builder.workFour();
          //...
          //上面的內(nèi)容，順序可設(shè)置，并且工作項(xiàng)也可以設(shè)定
     }
}
 

指揮者類下的 指導(dǎo) 方法，有對 建造者 的回調(diào)引用，內(nèi)容包括建者工作內(nèi)容幾項(xiàng)或全部; 指揮者對建造者工人要做的事情進(jìn)行組織跟安排；

產(chǎn)品房子

function House() {
    this.HouseFrame = "";
    this.Room = "";
    this.Kitchen = "";
    this.LivingRoom = "";
    //...
}
 

使用方法

var builder = new workBuilder();
var director = new Director();
director.construct(builder);
var house = builder.getResult();

第四步，整個使用相當(dāng)于客戶：房主人，房主人請 Director 工頭來建房子，但是工頭是不做事的，所以他指揮 builder 工個來建子，最后房主人從工人那里取得建好的房子；

文字解讀

工廠模式定義了一個用于創(chuàng)建對象的接口，這個接口決定了實(shí)例化哪一個類。該模式使一個類的實(shí)例化延遲到了子類。而子類可以重寫接口方法以便創(chuàng)建的時候指定自己的對象類型（抽象工廠）。（簡單工廠：能找到具體細(xì)節(jié)）；抽象工廠只留口，不做事，留給外界覆蓋；
這個模式十分有用，尤其是創(chuàng)建對象的流程賦值的時候，比如依賴于很多設(shè)置文件等。并且，會經(jīng)常在程序里看到工廠方法，用于讓子類定義需要創(chuàng)建的對象類型。
簡單工廠模式：使用一個類（通常為單體）來生成實(shí)例。
復(fù)雜工廠模式：使用子類來決定一個成員變量應(yīng)該是哪個具體的類的實(shí)例。

擬物化解讀

廠里可以做衣服可以做鞋，按訂單來生產(chǎn)那種東西，通過廠長安排那條產(chǎn)品線，外界可以修改產(chǎn)品線工藝（抽象工廠）。廠長只是告訴做什么事，

作用：

對象的構(gòu)建十分復(fù)雜；

需要依賴具體的環(huán)境創(chuàng)建不同實(shí)例；

處理大量具有相同屬性的小對象；

注意事項(xiàng)：

不能濫用工廠，有時候僅僅是給代碼增加復(fù)雜度；

簡單工廠模式：

var BicycleFactory = {
    createBicycle : function( model ){
        var bicycle;
        switch( model ){
            case "The Speedster":
                bicycle = new Speedster();
                break;
            case "The Lowrider":
                bicycle = new Lowrider();
                break;
            case "The Cruiser":
            default:
                bicycle = new Cruiser();
                break;
        }
        return bycicle;
    }
}

BicycleFactory 是一個脫離于BicycleShop的單體。降低耦合度的效果顯而易見。當(dāng)需要添加新的類型的時候，不需要動 BicycleShop 只需修改工廠單體對象就可以。

var BicycleShop = function(){};

BicycleShop.prototype = {
    sellBicycle : function( model ){
        var bicycle = BicycleFactory.createBicycle(model);     
        return bicycle;
    }
}

工廠模式：
真正的工廠模式與簡單工廠模式相比，主要區(qū)別就是它不是另外使用一個對象或者類來創(chuàng)建實(shí)例（自行車），而是使用一個子類。工廠是一個將其成員對象的實(shí)例化推遲到子類中進(jìn)行的類。

比如加入BicycleShop可以決定從那一家廠商進(jìn)行進(jìn)貨，那么簡單的一個BicycleFactory是不夠了的，因?yàn)楦鱾€廠商會各自生產(chǎn)不同的Speedster，Lowrider，Cruiser等型號自行車，所以首先需要生成各自廠商的shop實(shí)例，不同廠商的shop實(shí)例擁有不同的生成幾個型號自行車的方法。

也就是相當(dāng)于將自行車對象的實(shí)例化推遲到了shop實(shí)例中產(chǎn)生。

基礎(chǔ)：

var BicycleShop = function(){}
BicycleShop.prototype={
    sellBicycle: function( model ){
        var bicycle = this.createBicycle( model );
        return bicycle;
    },
    createBicycle: function( model ){
        throw new Error( " Unsupported " );
    }
}

各自廠商：

var AcmeBicycleShop = function(){};

extend( AcmeBicycleShop , BicycleShop );
AcmeBicycleShop.prototype.createBicycle = function( model ){
    var bicycle;
    switch( model ){
        case "The Speedster":
            bicycle = new AcmeSpeedster();
            break;
        case "The Lowrider":
            bicycle = new AcmeLowrider();
            break;
        case "The Cruiser":
        default:
            bicycle = new AcmeCruiser();
            break;
    }
    return bicycle;
}

var GeneralBicycleShop = function(){};

extend( GeneralBicycleShop , BicycleShop );
GeneralBicycleShop.prototype.createBicycle = function( model ){
   ...
}

那么接下來就很簡單 對于來自 Acme 進(jìn)貨的

    var acmeShop = new AcmeBicycleShop();
    var newBicycle = acmeShop.sellBicycle("The Speedster");

當(dāng)然，你也可以對于外層生成的子類實(shí)例在使用簡單工廠模式進(jìn)行包裝一下~對于添加其他廠商也很簡單，在創(chuàng)建一個Bicycle的子類重新定義其createBicycle的工廠方法即可。

動態(tài)實(shí)現(xiàn)
例如自行車的例子，創(chuàng)建一些用不同方式實(shí)現(xiàn)統(tǒng)一接口的對象，那么可以使用一個工廠方法或者簡單工廠對象來簡化實(shí)現(xiàn)過程。選擇可以是明確進(jìn)行的也可以是隱含的。

節(jié)省設(shè)置開銷
如果對象要進(jìn)行復(fù)雜的并且彼此相關(guān)的設(shè)置的時候，那么工廠模式可以很顯著的減少每種對象的代碼量。將特定的設(shè)置代碼提取出來會使得代碼有極大地提升。并且能優(yōu)化結(jié)構(gòu)便于維護(hù)。

用于許多小型對象組成一個大對象。

工廠模式之利
主要好處就是可以消除對象間的耦合，通過使用工程方法而不是new關(guān)鍵字。將所有實(shí)例化的代碼集中在一個位子防止代碼重復(fù)。

工廠模式之弊
大多數(shù)類最好使用new關(guān)鍵字和構(gòu)造函數(shù)，可以讓代碼更加簡單易讀。而不必去查看工廠方法來知道。

代理模式文字解讀

代理：顧名思義就是幫組別人做事，GoF對代理模式的定義如下：
代理模式（Proxy），為其它對象提供一種代理以控制對這個對象的訪問。代理模式是的代理對象控制具體對象的引用。代理幾乎可以是任何對象：文件，資源，內(nèi)存中的對象，或者是一些難以復(fù)制的東西。

代理模式擬物化解讀

中介

經(jīng)理把收集日報周報反饋給大老板；

卡扣通過中間的黃色東西連接在一起；

模式作用：

遠(yuǎn)程代理（一個對象將不同空間的對象進(jìn)行局部代理）；

虛擬代理（根據(jù)需要創(chuàng)建開銷很大的對象如渲染網(wǎng)頁暫時用占位符替代真圖）；

安全代理（控制真實(shí)對象的訪問權(quán)限）；

智能指引（調(diào)用對象代理處理另外一些事情如垃圾回收機(jī)制）；

注意事項(xiàng)：

不能濫用代理，有時候僅僅是給代碼增加復(fù)雜度；

代理模式需要三方：
小v和狼貓有點(diǎn)誤會，由大熊君幫著緩和一下誤會慢慢解除了。

function XiaoV(){
     this.talk = function(){
         console.log("狼貓老弟，不好意思上次的事，請多多諒解。") ;
     } ;
 } ;
 function LangMao(){
     this.bb = new BigBear() ;
     this.talk = function(){
         console.log("大熊君好啊，最忌忙什么那？") ;
         this.bb.talk() ;
     } ;
 } ;
 function BigBear(){
     this.xiaov = new XiaoV() ;
     this.talk = function(){
        console.log("狼貓兄弟，中午沒事一起吃頓飯聊聊天，那天我見到小v了，他優(yōu)化和你說。。。。。。") ;
         this.xiaov.talk() ;
     } ;
 } ;
 function go(){
 new LangMao().talk() ;
 } ;

抽象角色：聲明真實(shí)對象和代理對象的共同接口。

代理角色：代理對象角色內(nèi)部含有對真實(shí)對象的引用，從而可以操作真實(shí)對象，同時代理對象提供與真實(shí)對象相同的接口以便在任何時刻都能代替真實(shí)對象。同時，代理對象可以在執(zhí)行真實(shí)對象操作時，附加其他的操作，相當(dāng)于對真實(shí)對象進(jìn)行封裝。

真實(shí)角色：代理角色所代表的真實(shí)對象，是我們最終要引用的對象。

代理模式的一個好處就是對外部提供統(tǒng)一的接口方法，而代理類在接口中實(shí)現(xiàn)對真實(shí)類的附加操作行為，從而可以在不影響外部調(diào)用情況下，進(jìn)行系統(tǒng)擴(kuò)展。也就是說，我要修改真實(shí)角色的操作的時候，盡量不要修改他，而是在外部在“包”一層進(jìn)行附加行為，即代理類。

代理模式使用場景

當(dāng)我們需要使用的對象很復(fù)雜或者需要很長時間去構(gòu)造，這時就可以使用代理模式(Proxy)。例如：如果構(gòu)建一個對象很耗費(fèi)時間和計算機(jī)資源，代理模式(Proxy)允許我們控制這種情況，直到我們需要使用實(shí)際的對象。一個代理(Proxy)通常包含和將要使用的對象同樣的方法，一旦開始使用這個對象，這些方法將通過代理(Proxy)傳遞給實(shí)際的對象。 一些可以使用代理模式(Proxy)的情況：

一個對象，比如一幅很大的圖像，需要載入的時間很長。

一個需要很長時間才可以完成的計算結(jié)果，并且需要在它計算過程中顯示中間結(jié)果

一個存在于遠(yuǎn)程計算機(jī)上的對象，需要通過網(wǎng)絡(luò)載入這個遠(yuǎn)程對象則需要很長時間，特別是在網(wǎng)絡(luò)傳輸高峰期。

一個對象只有有限的訪問權(quán)限，代理模式(Proxy)可以驗(yàn)證用戶的權(quán)限

文字解讀

命令模式（Command）：
用來對方法調(diào)用進(jìn)行參數(shù)化處理和傳送，經(jīng)過這樣處理過的方法調(diào)用可以在任何時候執(zhí)行。也就是說該模式旨在將函數(shù)的調(diào)用，請求和操作封裝成一個單一的對象，然后對這個對象進(jìn)行一系列的處理。它也可以用來消除調(diào)用操作的對象和實(shí)現(xiàn)操作的對象之間的耦合。這為各種具體的類的更換帶來了極大的靈活性。

模式作用：

將函數(shù)的封裝，請求，調(diào)用結(jié)合為一體；

調(diào)用具體的函數(shù)解耦命令對象和接收對象；

提高程序模塊的靈活性；

注意事項(xiàng)：

不需要借口一致，直接調(diào)用函數(shù)即可，以免造成浪費(fèi)；

// 命令

var CreateCommand = function( receiver ){  
          this.receiver = receiver;  
        }  
        CreateCommand.prototype.execute = function() {  
          this.receiver.action();  
        } 

// 接收者 電視

var TVOn = function() {}  
   TVOn.prototype.action = function() {  
       alert("TVOn");  
   }  

// 接收者 電視

var TVOff = function() {}  
        TVOff.prototype.action = function() {  
            alert("TVOff");  
        }  

// 調(diào)用者 遙控器

var Invoker = function( tvOnCommand, tvOffCommand ) {  
           this.tvOnCommand = tvOnCommand;  
           this.tvOffCommand = tvOffCommand;  
         }  
         Invoker.prototype.tvOn = function() {  
           this.tvOnCommand.execute();  
         }  
         Invoker.prototype.tvOff = function() {  
           this.tvOffCommand.execute();  
         }  

執(zhí)行Client

var tvOnCommand = new CreateCommand( new TVOn() );  
        var tvOffCommand = new CreateCommand( new TVOff() );  
        var invoker = new Invoker( tvOnCommand, tvOffCommand );  
        invoker.tvOn();  
        invoker.tvOff();  

深入理解JavaScript系列（26）：設(shè)計模式之構(gòu)造函數(shù)模式

[設(shè)計模式] javascript 之 建造者模式

JS設(shè)計模式二：工廠模式

大熊君說說JS與設(shè)計模式之------代理模式Proxy

【JS設(shè)計模式】命令模式

極客學(xué)院《JS設(shè)計模式》系列視頻