观察者模式的Javascript实现方式
观察者模式也被称作发布/订阅模式,下面是JAVASCRIPT的一种实现方式
var global = window; (function(ns, base){ //被观察的对象 function Observable(){ this.observers = {}; } Observable.prototype = { //subscribe bind: function(name, observer){ var observers = this.observers[name] || ( this.observers[name] = [] ); var isbind = observer && observers.indexOf(observer) === -1; if(isbind){ observers.push(observer); } }, //unsubscribe unbind: function(name, observer){ var observers = this.observers[name], index = observers && observers.indexOf(observer), isunbind = (index !== undefined) && (index > -1); if (isunbind ){ observers.splice(index, 1); } }, //publish trigger: function (name, args){ var observers = this.observers[name]; if(!observers) return; for (var i=0; i<observers.length; i++) { observers[i](args); } } }; Observable.fn = Observable.prototype; ns.Observable = Observable; }(global, undefined));
使用示例:
//测试,Model和View解耦 (function(){ //UserModel,继承Observable function UserModel (id){ this.id = id; } UserModel.prototype = new Observable(); UserModel.prototype.load = function(){ //ajax load var mode = { name: "jser", id: this.id }; //触发loaded事件 this.trigger("loaded", { target: this, data: mode } ); } function UserView(){ this.render = function(data){ alert("username: "+ data.name); } } var user = new UserModel(); var view = new UserView(); //添加观察者,当UserMode加载完成调用 user.bind("loaded", function(event){ view.render(event.data); }); user.load(); }());