JavaScript--监听者模式

好的代码是什么?我觉的是是:代码结构清晰、每个功能单一、方便测试、拿来就能用、解耦。

监听者模式前端那是天天接触的,比如常用的click事件(第一代事件只能算回调)。
不过除此之外还是很多地方需要用到的,比如书生开源的XXY库里面,轮播插件监听Gap滑动值,焦点返回。这样的话代码结构就很清晰。比一个更接近生活的例子。
你写了一个游戏,然后你有了别的任务,要让别人在游戏初始化之后再添加一个新的功能,他要阅读一遍代码才能知道再哪里加。

完整的监听者模式对象

// Tips 代码这段代码使用汤姆大叔写的
//通用代码
var observer = {
    //订阅
    addSubscriber: function (callback) {
        this.subscribers[this.subscribers.length] = callback
    },
    //退订
    removeSubscriber: function (callback) {
        for (var i = 0; i < this.subscribers.length; i++) {
            if (this.subscribers[i] === callback) {
                delete (this.subscribers[i])
            }
        }
    },
    //发布
    publish: function (what) {
        for (var i = 0; i < this.subscribers.length; i++) {
            if (typeof this.subscribers[i] === 'function') {
                this.subscribers[i](what)
            }
        }
    },
    // 将对象o具有观察者功能
    make: function (o) { 
        for (var i in this) {
            o[i] = this[i]
            o.subscribers = []
        }
    }
}

让我们监听一个对象吧。

var obj = {
    f: function(a){
        this.publish(a)
    }
}
observer .make(obj)

好了,开始订阅AND发布

// 订阅
obj.addSubscriber(function(e){
    console.log('pusb:'+e)
})
// 发布
obj.f('一条小道消息')

OK,好了。
--END--

你可能感兴趣的:(JavaScript--监听者模式)