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

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

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

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

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

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

代碼：

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

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

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

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

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

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();   //"喵"

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

第一種方式所定義的實例對象是擁有父類的方法，也就是可以訪問到原型鏈上面的屬性和方法的。

第二種方式定義則是因為在內(nèi)部新建了一個對象，那么父級對象什么的自然也就不存在了（當然這里不是指object）。

最后再次加深對簡單工廠模式的印象吧

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

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

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

用途：可以屏蔽使用該類的所造成的錯誤

例子：

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

var d = Demo();
d.getName();    //報錯

//安全模式類
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!"

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

//安全模式創(chuàng)建的工廠類
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"

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

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

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

概念：抽象類是一種聲明但不能使用的類，使用就會報錯。

用途：定義一個產(chǎn)品簇，并聲明一些必備的方法，如果子類沒有重寫就會報錯

例子：在java中可以簡單定義，但是在js中的話暫時還沒有這種抽象類的定義，于是我們可以用這種方式模仿抽象類：

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

于是乎，在對象實例化后調(diào)用這些函數(shù)就會報錯。因為抽象類是沒有具體實現(xiàn)的，它只用作繼承的方式

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

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

定義：

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

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

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

啥也別說了，直接上碼

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();  //報錯，因為忘記定義這個方法了

最后再次感受一下定義吧

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

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

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

建造者模式在創(chuàng)建對象時要更復(fù)雜，它更多的關(guān)心創(chuàng)建對象的過程甚至于每個細節(jié)。或者說這種模式創(chuàng)建了一個復(fù)合對象

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

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

代碼：

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

//名字類
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)心到對象的創(chuàng)建過程。因此我們通常將創(chuàng)建對象模塊化，這樣使得被創(chuàng)建的類的每個模塊都可以獲得靈活的運用和高質(zhì)量的復(fù)用

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

說明：用來約束每個人定義的變量

用途：防止共同開發(fā)時帶來的變量名沖突

例子：

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

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

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

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