摘要：前言接下來(lái)將會(huì)為大家介紹設(shè)計(jì)模式中的創(chuàng)建型設(shè)計(jì)模式，在此之前需要掌握一定的對(duì)象繼承基礎(chǔ)。但是如果是工廠方法模式的話(huà)，則只需要往工廠方法中添加基類(lèi)則可以。

接下來(lái)將會(huì)為大家介紹設(shè)計(jì)模式中的創(chuàng)建型設(shè)計(jì)模式，在此之前需要掌握一定的JavaScript對(duì)象繼承基礎(chǔ)。

什么是簡(jiǎn)單工廠模式：又叫靜態(tài)工廠方法，由一個(gè)工廠對(duì)象決定創(chuàng)建某一種產(chǎn)品對(duì)象類(lèi)的實(shí)例

看著定義有點(diǎn)懵，沒(méi)關(guān)系。繼續(xù)往下走

說(shuō)明：簡(jiǎn)單來(lái)說(shuō)，就是為了把多個(gè)相同類(lèi)型的類(lèi)集成到一個(gè)函數(shù)內(nèi)，我們把這個(gè)函數(shù)叫做工廠函數(shù)

用途：使得其他人不用關(guān)注創(chuàng)建對(duì)象是基于哪個(gè)基類(lèi)，直接用該工廠函數(shù)即可

代碼：

//定義小貓類(lèi)
var Cat = function(){
    this.voice = "喵";
}
Cat.prototype.getVoice = function(){
    console.log(this.voice);
}

//定義小狗類(lèi)
var Dog = function(){
    this.voice = "汪";
}
Dog.prototype.getVoice = function(){
    console.log(this.voice);
}

//動(dòng)物工廠
var AnimalFactory = function(name) {
    switch(name){
        case "cat":
            return new Cat();
        case "dog":
            return new Dog();
    }
}

//創(chuàng)建實(shí)例
var hellokity = AnimalFactory("cat");
hellokity.getVoice();   //"喵"

當(dāng)然，上面兩種方法十分相似，于是還可以有下面的定義方式：

var createAnimal = function(name,voice) {
    var o = new Object(); 
    o.name = name;
    o.voice = voice;
    o.getVoice = function() {
        console.log(this.voice);
    }
    return o;
}
var hellokity = createAnimal("hellokity","喵");
hellokity.getVoice();   //"喵"

看似最后一種方法好像簡(jiǎn)便不少，但是實(shí)際上這兩種定義方法是有區(qū)別的。

第一種方式所定義的實(shí)例對(duì)象是擁有父類(lèi)的方法，也就是可以訪問(wèn)到原型鏈上面的屬性和方法的。

第二種方式定義則是因?yàn)樵趦?nèi)部新建了一個(gè)對(duì)象，那么父級(jí)對(duì)象什么的自然也就不存在了（當(dāng)然這里不是指object）。

最后再次加深對(duì)簡(jiǎn)單工廠模式的印象吧

簡(jiǎn)單工廠模式：又叫靜態(tài)工廠方法，由一個(gè)工廠對(duì)象決定創(chuàng)建某一種產(chǎn)品對(duì)象類(lèi)的實(shí)例

什么是工廠方法模式：通過(guò)對(duì)產(chǎn)品類(lèi)的抽象使其創(chuàng)建業(yè)務(wù)主要負(fù)責(zé)用于創(chuàng)建多類(lèi)產(chǎn)品的實(shí)例

懵？沒(méi)關(guān)系。繼續(xù)往下走

用途：可以屏蔽使用該類(lèi)的所造成的錯(cuò)誤

例子：

var Demo = function() {};
Demo.prototype.getName = function(){
    console.log("get success!")
}

var d = Demo();
d.getName();    //報(bào)錯(cuò)

//安全模式類(lèi)
var Demo = function() {
    if(!(this instanceof Demo)){
        return new Demo
    }
};
Demo.prototype.getName = function(){
    console.log("get success!")
}

var d = Demo();
d.getName();    //"get success!"

