JS实现前端常见设计模式

1. 单例模式
   概念：单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问点
   使用场景：有一些对象我们往往只需要一个，比如全局缓存、浏览器的window对象

// 单例模式
var single = function() {
    var instance = null
    var getInstance = function () {
        if (instance === null) {
            instance = new Constructor()
        }
        return instance
    }
    var Constructor = function () {
        this.name = 'hello'
    }
    return {
        getInstance:getInstance
    }
}()

2. 工厂模式
   概念：把相关的多个类提供一个统一入口的一个模式,让你从一个入口就可以获得多个类
   使用场景：
   （1）对象的构建十分复杂
   （2）需要依赖具体环境创建不同实例
   （3）处理大量具有相同属性的小对象

// 工厂模式
var Factory = function (type, payload) {
    // 解决 不在构造函数前面加上new的话,会报错的问题
    if (this instanceof Factory) {
        return new Factory(type, payload)
    }
    // 公用代码
    this.name = paylod.name
    return this[type](paylod)
}
// 非公用代码
Factory.prototype = {
    type1: function(payload) {
        //...
    },
    type2: function (payload) {
        // ...
    }
}

3. 抽象工厂模式
   概念：在父类里面设计好接口(没有具体实现),具体的实现等到了子类再重写
   使用场景：解决了子类实现不规范的问题

// 抽象工厂模式
var AbstractFactory = function () {}
AbstractFactory.prototype = {
    getName: function () {
        throw new Error('抽象方法不能调用')
    }
}
var aFactory = new AbstractFactory()
aFactory.getName()  //  Uncaught Error: 抽象方法不能调用
aFactory.getName = function () {
    return "jack"
}
aFactory.getName() //   "jack"

4. 观察者模式
   概念：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，又称作发布订阅模式
   使用场景：消息订阅，事件监听

function Publisher() {
    this.observers = []
    var state = {}
    this.getState = function () {
        return state
    }
    this.setState = function (newState) {
        state = newState
        this.notice()
    }
}

Publisher.prototype.addObserver = function (newObserver) {
    var isExist = false
    for (var i = 0; i < this.observers.length; i++) {
        if (newObserver === this.observers[i]) {
            isExist = true
            break
        }
    }
    if (!isExist)
        this.observers.push(newObserver)
    return this
}

Publisher.prototype.removeObserver = function (targetObserver) {
    for (var i = 0; i < this.observers.length; i++) {
        if (targetObserver === this.observers[i]) {
            this.observers.splice(i, 1)
            break
        }
    }
    return this
}

Publisher.prototype.notice = function () {
    for (var i = 0; i < this.observers.length; i++) {
            this.observers[i].update(this.getState())
    }
}

function Observer() {
    this.update = function (state) {
        // ...
    }
}

经典应用场景：实现 nodejs 中的 EventEmitter