观察者模式
观察者模式又叫做发布订阅模式,其基础支撑是事件的发布与订阅。
– 基于观察者模式,可以做数据的绑定,代码的解耦。
一个简单的观察者模式代码示例:
function Observer() {
// 容器,存放subscribe订阅的内容
this.subscribes = {
}
}
Observer.prototype = {
constructor: 'Observer',
// 往容器放东西
subscribe: function (eventName, callback) {
this.subscribes[eventName] = callback
},
// 取函数,执行
publish: function (eventName, stuff) {
// 把订阅的东西取出来
// 执行
this.subscribes[eventName](stuff)
}
}
使用此代码
var observer = new Observer()
observer.subscribe('吃饭', function (stuff) {
console.log(stuff) // 成功打印面条
})
setTimeout(function () {
observer.publish('吃饭', '面条')
}, 2000)
代码的逻辑很简单
- subscribe的时候将要执行的函数放入存放函数的容器
- publish的时候根据事件的名称取出函数,并传入数据,执行
Promise
Promise是js异步的解决方案,通常用于ajax请求
继续编写简单的代码
function Promise(executor) {
// 容器,存放then订阅的东西
this._deferreds = []
var _this = this
// 承诺被执行
function resolve(stuff) {
// 取出存的东西
_this._deferreds.forEach(function (deferred) {
// 执行
deferred(stuff)
})
}
// Promise传入的函数,执行时将resolve传进去
executor(resolve)
}
Promise.prototype.then = function (onFulfilled) {
// 往里面放东西
this._deferreds.push(onFulfilled)
}
使用此代码
new Promise(function (resolve) {
setTimeout(function () {
resolve('apple')
}, 2000)
})
.then(function (stuff) {
console.log(stuff) // apple
})
Promise的关键点在于
- .then是给存放回调的容器里面添加回调函数
- resolve是then注册回调的执行者,所以当异步的时候,then要后于resolve执行。同样PubSub也可以用于异步
- Promise也是观察者模式的一种实现
// 使用事件发布订阅处理异步
var observer = new Observer()
observer.subscribe('吃饭', function (stuff) {
console.log(stuff) // 面条
})
$.ajax({
url: '饭堂'
})
.success(function(data) {
observer.publish('吃饭', data['面条'])
})