简单的代码,读懂观察者模式和Promise

观察者模式

观察者模式又叫做发布订阅模式,其基础支撑是事件的发布与订阅。

– 基于观察者模式,可以做数据的绑定,代码的解耦。

一个简单的观察者模式代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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)
}
}
使用此代码
1
2
3
4
5
6
7
8
9
var observer = new Observer()

observer.subscribe('吃饭', function (stuff) {
console.log(stuff) // 成功打印面条
})

setTimeout(function () {
observer.publish('吃饭', '面条')
}, 2000)
代码的逻辑很简单
  1. subscribe的时候将要执行的函数放入存放函数的容器
  2. publish的时候根据事件的名称取出函数,并传入数据,执行

Promise

Promise是js异步的解决方案,通常用于ajax请求

继续编写简单的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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)
}
使用此代码
1
2
3
4
5
6
7
8
new Promise(function (resolve) {
setTimeout(function () {
resolve('apple')
}, 2000)
})
.then(function (stuff) {
console.log(stuff) // apple
})
Promise的关键点在于
  1. .then是给存放回调的容器里面添加回调函数
  2. resolvethen注册回调的执行者,所以当异步的时候,then要后于resolve执行。同样PubSub也可以用于异步
  3. Promise也是观察者模式的一种实现
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 使用事件发布订阅处理异步
    var observer = new Observer()

    observer.subscribe('吃饭', function (stuff) {
    console.log(stuff) // 面条
    })

    $.ajax({
    url: '饭堂'
    })
    .success(function(data) {
    observer.publish('吃饭', data['面条'])
    })
都可以轻松的实现异步的解耦

以上都是最简单的实现,二八定律中的二吧,有兴趣可以用es6写一个简单版的Promise

es6Promise