前言

本人是一个热爱前端的菜鸟,一直喜欢学习js原生,对于jq这种js库,比较喜欢理解他的实现,虽然自己能力有限,水平很低,但是勉勉强强也算是能够懂一点吧,对于jq源码解读系列,博客园里有很多,推荐大神  艾伦的jq系列,在这里,我仅仅是分享一下我对jq里的Callbacks模块的理解与详细介绍一下我自己仿jq实现的一个callback功能。

功能介绍

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时立刻执行。

jquery.Callbacks的实现的更多相关文章

  1. jQuery.Callbacks之demo

    jQuery.Callbacks是jquery在1.7版本之后加入的,是从1.6版中的_Deferred对象中抽离的,主要用来进行函数队列的add.remove.fire.lock等操作,并提供onc ...

  2. jQuery回调、递延对象总结(上篇)—— jQuery.Callbacks

    前言: 作为参数传递给另一个函数执行的函数我们称为回调函数,那么该回调又是否是异步的呢,何谓异步,如:作为事件处理器,或作为参数传递给 (setTimeout,setInterval)这样的异步函数, ...

  3. jQuery.Callbacks 源码解读二

    一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...

  4. jQuery源代码学习之四——jQuery.callbacks

    自己实现的callbacks模块相较于jquery源代码中的callbacks模块有所简化,表面上看没有考虑firing这个参数,没有对之进行任何处理,即没有考虑在函数执行过程中,再次调用add,re ...

  5. jQuery.Callbacks之源码解读

    在上一篇jQuery.Callbacks之demo主要说了Callbacks对象初始化常见的选项,这一篇主要分析下Callbacks对象的源代码,对给出两个较为繁琐的demo // String to ...

  6. jQuery回调、递延对象总结(一)jQuery.Callbacks详解

    前言: 作为参数传递给另一个函数执行的函数我们称为回调函数,那么该回调又是否是异步的呢,何谓异步,如:作为事件处理器,或作为参数传递给 (setTimeout,setInterval)这样的异步函数, ...

  7. jQuery: Callbacks

    jQuery 中提供了一个Callback的工具类Callbacks,它提供了一个Callback Chain.使用它可以在一个chain上来执行相关操作.它也是jQuery中的ajax, Defer ...

  8. jQuery.callbacks 注释

    (function( jQuery ) { // String to Object flags format cache var flagsCache = {}; // Convert String- ...

  9. jQuery 2.0.3 源码分析 回调对象 - Callbacks

    源码API:http://api.jquery.com/jQuery.Callbacks/ jQuery.Callbacks()是在版本1.7中新加入的.它是一个多用途的回调函数列表对象,提供了一种强 ...

随机推荐

  1. 传播正能量——做一个快乐的程序员

    引子 今天在博客园看到施瓦小辛格的文章我们搞开发的为什么会感觉到累,顿时有感而发.自己本来不擅长写文章,更不擅长写这种非技术性的文章,但是在思绪喷薄之际,还是止不住有很多话要说.针对从客观上说&quo ...

  2. C# 中参数验证方式的演变

    一般在写方法的时候,第一步就是进行参数验证,这也体现了编码者的细心和缜密,但是在很多时候这个过程很枯燥和乏味,比如在拿到一个API设计文档的时候,通常会规定类型参数是否允许为空,如果是字符可能有长度限 ...

  3. 【原】Github+Hexo+NextT搭建个人博客

    摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...

  4. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  5. spring applicationContext.xml和hibernate.cfg.xml设置

    applicationContext.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans ...

  6. scanf类型不匹配造成死循环

        int i = 0; while (flag) { printf("please input a number >>> "); scanf("% ...

  7. Linux杀死进程,查看进程

    http://blog.csdn.net/wojiaopanpan/article/details/7286430/

  8. Java 程序优化 (读书笔记)

    --From : JAVA程序性能优化 (葛一鸣,清华大学出版社,2012/10第一版) 1. java性能调优概述 1.1 性能概述 程序性能: 执行速度,内存分配,启动时间, 负载承受能力. 性能 ...

  9. Spring(三)__aop编程

    aop( aspect oriented programming ) 面向切面编程,是对所有对象或者是一类对象编程 几个重要的概念: 1.切面(aspect):要实现的交叉功能,是系统模块化的一个切面 ...

  10. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...