node.js學習筆記之淺談觀察者模式

在我的理解中,觀察者模式,又叫發佈/訂閱模式,是一種是一種很便捷的用於不同模塊之間相互通信的一種方式,類似於事件又不同於事件。

在我目前的理解中,觀察者模式應該有三個部分組成,發佈者,訂閱者,管理平臺,發佈者發佈信息到管理平臺,管理平臺收集到信息之後分發給訂閱者,用更淺白的語言來形容我對觀察者模式的理解就是函數調用,在不同模塊之間通過函數調用進行通信。

言語之間不太好解釋,還是來看看代碼,可以更快的理解我所說的意思,先看管理平臺是如何工作的:

let event = [];
class Test{
	static addEvent(type,fn){
		if(!event[type]){
			event[type] = [fn];
		}else{
			event[type].push(fn);
		}
	}
	static dispath(type){
		let s = [] ,i=1;
		while (arguments[i])
		{
			s.push(arguments[i]);
			i++;
		}
		if(!event[type]){
			console.error('no Event!');
		}else{
			for(let i = 0;i<event[type].length;i++){
				event[type][i](...s);
			}
		}
	}
}

我這裏起名字的時候是用了Event的那一套名字,但和Event那一套其實沒有什麼關係,完全可以換成不同的名字。

看上面的代碼:

let event = [];

這是一個數組,用來存放訂閱者的信息,也就是訂閱的事件類型,和觸發函數,最終所形成的樣式是這樣的:

[
    'type1' : [fn1,fn2,fn3],
    'type2' : [fn4],
    'type3' : [fn5,fn6]
]

實際上就是有三個訂閱者訂閱type1,觸發事件分別爲fn1,fn2,fn3,後面等同。當發佈者發佈type1的時候,就會調用函數fn1,fn2,等等。

因爲訂閱者須要提前訂閱才能接收到被訂閱的內容,所以,我們先看訂閱者是如何訂閱的:

static addEvent(type,fn){
		if(!event[type]){
			event[type] = [fn];
		}else{
			event[type].push(fn);
		}
	}

在node.js中我們聲明瞭一個類名爲Test,裏面有個靜態方法 addEvent,兩個參數,第一個是訂閱的事件類型,第二個是觸發函數,當還沒有人訂閱該事件的時候,就先創建該事件的函數空間,實際上就是一個數組,把事件名當索引,把觸發事件存到該索引的元素下,如果已經有人訂閱了該事件,就直接把觸發事件push到對應索引的元素下。這樣就可以記錄下所有訂閱者訂閱的事件了。


然後是發佈者發佈事件:

static dispath(type){
		let s = [] ,i=1;
		while (arguments[i])
		{
			s.push(arguments[i]);
			i++;
		}
		if(!event[type]){
			console.error('no Event!');
		}else{
			for(let i = 0;i<event[type].length;i++){
				event[type][i](...s);
			}
		}
	}

這也是一個靜態函數,是用來把發佈者發佈的消息分發到每一個訂閱者,while循環中是對參數的處理,把除第一個參數之外的所有參數集中到一個數組裏,方面後面展開,這樣可以還原到發佈消息時的參數順序,方面訂閱者更好的接收參數,然後就是在所有的訂閱者中找到第一個參數(也就是發佈者發佈的事件)所對應的所有觸發函數,然後循環調用一次並把除事件之外的參數傳過去。


這樣的話,管理平臺就組建好了。下面就是訂閱,因爲不先訂閱是不可能收到發佈者發佈的消息的。

Test.addEvent('A',function (name,age){
	console.log('hello,this is "A" Event 1,has arg:','name:',name,'age:',age);
});
Test.addEvent('B',function (num){
	console.log('hello,this is "B" Event 2,has arg:',num);
});
Test.addEvent('C',function (obj){
	console.log('hello,this is "C" Event 3,has arg:',obj);
});
Test.addEvent('D',function (arr){
	console.log('hello,this is "D" Event 4,has arg:',arr);
});
Test.addEvent('E',function (date){
	console.log('hello,this is "E" Event 5,has arg:',date);
});

上面我們訂閱了五個事件,每個事件所要接收的參數類型都不一樣。並且訂閱類型A須要接收兩個參數,

訂閱是不是很簡單?好吧,其實發布者更簡單:

Test.dispath('A','xiaoming',17);
Test.dispath('B',123);
Test.dispath('C',{say:'hello word'});
Test.dispath('D',[1,2,3]);
Test.dispath('E',new Date());

發佈事件ABCDE,後面跟上發佈的內容,然後訂閱者就可以接發佈時的順序來接收參數。在項目中的不同模塊之間進行通信就變得非常簡單了。

到了這裏,我想大家應該也都發現了我所說的訂閱/發佈 實際上就是函數調用是怎麼回事了,訂閱者把將要因事件而被觸發的函數通過函數調用傳到管理平臺上,發佈者把須要發佈的事件也通過函數調用傳到管理平臺上,然後管理平臺則根據不同的事件調用不同的函數。

代碼不夠精練,格式不夠標準......

好吧,完了。

------------------------------------------------------------------------------------

另外,記錄一點和該話題沒多大關係但用到的一點內容,就是參數傳遞那一塊,因爲管理平臺不能確定發佈者會傳多少參數進來,所以用到了Node.js的一個特性:arguments,在node.js中不論函數有有沒有聲明接收的參數,每個函數中都會有一個局部變量arguments,它是一個object對象,會把外界調用該函數時所傳進來的參數整合進來,然後把傳參的順序做爲屬性,比如上面的A事件,在管理平臺的dispath函數中arguments就是這個樣子的:

{
    '0' : 'A',
    ‘1’:‘xiaoming’,
    '2' : 17
}

對象直接用  ...  這個符號拆分的話會報錯,所以我把arguments用while重新組合成了數組,然後用 ...符號來拆分數組再進行參數傳遞。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章