實(shí)際上工廠方法和簡(jiǎn)單工廠模式區(qū)別在于：簡(jiǎn)單工廠模式如果需要增加類(lèi)的話(huà)，那么它則需要改變兩處地方，一處是工廠函數(shù)，一處是改變類(lèi)。但是如果是工廠方法模式的話(huà)，則只需要往工廠方法中添加基類(lèi)則可以。代碼實(shí)現(xiàn)如下：

//安全模式創(chuàng)建的工廠類(lèi)
var superHeroFatory = function(type,skill){
    if(this instanceof superHeroFatory){
        var s = new this[type](skill);
        return s
    }else{
        return new superHeroFatory(type,skill)
    }
}
superHeroFatory.prototype = {
    IronMan: function(skill){
        this.name = "Iron Man";
        this.skill = skill;
        this.getName = function(){
            console.log(this.name);
        }
        this.getSkill = function(){
            console.log(this.skill);
        }
    },
    CaptainAmerica: function(skill){
        this.name = "Captain America";
        this.skill = skill;
        this.getName = function(){
            console.log(this.name);
        }
        this.getSkill = function(){
            console.log(this.skill);
        }
    }
}

var captainAmerica = superHeroFatory("CaptainAmerica","shield");
captainAmerica.getName();   //"Captain America"
captainAmerica.getSkill();  //"shield"

這個(gè)工廠方法模式解決了創(chuàng)建多類(lèi)對(duì)象所帶來(lái)的麻煩，這樣的工廠方法對(duì)象的方式也避免了使用者與對(duì)象類(lèi)之間的耦合，用戶(hù)不關(guān)心創(chuàng)建該對(duì)象的具體類(lèi)，只需調(diào)用工廠方法即可。

什么是抽象工廠模式：通過(guò)對(duì)類(lèi)的工廠抽象使其業(yè)務(wù)用于對(duì)產(chǎn)品類(lèi)簇的創(chuàng)建，而不負(fù)責(zé)創(chuàng)建其某一類(lèi)產(chǎn)品的實(shí)例

看著定義有點(diǎn)懵，沒(méi)關(guān)系。繼續(xù)往下走

概念：抽象類(lèi)是一種聲明但不能使用的類(lèi)，使用就會(huì)報(bào)錯(cuò)。

用途：定義一個(gè)產(chǎn)品簇，并聲明一些必備的方法，如果子類(lèi)沒(méi)有重寫(xiě)就會(huì)報(bào)錯(cuò)

例子：在java中可以簡(jiǎn)單定義，但是在js中的話(huà)暫時(shí)還沒(méi)有這種抽象類(lèi)的定義，于是我們可以用這種方式模仿抽象類(lèi)：

var Car = function() {};
Car.prototype = {
    getPrice(){
        return new Error("抽象方法不可用")
    },
    getName(){
        return new Error("抽象方法不可用")
    }
}

于是乎，在對(duì)象實(shí)例化后調(diào)用這些函數(shù)就會(huì)報(bào)錯(cuò)。因?yàn)槌橄箢?lèi)是沒(méi)有具體實(shí)現(xiàn)的，它只用作繼承的方式

說(shuō)明：為了更好的創(chuàng)建抽象類(lèi)，于是將抽象類(lèi)整合為一個(gè)抽象工廠

用途：用于創(chuàng)建抽象對(duì)象的一種方法

定義：

var VehicleFactory = function(subType,superType){
    if(typeof VehicleFactory[superType] === "function"){
        // 緩存類(lèi)
        function F() { };
        
        //繼承父類(lèi)屬性和方法
        F.prototype = new VehicleFactory[superType]();
        
        //子類(lèi)constructor指向子類(lèi)
        subType.constructor = subType;
        
        //子類(lèi)原型繼承“父類(lèi)”
        subType.prototype = new F();
    }else{
        throw new Error("未創(chuàng)建該抽象類(lèi)")
    }
}

//小汽車(chē)抽象類(lèi) 
VehicleFactory.Car = function(){
    this.type = "car";
}
VehicleFactory.Car.prototype = {
    getPrice(){
        return new Error("抽象方法不可用")
    },
    getName(){
        return new Error("抽象方法不可用")
    }
}

