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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
js实现鼠标点击飘爱心效果
Aug 19 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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php简单中奖算法(实例)
2017/08/15 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
jquery中获取select选中值的代码
2011/06/27 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
javascript实现左右缓动动画函数
2020/11/25 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python生成随机MAC地址
2015/03/10 Python
python基于ID3思想的决策树
2018/01/03 Python
Python使用folium excel绘制point
2019/01/03 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
什么是类的返射机制
2016/02/06 面试题
会计专业个人求职信范文
2014/01/08 职场文书
保护环境建议书
2014/03/12 职场文书
教师个人培训总结
2015/02/11 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL