一肋联、6種設(shè)計模式

構(gòu)造函數(shù)constructor模式

構(gòu)造函數(shù)模式是創(chuàng)建特定類型的對象的一種模式古戴，把私有屬性綁定到函數(shù)內(nèi)部的this上，把一些私有方法寫到函數(shù)的原型鏈上, 然后通過new 關(guān)鍵字來創(chuàng)建一個實例對象。每個實例都會有自己的一份實例屬性饮睬，但同時又共享著方法，最大限度的節(jié)省了內(nèi)存篮奄。

//1.構(gòu)造函數(shù)模式
function Person(name,age){
    this.name = name;
    this.age = age;
}//方法都寫在原型鏈上面
Person.prototype.sayName = function(){
    return this.name;
}
var student = new Person('yuhuan',24)//每次new創(chuàng)建一個新的引用

工廠模式factory

需要一個對象的時候可以通過這個函數(shù)創(chuàng)建一個對象捆愁，
但是這個對象沒有構(gòu)造函數(shù)，無法用 instanceof 的方法判斷是否為實例窟却。

//2.工廠模式factory
//對象是引用類型昼丑，存儲在堆內(nèi)存中，工廠模式的關(guān)鍵點是每次創(chuàng)建一個新的引用
function createPerson(name){
    var person={
      name: name,
      sayName: function(){console.log(this.name)}
    }
    return person;
}
createPerson('yuhuan')
createPerson('yuhuan').sayName() //createPerson('yuhuan') return出來一個對象person夸赫，方法調(diào)用菩帝，this指向調(diào)用方person
var t = createPerson('yuhuan').sayName;
t()//函數(shù)調(diào)用模式，t是函數(shù)茬腿，this指向window

因為不實現(xiàn)繼承呼奢，創(chuàng)建100次，就會有100個sayName方法

單例模式

保證一個類僅有一個實例切平，并提供一個獲得該實例的方法握础。
js中，每個對象字面量都可以看做是一個單例揭绑。

var singleton = {
        attr : 1,
        method : function(){ return this.attr; }
    }
var t1 = singleton ;
var t2 = singleton ;
t1 === t2 //true
t1.method() //1

單例模式的思路是：一個類能返回一個對象的引用（并且永遠是同一個）和一個獲得該實例的方法（靜態(tài)方法弓候，通常使用 getInstance 名稱）。那么當(dāng)我們調(diào)用這個方法時他匪，如果類持有的引用不為空就返回該引用菇存，否者就創(chuàng)建該類的實例，并且將實例引用賦值給該類保持的那個引用再返回邦蜜。同時將該類的構(gòu)造函數(shù)定義為私有方法依鸥，避免其他函數(shù)使用該構(gòu)造函數(shù)來實例化對象，只通過該類的靜態(tài)方法才能得到該類的唯一實例悼沈。

實現(xiàn)單例核心思想
使用數(shù)據(jù)緩存來存儲該單例贱迟，用作判斷單例是否已經(jīng)生成姐扮，是單例模式主要的實現(xiàn)思路。以下使用閉包方式來模擬私有數(shù)據(jù)衣吠。var instance相當(dāng)于People內(nèi)部的一個變量茶敏，不能被外界看到，這就是閉包的作用缚俏，模塊化惊搏，隱藏變量。

//3.單例模式singleton,常用來寫對話框dialog,每次彈出來的對話框就是同一個
var People = (function(){
    var instance;
    function createPerson(name){
      if(!instance){
        instance = new Init(name)
      }
      return instance;
    }
    function Init(name){
       this.name = name;
    } 
    return {
        createPerson: createPerson
    }
})()
var p1 = People.createPerson('yuhuan')
var p2 = People.createPerson('tang')
p1===p2 //true

混合模式mixing

建立在構(gòu)造函數(shù)模式的基礎(chǔ)上忧换，實現(xiàn)子類繼承父類的屬性和方法恬惯，子類可以在擴展屬性和方法。