//大巴抽象類(lèi)
VehicleFactory.Bus = function(){
    this.type = "bus";
}
VehicleFactory.Bus.prototype = {
    getPrice(){
        return new Error("抽象方法不可用")
    },
    getName(){
        return new Error("抽象方法不可用")
    }
}

啥也別說(shuō)了，直接上碼

var BMW = function(price,name){
    this.price = price;
    this.name = name;
}
VehicleFactory(BMW,"Car");
BMW.prototype.getName = function(){
    console.log(this.name);
}

var X2 = new BMW(200,"X2");
X2.getName();   //"X2"
X2.getPrice();  //報(bào)錯(cuò)，因?yàn)橥浂x這個(gè)方法了

最后再次感受一下定義吧

抽象工廠模式：通過(guò)對(duì)類(lèi)的工廠抽象使其業(yè)務(wù)用于對(duì)產(chǎn)品類(lèi)簇的創(chuàng)建，而不負(fù)責(zé)創(chuàng)建其某一類(lèi)產(chǎn)品的實(shí)例

什么是建造者模式：將一個(gè)復(fù)雜對(duì)象的構(gòu)建層與其表示層相互分離，同樣的構(gòu)建過(guò)程可采用不同的表示

工廠模式主要是為了創(chuàng)建對(duì)象實(shí)例或者類(lèi)簇（抽象工廠），關(guān)心的是最終創(chuàng)建的是什么，而對(duì)創(chuàng)建的過(guò)程并不關(guān)心

建造者模式在創(chuàng)建對(duì)象時(shí)要更復(fù)雜，它更多的關(guān)心創(chuàng)建對(duì)象的過(guò)程甚至于每個(gè)細(xì)節(jié)?；蛘哒f(shuō)這種模式創(chuàng)建了一個(gè)復(fù)合對(duì)象

說(shuō)明：關(guān)心創(chuàng)建對(duì)象的過(guò)程，對(duì)于創(chuàng)建的具體實(shí)現(xiàn)的細(xì)節(jié)也參與了干涉

用途：當(dāng)需要我們創(chuàng)建對(duì)象不僅需要得到對(duì)象實(shí)例，還需對(duì)對(duì)象細(xì)化時(shí)，則可以使用建造者模式

代碼：

//創(chuàng)建類(lèi)
var Human = function(props){
    this.name = props && props.name || "保密";
}
Human.prototype.getName = function(){
    console.log(this.name);
}

//名字類(lèi)
var Name = function(name){
    var that = this;
    (function(name,that){
        that.wholeName = name;
        if(name.indexOf(" ") > -1){
            that.FirstName = name.slice(0,name.indexOf(" "));
            that.SecondName = name.slice(name.indexOf(" "));
        }
    })(name,that)
}


var Person = function(name){
    var _name = new Name(name);
    var _person = new Human({name:_name});
    return _person
}

var Miles = new Person("Miles Jiang");
Milse.getName();    //{wholeName: "Miles Jiang", FirstName: "Miles", SecondName: " Jiang"}

這種模式下，我們就可以關(guān)心到對(duì)象的創(chuàng)建過(guò)程。因此我們通常將創(chuàng)建對(duì)象模塊化，這樣使得被創(chuàng)建的類(lèi)的每個(gè)模塊都可以獲得靈活的運(yùn)用和高質(zhì)量的復(fù)用

什么是單例模式：又被稱(chēng)為單體模式，是只允許實(shí)例化一次的對(duì)象類(lèi)。有時(shí)我們也用一個(gè)對(duì)象來(lái)規(guī)劃一個(gè)命名空間，井井有條地管理對(duì)象上的屬性與方法

說(shuō)明：用來(lái)約束每個(gè)人定義的變量

用途：防止共同開(kāi)發(fā)時(shí)帶來(lái)的變量名沖突

例子：

var Miles = {
    getDom: function(id){
        return document.getElementById(id)
    }
}

為了梳理代碼，使得代碼有序整潔

本文章是通過(guò)學(xué)習(xí)張榮銘所著的《JavaScript設(shè)計(jì)模式》所總結(jié)。希望大家看完文章可以學(xué)到東西，同時(shí)也推薦大家去看看這本設(shè)計(jì)模式，寫(xiě)得很不錯(cuò)。

成功不在一朝一夕，我們都需要努力