jquery.Callbacks的实现详解


Posted in Javascript onNovember 30, 2016

前言

jQuery.Callbacks是jquery在1.7版本之后加入的,是从1.6版中的_Deferred对象中抽离的,主要用来进行函数队列的add、remove、fire、lock等操作,并提供once、memory、unique、stopOnFalse四个option进行一些特殊的控制。

功能介绍

jq的Callbacks模块主要是为其他模块提供服务的,他就像一个温柔的小女人,在背后默默地付出。Deferred就像一个巨人,在jq中那么的突出,但在内部,他受到Callbacks的服务。

Callbacks的几种状态:

      once    -- 回调函数只执行一次

      unique    -- 函数不能重复添加到回调列表中

      memory    -- 状态记忆,主要用于Deferred中

      stopOnFalse    -- 遇到return false 终止回调列表继续执行

我自己实现的Callbacks的几个简单的方法

      add    -- 向对应的回调函数列表添加一个函数

      fire    -- 触发回调,回调函数列表依次执行函数

      has    -- 回调函数列表是否存在传入函数

      clear    -- 清空回调函数列表

整体结构

首先,我们要向得到一个想要的Callbacks模块,需要这样做:

var cb = Callback('memory once') // 得到一个拥有记忆功能并只执行一次的回调模块

由于我们需要基于一定状态来得到不同的实例,我们可以确定,我们需要一个存储状态的对象

var callbackState = {}

我们给Callback函数传入了'memory once',我们怎么记录这两个状态呢,在这里,仿jq来写的一个函数来实现,如下:

var createCallbackState = function (options) {
 var states = options.split(' ')
 var obj = {}
 for (var i = 0; i < states.length; i++) {
  obj[states[i]] = true
 }
 return obj
 }

以上代码,将 'memory once'  变成了 {memory: true, once: true} ,如果状态缓存对象里有这个对象,直接返回,没有的话先创建再返回。

接下来,就是Callback函数的全部代码了,先上代码

var Callback = function (options) {

 var state = callbackState[options] //获取状态模式
 if (!state) {
  callbackState[options] = state = createCallbackState(options)
 }
 var list = [], // 回调函数列表
  memory,  // 存储是否为 记忆状态
  has = function (fn) { 
  for (var i = 0; i < list.length; i++) {
   if (list[i] === fn) {
   return true
   }
  }
  return false
  },
  add = function () {
  var i = 0,
   args = arguments,
   len = args.length
  for (; i < len; i++) {
   if (state.unique && has(args[i])) { // 如果是unique状态下并回调列表已经拥有该函数,则不添加
   continue
   }
   list.push(args[i])
  }
  },
  fire = function (context, args) {
  var i = 0,
   len = list.length,
   item
  for (; i < len; i++) {
   item = list[i]
   if (item.apply(context,args) === false && state.stopOnFalse) { //如果函数运行返回false,并且是stopOnFalse状态,终止循环
   break;
   }
  }
  }

 return {
  add: function () {
  add.apply(null,arguments)
  // 如果memory模式并且已经拥有了memory信息,接着出发函数
  if (state.memory && memory) {
   fire(memory[0], memory[1])
   list = []
  }
  },
  fire: function (context, args) {
  // 如果memory模式,并且list是空,代表触发在添加前,保存memory信息
  if (state.memory && !list.length) {
   memory = [context, args]
   return
  }
  fire(context,args)
  if (state.once) {
   this.clear()
  }
  },
  has: function (fn) {
  return has(fn)
  },
  clear: function () {
  list = []
  }
 }

 }

Callback函数执行后,返回一个对象,然后该对象包含了几个简单的功能。

下面我来介绍一下这部分的实现。

首先,如jq一样,我也定义了内部的add, fire, has方法,主要原因是逻辑需要,在返回对象的方法中实现once,memory状态控制,内部的add,fire方法是纯粹的添加和触发函数。

先来看cb.add方法,add方法可以接收多个函数,因此

add.apply(null,arguments)

使用内部的add做添加功能

再往下的一部分的功能是判断这个回调模块是否是memory状态,理解Deferred模块的同学应该知道,该模块是Promise模式,订阅成功或失败状态的回调函数,然后再某一时刻触发他,这个模式便引用了memory状态下的Callback,这个模式有一个奇怪的地方,如果你先发布成功,但是回调列表空空如也,那么程序并不会发布失败,而是等待成功回调函数的加入,一但回调函数加入,立刻执行他。

就是如下代码

// 如果memory模式并且已经拥有了memory信息,立刻触发函数
 if (state.memory && memory) {
 fire(memory[0], memory[1])
 list = []
 }

提示 : ‘如果你先发布成功,但是回调列表空空如也,那么程序并不会发布失败,而是等待成功回调函数的加入,一但回调函数加入,立刻执行他' 的理解如下代码

var cb = Callback('memory') // 得到记忆功能的回调模块

cb.fire() // 触发回调队列

cb.add(fn) //添加回调函数,自动执行了!

function fn () {
 console.log('fn') 
}

如果在非memory状态,以上代码无效。需要再次fire才会执行。

经过上述,fire函数也好理解了,fire可接收两个参数,函数上下文,函数参数数组。

与add中memory状态的代码连串起来,以下代码就是fire时memory状态下的操作

// 如果memory模式,并且list是空,代表触发在添加前,保存memory信息
  if (state.memory && !list.length) {
   memory = [context, args]
   return
  }

如果是memory状态,回调列表为空,就保存函数执行上下文和参数数组,等add时立刻执行。

除了上述以外,代码就很简单易懂啦,Callback函数就到这里了,很简单的功能,唯一一点不好理解的就是memory状态。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
jquery实现抽奖功能
Oct 22 jQuery
使用js获取身份证年龄的示例代码
Dec 11 Javascript
javascript中活灵活现的Array对象详解
Nov 30 #Javascript
如何处理JSON中的特殊字符
Nov 30 #Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 #Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 #Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 #Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 #Javascript
浅析script标签中的defer与async属性
Nov 30 #Javascript
You might like
短波问题解答
2021/02/28 无线电
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
组合算法的PHP解答方法
2012/02/04 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
python多线程用法实例详解
2015/01/15 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python爬虫添加请求头代码实例
2019/12/28 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
出国导师推荐信
2015/03/25 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
班主任寄语2016
2015/12/04 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书