前端工程師必須掌握的設計模式

bluesboneW發表於2018-04-18
前端工程師設計模式

建構函式模式 —— Constructor

建構函式相信大家都不會陌生
在JS裡，我們對建構函式使用new來新增例項

核心

1.將屬性繫結到this上
2.將方法繫結到prototype上
3.使用new來新增例項【建立不同的引用型別】

案例

function People() {
    this.name = '人'
}

People.prototype.walk = function () {
    console.log('walk')
}

let xiaoming = new People()

工廠模式 —— Factory

顧名思義，工廠模式就是像是工廠一樣流水線般生產處一個個物件

核心

1.return一個物件
2.建立不同的引用型別

案例

function createPerson() {
    // 定義工廠
    let person = {
        name: '人',
        walk: function () {
            console.log('walk')
        }
    }
    
    return person // 返回一個物件
}

let xiaoming = createPerson() // 工廠生產物件

單例模式 —— Singleton

核心

1.產生一個類的唯一例項
2.好處就是節約記憶體

案例

function createPeople() {
    let name
    return function (userName) {
        return name || (name = userName)
    }
}

let single = createPeople()
console.log(single('人')) // '人'
// 不管再傳遞任何值，也只會返回 '人'
console.log(single('馬')) // '馬'

混合模式 —— Mixin

核心

1.在JS中，一般我們實現繼承的過程就是混合模式
2.其概念就是提供能夠被一個或者一組子類簡單繼承功能的類

案例

function People(name, age) {
    this.name = name
    this.age = age
}

People.prototype.sayName = function () {
    console.log(this.name)
}

function Student(name, age, score) {
    People.call(this, name, age)
    this.score = score
}

function create(prototypeObj) {
    let empty = function () {}
    empty.prototype = prototypeObj
    return new empty()
    // return值如下
    // {
    //     __proto__:prototypeObj
    // }
}

Student.prototype = create(People.prototype)

Student.prototype.work = function () {
    console.log('work')
}

模組模式 —— Module

核心

在js中，常常使用閉包的形式來實現

案例

let Person = !(function () {
    let name = '小明'
    function sayName() {
        console.log(name)
    }

    return {
        name: name,
        sayName: sayName
    }
})()

釋出訂閱模式 —— Publish/Subscribe

核心

比如我【訂閱者】現在訂閱了一個公眾號，公眾號【釋出者】向我釋出訊息

案例

實現一個jQuery的釋出訂閱案例

// 訂閱者
$('div').on('click',function () {})

// 釋出者
$('header').on('click',function () {
    $('div').trigger('click')
})

程式碼

let EventCenter = (function () {
    let events = {}

    function on(evt, handler) {
        // 實現監聽效果

        // 使用'或'是為了可以對同一個事件多次進行回撥
        events[evt] = events[evt] || []
        events[evt].push({
            handler: handler
        })
    }

    function fire(evt, args) {
        if (!events[evt]) {
            // 如果未監聽任何事件，直接中斷
            return
        }
        for (let i = 0; i < events[evt].length; i++) {
            // 遍歷，實現對同一個事件的多次回撥
            events[evt][i].handler(args)
        }
    }

    function off(name) {
        delete events[name]
    }

    return {
        on: on, // 訂閱者
        fire: fire, // 釋出者
        off: off // 取消訂閱
    }
})()

EventCenter.on('hello', function (num) {
    console.log(num)
})
EventCenter.on('hello', function (num) {
    console.log(num)
})

EventCenter.fire('hello', 1) // 1[出現兩次]

相關文章