观察者模式和订阅发布模式

观察者模式（subject/observers）

所谓观察者模式，其实就是为了实现松耦合(loosely coupled)。 举个例子，当数据有更新，如 changed() 方法被调用，用来更新 state 数据，比如温度、气压等等。这样写的问题是，如果想更新更多的信息，比如说湿度，那就要去修改 changed() 方法的代码，这就是紧耦合的坏处。对于观察者模式，我们仅仅维护一个可观察者对象即可，即一个 Observable 实例，当有数据变更时，它只需维护一套观察者（Observer）的集合，这些 Observer 实现相同的接口，Subject 只需要知道，通知 Observer 时，需要调用哪个统一方法就好了。如下图：

发布订阅模式 （Publisher / Subscriber）

在发布订阅模式里，发布者，并不会直接通知订阅者，换句话说，发布者和订阅者，彼此互不相识。那他们之间如何交流？答案是，通过第三者触发，也就是在消息队列里面，发布者和订阅者通过事件名来联系，匹配上后直接执行对应订阅者的方法即可。如图：与观察者模式不一样，发布订阅模式里，发布者和订阅者，不是松耦合，而是完全解耦的。最后，附一张图总结一下：观察者模式里，只有两个角色 —— 观察者 + 被观察者而发布订阅模式里，却不仅仅只有发布者和订阅者两个角色，还有一个管理并执行消息队列的“经纪人Broker”再者观察者和被观察者，是松耦合的关系发布者和订阅者，则完全不存在耦合

redux 观察者模式

function createStore(reducer) {
    var state;
    var listeners = [];
    var getState = () => state;
    var dispatch = (action) => {
        state = reducer(state, action);
        listeners.forEach(l=>l());
    }
    var subscribe = (listener) => {
        listeners.push(listener);
        return () => {
            listeners = listeners.filter((l) => l != listener)
        }
    }
    dispatch();
    return {
        getState, dispatch, subscribe
    }
}
var reducer = (state = 0, action) => {
    if (!action) return state;
    console.log(action);
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}
var store = createStore(reducer);
store.subscribe(function () {
    document.querySelector('#counter').innerHTML = store.getState();
});
// listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。
// function listerner() {
//   let newState = store.getState();
//   component.setState(newState);   
// }

document.querySelector('#addBtn').addEventListener('click', function () {
    store.dispatch({type: 'INCREMENT'});
});
document.querySelector('#minusBtn').addEventListener('click', function () {
    store.dispatch({type: 'DECREMENT'});
});