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();
    }());
    

      

  • 相关阅读:
    HttpURLconnection的介绍
    HttpClient4.3教程 第三章 Http状态管理
    HttpClient4.3教程 第二章 连接管理
    HttpClient 4.3教程 第一章 基本概念
    HttpClient 4.3教程-前言
    数据结构
    数据结构
    HashMap底层源码剖析
    防止XSS 攻击集成springboot
    C——Network Saboteur (POJ2531)
  • 原文地址:https://www.cnblogs.com/rentj1/p/2851383.html
Copyright © 2011-2022 走看看