zepto源码Callback

linkin 发布于2019-08-23 10:44 / 1527人阅读

摘要：如果回调正在进行，则修正回调任务的长度为当前任务列表的长度，以便后续添加的回调函数可以执行。

Callback模块是用来管理回调函数，也作为deferred延迟对象得基础部分，现在一起来看看他的源码。
可选参数：

  Options:
    once: 是否最多执行一次，
    memory: 是否记住最近的上下文和参数
    stopOnFalse: 当某个回调函数返回false时中断执行
    unique: 相同得回调只被添加一次

这是可选参数，下面可以进行试验：

var a = function (value) {
  console.log("a:" + value);
};
var b = function (value) {
  console.log("b:" + value);
};
var callbacks = $.Callbacks();
callbacks.add(a);
callbacks.fire(["hello"]);
callbacks.add(b);
callbacks.fire("中");

下面是他的输出结果：

a: hello,
a:中,
b:中

可以看到得是，当我们第二次fire得时候，a函数也会执行。
在加入参数进行实验，首先加入memory

var callbacks = $.Callbacks({
  memory: true
});
callbacks.add(a);
callbacks.fire("hello");
callbacks.add(b);
输出：
a:hello,
b:hello

加入memory参数，memory记录上一次触发回调函数，之后添加的函数都用这参数立即执行。在来看once的使用

var callbacks = $.Callbacks({
  once: true
});
callbacks.add(a);
callbacks.fire("hello");
callbacks.fire("中");
输出：
a:hello

可以看到的是，虽然执行了两次fire方法，但是只输出了一次结果。其他两个参数很好理解，细节的部分自己去尝试。

$.Callbacks = function(options) {
  options = $.extend({}, options)
  var memory, 
    fired, 
    firing,
    firingStart,
    firingLength,
    firingIndex,
    list = [],
    stack = !options.once && []
}

再看看各个参数的意义，memory会在记忆模式下记住上一次触发的上下文和参数，fired代表回调是否已经触发过，firing表示回调正在触发，firingStart回调任务开始的位置，firingLength回调任务的长度，firingIndex当前回调的索引，list表示真实的回调队列，在不是触发一次的情况下，用来缓存触发过程中没有执行的任务参数。

fire = function(data) {
  memory = options.memory && data
  fired = true
  firingIndex = firingStart || 0
  firingStart = 0
  firingLength = list.length
  firing = true
  for ( ; list && firingIndex < firingLength ; ++firingIndex ) {
    if (list[firingIndex].apply(data[0], data[1]) === false && options.stopOnFalse) {
      memory = false
      break
    }
  }
  firing = false
  if (list) {
    if (stack) stack.length && fire(stack.shift())
    else if (memory) list.length = 0
    else Callbacks.disable()
  }
}

fire函数是唯一内置的函数，他的作用是用于触发list的回调执行，首先看看他传进的参数，和咱们在外部调用$.Callbacks的fire还不太一样，这里的data是一个数组，data[0]表示上下文，data[1]是方法调用的参数。然后就是各个参数的的初始化，memory表示如果options.memory为true，则保存data，fired为true，如果firingStart为0,那么firingIndex 为0，firingStart置为0，正在触发的回调标记firing为true。
然后遍历回调列表，逐个执行回调，这个里边的if判断表示的是如果回调函数返回的是false并且options.stopOnFalse是false，则清空memory的缓存。遍历完成后，将执行的状态改为false。如果list存在，stack也存在，把任务参数取出来，调用fire函数执行。如果memory存在，则清空列表，否则进行回调执行

最终这个文件返回的是Callbacks，我们来看看他的具体实现：

Callbacks = {
  add: function () {
    if (list) {
      var start = list.length,
        add = function (args) {
          $.each(args, funciton(_, arg) {
            if (typeof arg === "function") {
              if (!options.unique || !Callbacks.has(arg)) list.push(arg);
            } else if (arg && arg.length && typeof arg !== "string") add(arg);
          })
        }
      add(arguments)
      if (firing) firingLength = list.length;
      else if (memory) {
        firingStart = start;
        fire(memory)
      }
    }
    return this;
  }
}

