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

 更新时间:2017年07月11日 08:10:28   投稿:jingxian  
下面小编就为大家带来一篇自定义事件解决重复请求BUG的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

BUG的背景

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

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

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的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例

    JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例

    这篇文章主要介绍了JS+CSS实现可拖拽的漂亮圆角特效弹出层,以完整实例形式分析了弹出层特效及圆角矩形的实现技巧,需要的朋友可以参考下
    2015-02-02
  • Javascript 构造函数 实例分析

    Javascript 构造函数 实例分析

    一般构造函数没有返回值,他们通过关键字this初始化对象,没有返回值。当然一个构造器允许返回一个对 象,如果这样的话 返回的对象将变成new 表达式的值,在这种情况下值为this的对象将抛弃
    2008-11-11
  • JavaScript的11个小技巧整理

    JavaScript的11个小技巧整理

    这篇文章介绍了JavaScript的11个小技巧,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • LayUi使用switch开关,动态的去控制它是否被启用的方法

    LayUi使用switch开关,动态的去控制它是否被启用的方法

    今天小编就为大家分享一篇LayUi使用switch开关,动态的去控制它是否被启用的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS实现多物体运动

    JS实现多物体运动

    这篇文章主要为大家详细介绍了JS实现多物体运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JS实现自定义简单网页软键盘效果代码

    JS实现自定义简单网页软键盘效果代码

    这篇文章主要介绍了JS实现自定义简单网页软键盘效果代码,可实现简单模拟键盘布局及响应鼠标点击按下键盘按键功能,简单实用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • JavaScript中的console.time()函数详细介绍

    JavaScript中的console.time()函数详细介绍

    这篇文章主要介绍了JavaScript中的console.time()函数详细介绍,console.time()函数主要用来统计程序执行时间,需要的朋友可以参考下
    2014-12-12
  • Bootstrap table使用方法详细介绍

    Bootstrap table使用方法详细介绍

    bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件。这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jstree创建无限分级树的方法【基于ajax动态创建子节点】

    jstree创建无限分级树的方法【基于ajax动态创建子节点】

    这篇文章主要介绍了jstree创建无限分级树的方法,结合实例形式分析了jstree基于ajax结合asp.net后台动态创建子节点实现无限分级树效果的相关步骤与操作技巧,需要的朋友可以参考下
    2016-10-10
  • Android 自定义view仿微信相机单击拍照长按录视频按钮

    Android 自定义view仿微信相机单击拍照长按录视频按钮

    这篇文章主要介绍了Android 自定义view仿微信相机单击拍照长按录视频按钮,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07

最新评论