觀察者模式

觀察者模式又叫做釋出訂閱模式，其基礎支撐是事件的釋出與訂閱。

– 基於觀察者模式，可以做資料的繫結，程式碼的解耦。

一個簡單的觀察者模式程式碼示例：

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)

程式碼的邏輯很簡單

1. subscribe的時候將要執行的函式放入存放函式的容器
2. 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的關鍵點在於

1. .then是給存放回調的容器裡面添加回調函式
2. resolve是then註冊回撥的執行者，所以當非同步的時候，then要後於resolve執行。同樣PubSub也可以用於非同步
3. Promise也是觀察者模式的一種實現

// 使用事件釋出訂閱處理非同步
var observer = new Observer()

observer.subscribe('吃飯', function (stuff) {
    console.log(stuff) // 麵條
})

$.ajax({
   url: '飯堂'
})
.success(function(data) {
  observer.publish('吃飯', data['麵條'])
})

都可以輕鬆的實現非同步的解耦

以上都是最簡單的實現，二八定律中的二吧，有興趣可以用es6寫一個簡單版的Promise