JS 设计模式-发布订阅与观察者模式

JS 设计模式之发布订阅模式

	// 发布/订阅模式
	function EventEmit(){
    
    
	  this._arr = [];
	}
	// 订阅
	EventEmit.prototype.on = function(callBack){
    
    
	  this._arr.push(callBack)
	}
	// 取消订阅
	EventEmit.prototype.unon = function(callBack){
    
    
	  this._arr.filter(fn=>{
    
    
	    if(fn !== callBack){
    
    
	      return fn;
	    }
	  })
	}
	// 发布
	EventEmit.prototype.emit = function(){
    
    
	  this._arr.forEach(fn=>fn.apply(this, arguments))
	}
	
	let fn = new EventEmit();
	let obj = {
    
    };
	
	fn.on(function(data,key){
    
    
	  obj[key] = data;
	  if(Object.keys(obj).length==2){
    
    
	    console.log(obj)
	  }
	})
	
	fn.emit('张三', 'name' )
	fn.emit(18,'age')

JS 设计模式之观察者模式

	// 被观察者/服务
	class Serve {
    
    
	  constructor(){
    
    
	    this._arr = []
	  }
	  attch(callBack){
    
    
	    this._arr.push(callBack)
	  }
	  setState(val){
    
    
	    this._arr.forEach(fn=>{
    
    
	      fn.update(val)
	    })
	  }
	}
	
	// 观察者
	class Observe {
    
    
	  constructor(props){
    
    
	    this.state = props;
	  }
	  update(val){
    
    
	    console.log('name-',this.state, 'datra-',val)
	  }
	}
	
	// 新建观察者
	let o1 = new Observe('name1')
	let o2 = new Observe('name2')
	
	// 新建服务
	let server = new Serve();
	
	// 为服务添加观察者；
	server.attch(o1) // name- name1 datra- asdfasd
	server.attch(o2) // name- name2 datra- asdfasd
	
	// 服务运行观察者记录到
	server.setState('asdfasd')

发布/订阅模式和观察者模式的区别在于：

发布订阅模式是发布和订阅相互独立的，耦合度较松；
观察者模式是将观察者耦合到服务内部，消息触发之后会通知/执行观察者的操作；