1.寫出 構(gòu)造函數(shù)模式、混合模式、模塊模式、工廠模式、單例模式、發(fā)布訂閱模式的范例。

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

function Person(name, age){
    this.name = name
    this.age = age
}
Person.prototype = {
    sayName: function(){
        console.log(this.name)
    }
}
var person1 = new Person('小王', 22)
person1.sayName() //小王

構(gòu)造函數(shù)模式是創(chuàng)建特定類型的對(duì)象的一種模式，把私有屬性綁定到函數(shù)內(nèi)部的this上，把一些共有方法寫到函數(shù)的原型鏈上, 然后通過new 關(guān)鍵字來(lái)創(chuàng)建一個(gè)實(shí)例對(duì)象。
工廠模式

function createPerson(name, age){
    var person = {
        name: name,
        age: age,
        sayName: function(){
            console.log(this.name)
        }
    }
    return person
}
var person1 = createPerson('小王', 22)
var person2 = createPerson('老王', 24)

工廠模式可以無(wú)數(shù)次地調(diào)用這個(gè)函數(shù)，在該例中都會(huì)返回一個(gè)包含2個(gè)屬性一個(gè)方法的對(duì)象。但不能解決對(duì)象的識(shí)別問題。

單例模式

var Person = (function(){
    var instance;
    function init(name){
        return {
            name: name
        }
    }
    return {
        createPerson: function(name){
            if (!instance) {
                instance = init(name)
            }
            return instance
        }
    }
})()
Person.createPerson('小王') //小王
Person.createPerson('小黃') //小黃

單例模式：保證一個(gè)類僅有一個(gè)實(shí)例，并提供一個(gè)訪問它的全局訪問點(diǎn)。

單例模式是一種常用的模式，節(jié)約內(nèi)存。有一些對(duì)象我們往往只需要一個(gè)。例如，當(dāng)我們點(diǎn)擊登錄按鈕時(shí)，頁(yè)面會(huì)彈出一個(gè)登錄懸浮窗，而這個(gè)登錄懸浮窗是唯一的，無(wú)論點(diǎn)擊多少次登錄按鈕，這個(gè)懸浮窗只會(huì)被創(chuàng)建一次，這時(shí)，這個(gè)懸浮窗就適合用單例模式來(lái)創(chuàng)建。

混合模式

function Person(name, age){
    this.name = name
    this.age = age
}
Person.prototype = {
    sayName: function(){
        console.log(this.name)
    }
}
function Student(name, age, score){
    Person.call(this, name, age)
    this.score = score
}
var fn = function(){}
fn.prototype = Person.prototype
Student.prototype = new fn()  //實(shí)現(xiàn)繼承

var a = new Student('chen', '24', 22)
a.sayName() //chen

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

模塊模式

var Person = (function(){
    var name = 'css'
    function sayName(){
        console.log(name)
    }
    return {
        name: name,
        sayName: sayName() //css
    }
})()  //通過閉包來(lái)實(shí)現(xiàn)一個(gè)模塊

使用立即執(zhí)行函數(shù)包裹代碼段，使內(nèi)部的私有變量和方法不會(huì)暴露出來(lái)，通過return函數(shù)給外部提供使用內(nèi)部方法的接口。
這樣的好處是不會(huì)污染全局變量，外部無(wú)法訪問或者改變模塊內(nèi)部的變量和方法。

2.使用發(fā)布訂閱模式寫一個(gè)事件管理器，可以實(shí)現(xiàn)如下方式調(diào)用

var Event = (function(){
    var events = {}  //儲(chǔ)存key:value
    function on(evt, handler){
        events[evt] = events[evt] || []
        //events['key'] = [{handler: function(){}}]
        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(evt){
        delete events[evt]
    }
    return {
        on: on,
        fire: fire,
        off: off,
    }
})()

image.png