前端工程师必须掌握的设计模式

构造函数模式 —— 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[出现两次]