自定义事件解决重复请求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 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
关于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实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PHP实现微信提现功能
2018/09/30 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
javascript的push使用指南
2014/12/05 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
vue实现购物车案例
2020/05/30 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python tornado上传文件的功能
2020/03/26 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
传播学毕业生求职信
2013/10/11 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
社区义诊活动总结
2014/04/30 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
vue实现滑动解锁功能
2022/03/03 Vue.js
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript