js自定义事件应用

本篇主要记录一下自定义事件在实际项目中的应用场景

设想一下这样一个情况：
模块A有个属性name，即A.name="www";A还有个方法A.setName(); 修改了A.name的值，然后我们有个模块B，需要在A.name改变之后做执行某项操作比如：B.setName();那么我们有各种办法来达到这种要求

1. 传递callback方法

   代码如下:
   

    
   	var A = {}
   	A.name = "www";
   	A.setName=function(callback){
   		//balabala一堆业务代码
   		A.name = "1234";
   		if(callback&&typeof callback==="function"){
   			callback(A.name);
   		}
   	}
   	var B = {};
   	B.setName=function(name){
   		//balabala一堆业务代码
   		B.name = name+"我就是B";
   	}
   	A.setName(B.setName);
   	console.log((B.name)	

   这是一种常见的callback的应用场景

2. 借用Object.defineProperties方法

   Object.defineProperties介绍点击这里

   实际应用代码如下:
   

    
   	 var A = {};
   	Object.defineProperties(A, {
       name: {
           value: "www",
           writable: true,
           enumerable: true,
           configurable: true
       },
       name: {
           set: function (x) {
   			B.setName
               this.newaccpropvalue = x;
   			B.setName(x);
           },
           enumerable: true,
           configurable: true
       }});
   	A.setName=function(name){
   		//balabala一堆业务代码
   		A.name = name;
   	}
   	var B = {};
   	B.setName=function(name){
   		//balabala一堆业务代码
   		B.name = name+"我就是B";
   	}
   	A.setName("A新的name");
   	console.log(B.name);	

   这里借用了A.name的set方法

3. 借用自定义事件，来通知A.name改变了

   前端最熟悉的莫过于事件模型，我们想能不能在A.name改变的时候发起一个通知，然后B监听这个通知。。就获取了A的值了

   这里用应用自定义事件就可以满足要求,代码如下:

    
   	var A_change = new Event("A_name_change", {"bubbles":true, "cancelable":false});
   
   	var A = {}
   	A.name = "www";
   	A.setName=function(name){
   		//balabala一堆业务代码
   		A.name = name;
   		 document.dispatchEvent(A_change);
   	}
   	var B = {};
   	B.setName=function(name){
   		//balabala一堆业务代码
   		B.name = name+"我就是B";
   	}
   	document.addEventListener("A_name_change",function(){
   		B.setName(A.name);
   		console.log(B.name);
   	},false);
   	A.setName("A自定义事件")

嗯，也许你还有更多的方法，，，欢迎讨论。。有关自定义事件的相关资料请点击这里new Event； document.createEvent

下面我们重点介绍一下自定义事件在实际项目中的应用

一个UI界面，我们需要在城市的input改变之后去请求某些数据比如：执行o.getDataByCity(cityCode)这个方法； 那么选择城市可以是用户自己输入的来完成，也可以是选中autoComplate来完成还可以是在popup弹层里点击城市来完成。这时候我们就可以使用自定义事件了。 这个城市输入框是cityInput,弹窗的控件是cityPopup，自动填充是cityAutoComplate;那么我们只需要在各个控件里触发一个自定义事件就好了，大致代码如下：

	var cityInput = document.getElementById("cityInput");
	var cityInputChange = new Event("cityInputChange", {"bubbles":true, "cancelable":false});
	var cityPopup={}
	//balabala一堆citypopup的代码
	cityPopup.okClick=function(){
		cityInput.value="xxx";
		cityInput.dispatchEvent(cityInputChange);
	}
	var cityAutoComplate={}
	//balabala一堆cityAutoComplate的代码
	cityAutoComplate.setValue = function(){
		cityInput.value="xxx";
		cityInput.dispatchEvent(cityInputChange);
	}
	cityInput.addEventListener("cityInputChange",function(){
		o.getDataByCity(this.value);
	})

一个示例demo其实我们还可以扩展一下，比如在cityInput监听cityInputChange事件，做事情A,改变A.name;然后在document监听cityInputChange做事情B，事情B需要等A执行完毕之后才能干，，，当然这里是同步的不是异步的。。。