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 Eventdocument.createEvent

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

js自定义事件应用 第1张

js自定义事件应用 第2张

js自定义事件应用 第3张 一个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执行完毕之后才能干,,,当然这里是同步的不是异步的。。。

本文标题:js自定义事件应用
本文链接:https://56way.com/p/61.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。