js自定义事件应用
本篇主要记录一下自定义事件在实际项目中的应用场景
设想一下这样一个情况:
模块A有个属性name,即A.name="www";A还有个方法A.setName();
修改了A.name的值,然后我们有个模块B,需要在A.name改变之后做执行某项操作比如:B.setName();那么我们有各种办法来达到这种要求
传递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的应用场景
借用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方法
借用自定义事件,来通知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执行完毕之后才能干,,,当然这里是同步的不是异步的。。。
发表评论