//4.混合模式mixing
function inherit(superType, subType){
    subType.prototype  = Object.create(superType.prototype);
    subType.prototype.constructor = subType;
}
#使用方法
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
};    

function Male(name, sex, age){
    Person.call(this, name, sex);
    this.age = age;
}
inherit(Person, Male);

// 在繼承函數(shù)之后寫自己的方法亚茬，否則會被覆蓋
Male.prototype.printAge = function(){
    console.log(this.age);
};

var m = new Male('Byron', 'm', 26);
m.printName();

模塊模式module

閉包來實現(xiàn)
使用立即執(zhí)行函數(shù)包裹代碼段酪耳，使內(nèi)部的私有變量和方法不會暴露出來，通過return函數(shù)給外部提供使用內(nèi)部方法的接口刹缝。
這樣的好處是不會污染全局變量碗暗，外部無法訪問或者改變模塊內(nèi)部的變量和方法。

//5.模塊模式module  一個模塊往往代表了一個封閉的作用域
var Person = (function(){
    var name = 'yuhuan'
    function sayName(){
        console.log(name)
    };//詞法作用域
    return{
        name:name,
        sayName: sayName
    }
})()
使用：
Person.sayName();// yuhuan
Person.name;//yuhuan

發(fā)布訂閱模式（觀察者模式）publish/subscribe

觀察者模式又叫發(fā)布訂閱模式（Publish/Subscribe）赞草，一個訂閱者對象訂閱發(fā)布者對象的特定活動讹堤，并在發(fā)布者對象的狀態(tài)發(fā)生改變后，訂閱者對象獲得通知厨疙。訂閱者也稱為觀察者，而被觀察的對象稱為發(fā)布者或主題疑务。
當(dāng)發(fā)生了一個重要的事件時沾凄，發(fā)布者將會通知（調(diào)用）所有訂閱者，并且可能經(jīng)常以事件對象的形式傳遞消息知允。（瀏覽器的事件也是觀察者模式）

使用觀察者模式撒蟀，可以自定義發(fā)布事件，事件處理函數(shù)温鸽，通過訂閱事件來觸發(fā)事件保屯，執(zhí)行函數(shù)。

/*6.發(fā)布訂閱模式publish/subscribe
瀏覽器控制臺運行演示：
EventCenter.on('hello',function(){ //發(fā)布'hello'
    console.log('hi')
})
EventCenter.fire('hello')//訂閱'hello'涤垫，得到輸出結(jié)果hi   
*/
var EventCenter = (function(){
    var events = {};//用來存儲所有的key/value
    //('hello',function(){})
    function on(evt,handler){
        //events['hello'] = []
        //然后 events['hello'] = [{
        //  handler: handler;
        //}]
        events[evt] = events[evt] || []
        events[evt].push({
            handler: handler
        });
    }
    function fire(evt,args){
        if(!events[evt]){
            return;
        }
        for(var i=0; i<events[evt].length;i++){
            events[evt][i].handler(args)
        }
    }
    function off(name){
        delete events[name]
    }
    //暴露出的api
    return {
        on: on,
        fire: fire,
        off: off//取消訂閱
    }
})();

二姑尺、使用發(fā)布訂閱模式寫一個事件管理器，實現(xiàn)如下方式調(diào)用

EventCenter.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
EventCenter.fire('change', '饑人谷');
EventCenter.off('change');

#發(fā)布訂閱模式
var EventCenter = (function(){
    var events = {};//用來存儲所有的key/value
    function on(evt,handler){
        events[evt] = events[evt] || []
        events[evt].push({
            handler: handler
        });
    }
    function fire(evt,args){
        if(!events[evt]){
            return;
        }
        for(var i=0; i<events[evt].length;i++){
            events[evt][i].handler(args)
        }
    }
    function off(name){
        delete events[name]
    }
    //暴露出的api
    return {
        on: on,
        fire: fire,
        off: off//取消訂閱
    }
})();