軟體設計模式

淺淺一諾發表於2018-12-11
設計模式
  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
  • 中介者模式不主動推送通知，當學生需要寫作業的時候，需要找中介者拿，適合時效性不強的資訊。


相關文章