欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

软件设计模式

程序员文章站 2024-02-09 15:50:10
...
  1. 观察者模式
  • 概念:观察者模式又被称为发布-订阅者模式,在此种模式中,一个目标物体管理所有依赖于它的观察者物件,并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者 所提供的方法来实现。此种模式通常被用来实现事件处理系统。
  • 例子:

                     /*观察者模式*/
		    //例:人民币对其他货币率
		    
		    //人民币类
		    function Rmb(){
		    	this.listener = [];
		    	this.init();
		    	this.bindEvent();
		    };
		    Rmb.prototype.regist = function(obj){//注册
		    	this.listener.push(obj);
		    };
		    Rmb.prototype.init = function(){//初始化
				this.p = document.createElement('p');
		    	this.p.innerHTML = '人民币:';
		    	this.input = document.createElement('input');
		    	this.p.appendChild(this.input);
		    	document.body.appendChild(this.p);
		    }
		    Rmb.prototype.bindEvent = function(){
		    	let self = this;
                        //通过循环调用被观察者的事件
		    	this.input.oninput = function(){
		    		for(let i=0;i<self.listener.length;i++){
		    			self.listener[i].listen(this.value);
		    		};
		    	};
		    };
		    //其他货币类
		    function Waibi(name,huilv){
		    	this.name = name;
		    	this.huilv = huilv;
		    	//观察者模式的要求就是去观察者那里注册自己
		    	rmb.regist(this);
		    	this.init();
		    	
		    };
		    Waibi.prototype.init = function(){
		    	this.p = document.createElement('p');
		    	this.p.innerHTML = this.name + ':';
		    	this.input = document.createElement('input');
		    	this.p.appendChild(this.input);
		    	document.body.appendChild(this.p);
		    };
		    Waibi.prototype.listen = function(content){
		    	this.input.value = content/this.huilv;
		    };
		    
		    let rmb = new Rmb();
		    new Waibi('美元',6);
		    new Waibi('日元',0.006);
		    new Waibi('泰铢',0.2);
		    new Waibi('欧元',10);
		    new Waibi('韩元',0.05);复制代码

2.中介者模式

  • 概念:中介者模式,定义了一个中介对象来封装一系列交互对象之间的交互关系。中介者使各个对象之前不需要显示的相互引用,从而使耦合性降低,而且可以单独改变他们之间的交互行为。
  • 例子:

                        /*中介者模式*/
			//qq群类
			function QQQun(){
				this.zuoye = '';
			};
			
			//老师类
			function Teacher(){
			};
			Teacher.prototype.liuzuoye = function(content){
				qqqun.zuoye = content;
			};
			
			//学生类
			function Student(){
			};
			Student.prototype.xiezuoye = function(){
				alert('我要写作业了!' + qqqun.zuoye)
			};
			
			let qqqun = new qqqun();//先实例化中介者
			let xiaoming = new Student();
			let xiaohong = new Student();
			let kaola = new Teacher();
			
			kaola.liuzuoye('完成贪吃蛇');
			xiaoming.xiezuoye();
			xiaohong.xiezuoye();
复制代码

总结:

  1. 观察者模式的精髓在于‘主动通知’,当老师的状态改变时,能够实时的通知学生,通过调用学生的方法来实现的;中介者简单一点不能主动通知,老师要发布作业,发布到qq群就行了,学生看作业是啥,此时去qq群看就行了。
  2. 两个模式的区别: 
  • 观察者模式能够主动推送信息,每个收听者能够实时的接收到发布者的消息,所以适合制作汇率转换,fyappybird
  • 中介者模式不主动推送通知,当学生需要写作业的时候,需要找中介者拿,适合时效性不强的信息。


转载于:https://juejin.im/post/5c0f4ae85188252346020ae3