首頁 > 開發者 > JavaScript
最近正在做的項目中，前台的javascirpt模組之間的互動比較多，就用到了設計模式中的觀察者模式。
在學習和使用觀察者模式時，發現觀察者模式其實是事件驅動的原型。c#的事件驅動也算是觀察者模式的一種變種吧（不知理解是否正確，希望高手指點）。
javascirpt的extjs架構的時間驅動的原型也是觀察者，因此，觀察者模式在模組間互動時可以隔離變化，實現高內聚，低耦合。下面是My Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">CodeCodeCode
<HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!--//事件對象Event=function(name){this.name=name;this.eventfns=new Array();}//增加事件的監聽者Event.prototype.AddEventFn=function(fn){this.eventfns.push(fn);}//擷取事件的名稱Event.prototype.GetEventName=function(){return this.name;}//觸發事件//{data}觸發事件時所附帶的資料Event.prototype.FireEvent=function(data){for(var key in this.eventfns){this.eventfns[key](data);}}//模組基類Module=function(id){this.id=id;this.events=new Array();Kernel.AddModule(this);}//擷取模組的IdModule.prototype.getModuleId=function(){return this.id;}//註冊模組上的事件Module.prototype.RegisterEvent=function(eventName){e=new Event(eventName);this.events.push(e);}//增加模組的事件監聽器Module.prototype.AddListener=function(eventName,fn){for(var key in this.events){if (this.events[key].GetEventName()==eventName){this.events[key].AddEventFn(fn);return true;}}return false;}//觸發模組上的事件Module.prototype.FireEvent=function(eventName,data){for(var key in this.events){if (this.events[key].GetEventName()==eventName){this.events[key].FireEvent(data);return true;}}return false;}//儲存模組的全域對象Kernel={};//模組的集合Kernel.Modules=new Array();//向系統增加模組Kernel.AddModule=function(module){Kernel.Modules.push(module);}//根據id擷取模組Kernel.GetModule=function(moduleId){for(var key in Kernel.Modules){if (Kernel.Modules[key].getModuleId()==moduleId){return Kernel.Modules[key];}}return null;}/** * 繼承 * @param {} subClass 子類 * @param {} superClass 父類 */function extend(subClass, superClass) {var F=function(){};F.prototype=superClass.prototype;subClass.prototype=new F();subClass.prototype.constructor=subClass;subClass.superclass=superClass.prototype;if (superClass.prototype.constructor==Object.prototype.constructor){superClass.prototype.constructor=superClass;}}//-----------------------------//以上是觀察者模式的一種實現。//下面是簡單測試//--------------------------------//模組AModuleA=function(){ModuleA.superclass.constructor.call(this,'modulea');//註冊模組的aclick事件this.RegisterEvent('aclick');}extend(ModuleA,Module);//模組BModuleB=function(){ModuleB.superclass.constructor.call(this,'moduleb');//增加模組A的監聽事件module=Kernel.GetModule('modulea');if (module!=null){module.AddListener('aclick',function(data){document.getElementById("test").innerHTML=data;});}}extend(ModuleB,Module);var a=new ModuleA();var b=new ModuleB();function FireEvent(){alert(a.FireEvent("aclick","哈哈，事件觸發了"));} //--> </SCRIPT> <BODY><input type="button" value="模組A觸發模組B事件" onclick="FireEvent()"><div id="test"></div> </BODY></HTML>Code希望同大家交流javascirpt開發經驗.
Code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
