自定义事件解决重复请求BUG的问题


Posted in Javascript onJuly 11, 2017

现在,组件化开发还是比较流行的,毕竟其优点相当突出。最近在开发一个组件的时候,遇到了一个很有意思的BUG。。。

BUG的背景

最近在开发一个组件,好不容易开发好了转测试。然后,测试给我提了一个这样的bug,orz...

自定义事件解决重复请求BUG的问题

因为是一个组件,最大的好处就是可以随处复用,随处使用,然而,当一个页面用了多个组件,只有最后一个生效的时候,这个组件就没有什么意义了。。。

BUG原因查找

这个组件的初始数据来源的接口是固定的,也就是说,页面内的所有这个组件在初始化的时候都会发出同样的请求,这里的请求是jsonp的方式,所以回调函数是绑定在window上的一个函数,但是在页面中window只有一个,所以在回调处理的时候,要处理的组件内的相应的数据只指向最后一个组件。所以导致多个同样的组件在同一个页面中,只有最后一个组件能在取得数据之后顺利渲染出来。

BUG解决思路

最主要就是要将每次请求的callback存储起来,这样就可以保证callback中对组件数据的处理不是只指向最后一个。其次,既然是一样的请求,当然不希望会发出两次以上啦,即一个页面发出的每一个请求都是唯一的。

BUG解决方案

想到了发布订阅者模式的自定义事件,可以写这样的一个模块,每次请求发出前判断一下之前是否有相同的模块已经发出了,如果没有则缓存callback发出请求,如果有相同的请求已经发出了,那么检查一下这个发出的请求是否已经完成了,如果没有则继续缓存callback等待,如果请求已经发出并且已经完成则直接处理callback。在请求第一次回来后,发出广播,把之前缓存的callback都执行一次。

自定义事件详情

定义一个模块,里面有n个以回调函数命名的事件对象,每个对象有在被初始化的时候,定义其状态state,对应的callback数组,请求回到的数据data。每次调用该模块,首先检查对应的cbName是否被初始化,然后检查其state。根据state做相应的操作并改变state的值。state的值有3中,分别为init、loading、loaded。即初始化、请求中、请求完成。处于请求完成状态时才能执行相应的回调。

具体如下:

define('wq.getData', function (require, exports, module) {
  var ls = require('loadJs');
   
  var cache = {};
  cache.init = function(cb,cbName,url){
    if(!cache[cbName]){
      cache[cbName] = {};
      cache[cbName].state = 'init';
      cache[cbName].cbs = [];
      cache[cbName].data = [];
    }
    cache.on(cb,cbName,url);
  }
  cache.on = function(cb,cbName,url){
    if(cache[cbName].state == 'loaded'){
      cb(cache[cbName].data)
    }else if(cache[cbName].state == 'loading'){
      cache[cbName].cbs.push(cb)
    }else if(cache[cbName].state == 'init'){
      cache[cbName].cbs.push(cb);
      cache[cbName].state = 'loading';
      cache.fetch(cb,cbName,url);
    }
  }
  cache.broadcast = function(cbName){
    cache[cbName].cbs.forEach(function(cb){
      cb(cache[cbName].data)
    });
  }
  cache.checkLoaded = function(cbName){
    if(cache[cbName].data[0]){
      cache[cbName].state = 'loaded';
      cache.broadcast(cbName);
    }
  }
  cache.fetch = function(cb,cbName,url){
    ls.loadScript({
      url: url,
      charset: 'utf-8',
      handleError:function(func, args, context,errorObj){
        console.log(_errlogText + context);
        cache[cbName].data[0] = {};
        cache.checkLoaded(cbName);
      }
    });
    if(window.cbName) return;
    window[cbName] = function(json){
      cache[cbName].data[0] = json;
      cache.checkLoaded(cbName);
    }
  }
 
  exports.getData = function(cb,cbName,url){
    cache.init(cb,cbName,url);
  } 
 
})

完美解决问题,每个回调都不会遗漏或者被覆盖……

扩展思路

该模块可通用于处理一个页面内同一个请求的情况。还可以扩展到处理一些需要2个请求以上完成才执行某个回调的情况。类似于Promose的情况。这个时候可以规定,每个data[0]装的是固定的对应接口的数据,data[2]对应另一个,一次类推。不过这样就要遍历到每一项都为true的时候才执行回调。而且对应关系比较容易混乱,再扩展就不如直接用Promise来处理了。。。

以上这篇自定义事件解决重复请求BUG的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
详解angular部署到iis出现404解决方案
Aug 14 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
关于js中的鼠标事件总结
Jul 11 #Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 #Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 #Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 #Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
Angular2生命周期钩子函数的详细介绍
Jul 10 #Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 #Javascript
You might like
PHP 在线翻译函数代码
2009/05/07 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python实现井字棋游戏
2020/03/30 Python
python3.5仿微软计算器程序
2020/03/30 Python
详解Python中where()函数的用法
2018/03/27 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python递归实现快速排序
2018/08/18 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
python读取Kafka实例
2019/12/23 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
敬老文明号事迹材料
2014/01/16 职场文书
物流专业求职信
2014/06/30 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
外出培训学习心得体会
2016/01/18 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL