zoukankan      html  css  js  c++  java
  • 观察者模式的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();
    }());
    

      

  • 相关阅读:
    左偏树
    论在Windows下远程连接Ubuntu
    ZOJ 3711 Give Me Your Hand
    SGU 495. Kids and Prizes
    POJ 2151 Check the difficulty of problems
    CodeForces 148D. Bag of mice
    HDU 3631 Shortest Path
    HDU 1869 六度分离
    HDU 2544 最短路
    HDU 3584 Cube
  • 原文地址:https://www.cnblogs.com/rentj1/p/2851383.html
Copyright © 2011-2022 走看看