0

0

【Javascript】zepto源码Callback分析

php是最好的语言

php是最好的语言

发布时间:2018-08-06 15:21:18

|

1866人浏览过

|

来源于php中文网

原创

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的使用

立即学习Java免费学习笔记(深入)”;

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

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

短视频去水印微信小程序
短视频去水印微信小程序

抖猫高清去水印微信小程序,源码为短视频去水印微信小程序全套源码,包含微信小程序端源码,服务端后台源码,支持某音、某手、某书、某站短视频平台去水印,提供全套的源码,实现功能包括:1、小程序登录授权、获取微信头像、获取微信用户2、首页包括:流量主已经对接、去水印连接解析、去水印操作指导、常见问题指引3、常用工具箱:包括视频镜头分割(可自定义时长分割)、智能分割(根据镜头自动分割)、视频混剪、模糊图片高

下载
$.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。

相关文章:

Zepto源码中Gesture模块介绍

Javascript中的Callback方法浅析

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

43

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

35

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

204

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

9

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

8

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号