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

·  阅读 216

观察者模式(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'});
});
复制代码
分类:
前端
标签: