深入理解Javascript中的观察者模式(2)

他内部也都是各种发布订阅,好像是一个观察者模型,从而实现了一个模拟的内存中的dom改变,计算出那个DOM节点应该改变。当然具体实现要做好多事情…就不…

3、redux

简单实现一个createstore函数

//这是一个工厂函数,可以创建store const createStore = (reducer) => { let state; // 定义存储的state let listeners = []; // getState的作用很简单就是返回当前是state const getState = ()=> state; //定义一个派发函数 //当在外界调用此函数的时候,会修改状态 const dispatch = (action)=>{ //调用reducer函数修改状态,返回一新的状态并赋值给这个局部状态变量 state = reducer(state,action); //依次调用监听函数,通知所有的监听函数 listeners.forEach(listener => listener()); } //订阅此状态的函数,当状态发生变化的时候记得调用此监听函数 const subscribe = function(listener){ //先把此监听 加到数组中 listeners.push(listener); //返回一个函数,当调用它的时候将此监听函数从监听数组移除 return function(){ listeners = listeners.filter(l => l != listener); } } //默认调用一次dispatch给state赋一个初始值 dispatch(); return { getState, dispatch, subscribe } } let store = createStore(reducer); //把数据渲染到界面上 const render = () => { document.body.innerText = store.getState(); } // 订阅状态变化事件,当状态变化时用监听函数 store.subscribe(render); render(); var INCREASE_ACTION = {type: 'INCREMENT'}; document.addEventListener('click', function (e) { //触发一个Action store.dispatch(INCREASE_ACTION); })

4、在node 中的作用 大多数时候我们不会直接使用 EventEmitter,而是在对象中继承它。包括fs、net、 http 在内的,只要是支持事件响应的核心模块都是 EventEmitter 的子类。

实现一个可以发布订阅的类

'use strict' class EmitterEvent { constructor() { //构造器。实例上创建一个事件池 this._event = {} } //on 订阅 on (eventName, handler) { // 根据eventName,事件池有对应的事件数组, 就push添加,没有就新建一个。 // 严谨一点应该判断handler的类型,是不是function if(this._event[eventName]) { this._event[eventName].push(handler) } else { this._event[eventName] = [handler] } } emit (eventName) { // 根据eventName找到对应数组 var events = this._event[eventName]; // 取一下传进来的参数,方便给执行的函数 var otherArgs = Array.prototype.slice.call(arguments,1) var that = this if(events) { events.forEach((event) => { event.apply(that, otherArgs) }) } } // 解除订阅 off (eventName, handler) { var events = this._event[eventName] if(events) { this._event[eventName] = events.filter((event) => { return event !== handler }) } } // 订阅以后,emit 发布执行一次后自动解除订阅 once (eventName, handler) { var that = this function func () { var args = Array.prototype.slice.call(arguments,0) handler.apply(that, args) this.off(eventName,func) } this.on(eventName, func) } } var event = new EmitterEvent() function a (something) { console.log(something,'aa-aa') } function b (something) { console.log(something) } event.once('dosomething',a) event.emit('dosomething', 'chifan') //event.emit('dosomething') // event.on('dosomething',a) // event.on('dosomething',b) // event.emit('dosomething','chifan') // event.off('dosomething',a) // setTimeout(() => { // event.emit('dosomething','hejiu') // },2000)

当我们需要用的时候,只需要继承一下这个EmitterEvent类。要操作的实例就可以用on,emit方法,也就是可以用发布订阅。比如XHR,组件…

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwzsjf.html