學習之前先看一張圖.

這張圖片很形象的說明了觀察者模式的工作原理.其中最左邊那臺電腦是信號發起者,我們叫它廣播者,所有電腦都是信息接受者(包括最左邊的廣播者).我們稱之為監聽者.唯一的缺憾是這張圖片是并聯模式,而我們的觀察者模式是串聯模式.至于并聯和串聯,學過初中物理的人就知道,這里不贅述.

下面通過一段js腳本來模擬這個圖片的過程,來說明我們這篇文章的主題:javascript 的觀察者模式

[javascript] var hub = { listeners : [], addListener : function(listener){ hub.listeners.push(listener); return hub.addListener; }, broadcast : function(broadcaster,method){ for(i=0;i<hub.listeners.length;i++){ if(broadcaster===hub.listeners[i]){ console.log(broadcaster+'is broadcaster'); } if(hub.listeners[i][method]) hub.listeners[i][method](); } } } var computer1 = {}, computer2 = {}, computer3 = {}; computer1.receive = function(){ console.log('computer1 receive the signal!111'); } computer2.receive = function(){ console.log('computer2 receive the signal!222'); } computer3.receive = function(){ console.log('computer3 receive the signal!333'); } //添加接收信號電腦,使其具有接收信號能力 hub.addListener(computer1)(computer2)(computer3); //由computer1廣播名叫receive的信號,說白了就是通知全部有接收信號能力的電腦:我要廣播這個函數了,如果你有這個函數請執行它. hub.broadcast(computer1,'receive'); [/javascript]

以上就是一個最簡單的觀察者模式,這種設計模式在javascript中能發揮非常重要的作用.其中當今比較流行的多模塊交互中用的比較多.不明白的讀者可以在下面留言,或者提建議.當然也可以批評.

轉載于:https://www.cnblogs.com/7hihi/archive/2010/08/15/2564196.html

總結

以上是生活随笔為你收集整理的javascript 的观察者模式的原理和集线器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。