自定义事件解决重复请求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中HTMLDOM操作详解
Dec 11 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
node中的session的具体使用
Sep 14 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
基于php实现的验证码小程序
2016/12/13 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
常见的python正则用法实例讲解
2016/06/21 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
销售行政专员岗位职责
2014/06/10 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书