JS实现前端常见设计模式

WEB前端 210 2018-10-24 16:54
  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
    }
}()
  1. 工厂模式
    概念:把相关的多个类提供一个统一入口的一个模式,让你从一个入口就可以获得多个类
    使用场景:
    (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) {
        // ...
    }
}
  1. 抽象工厂模式
    概念:在父类里面设计好接口(没有具体实现),具体的实现等到了子类再重写
    使用场景:解决了子类实现不规范的问题
// 抽象工厂模式
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"
  1. 观察者模式
    概念:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新,又称作发布订阅模式
    使用场景:消息订阅,事件监听
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

文章评论