这个函数主要的作用就是像list里边push回调。首先判断list是否存在，如果存在，start赋值为list的长度，在内部添加一个add方法，内部add方法主要是向list添加回调，如果我们传入的参数是数组，就再次调用add方法。然后就是调用add方法，把arguments传进去。如果回调正在进行，则修正回调任务的长度firingLength为当前任务列表的长度，以便后续添加的回调函数可以执行。如果memory存在，则把开始设置为新添加列表的第一位，然后调用fire。
我们再来看看fireWith的做法：

fireWith: function(context, args) {
  if (list && (!fired || stack)) {
    args = args || [];
    args = [context, args.slice ? args.slice() : args];
    if (firing) stack.push(args);
    else fire(args);
  }
  return this;
}

传入的参数包括上下文，和参数列表。函数执行的条件是list存在并且回调没有执行或者stack存在，stack可以为空。首先对args进行重新赋值，args[0]是上下文，args[1]是复制过来的列表。如果回调正在进行，向stack里边添加args，或者就执行args。

专线服务 idc机房托管 callback objecttype_callback zepto zepto cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96640.html

读Zepto源码之fx_methods模块

摘要：所以模块依赖于模块，在引入前必须引入模块。原有的方法分析见读源码之样式操作方法首先调用原有的方法，将元素显示出来，这是实现动画的基本条件。如果没有传递，或者为值，则表示不需要动画，调用原有的方法即可。 fx 模块提供了 animate 动画方法，fx_methods 利用 animate 方法，提供一些常用的动画方法。所以 fx_methods 模块依赖于 fx 模块，在引入 fx_m...

junbaor 2019-08-21 16:59 评论0 收藏0
读Zepto源码之Form模块

摘要：模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发事件，提交表单。最终返回的结果是一个数组，每个数组项为包含和属性的对象。否则手动绑定事件，如果没有阻止浏览器的默认事件，则在第一个表单上触发，提交表单。 Form 模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发 submit 事件，提交表单。读 Zepto 源码系列文章已...

陈江龙 2019-08-21 17:12 评论0 收藏0
Zepto源码分析（一）核心代码分析

摘要：源码分析一核心代码分析源码分析二奇淫技巧总结本文只分析核心的部分代码，并且在这部分代码有删减，但是不影响代码的正常运行。当长度为则不添加内容，否则逐个将逐个到当前实例新增直接返回一个新的构造函数添加初始化方法。 Zepto源码分析（一）核心代码分析Zepto源码分析（二）奇淫技巧总结本文只分析核心的部分代码，并且在这部分代码有删减，但是不影响代码的正常运行。目录 * 用闭包封装Z...

BicycleWarrior 2019-08-20 18:57 评论0 收藏0
读 zepto 源码之工具函数

摘要：在遍历的时候，还对回调函数的返回值进行判断，如果回调函数返回，立即中断遍历。可以遍历数组类数组或对象中的元素，根据回调函数的返回值，将返回值组成一个新的数组，并将该数组扁平化后返回，会将及排除。 Zepto 提供了丰富的工具函数，下面来一一解读。源码版本本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性。目标对象的同名属性会被...

姘搁『 2019-08-20 16:10 评论0 收藏0
读Zepto源码之集合操作

摘要：调用来获取符合条件的集合元素，这在上篇文章读源码之神奇的已经有详细的论述。然后调用方法来合并两个集合，用内部方法来过滤掉重复的项，方法在读源码之内部方法已经有论述。最后也是返回一个集合。接下来几个篇章，都会解读 zepto 中的跟 dom 相关的方法，也即源码 $.fn 对象中的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码...

pepperwang 2019-08-20 16:43 评论0 收藏0
读Zepto源码之Event模块

摘要：不支持事件冒泡带来的直接后果是不能进行事件委托，所以需要对和事件进行模拟。调用函数，分隔出参数的事件名和命名空间。这里判断是否为函数，即第一种传参方式，调用函数的方法，将上下文对象作为的第一个参数，如果存在，则与的参数合并。 Event 模块是 Zepto 必备的模块之一，由于对 Event Api 不太熟，Event 对象也比较复杂，所以乍一看 Event 模块的源码，有点懵，细看下...

vpants 2019-08-20 18:06 评论0 收藏0