• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery源码分析之Callbacks详解

jQuery源码分析之Callbacks详解

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jQuery,Callbacks等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

代码的本质突出顺序、有序这一概念,尤其在javascript——毕竟javascript是单线程引擎。

javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是需要有序的执行。优秀代码常常 把函数切割成各自的模块,然后在某一特定条件下执行,既然这些函数是有序的执行,那么我们为什么不编写一个统一管理的对象,来帮助我们管理这些函数——于是,Callbacks(回调函数)诞生。

什么是Callbacks

javascript中充斥着函数编程,例如最简单的window.onload承接的就是一个函数,悲催的是window.onload直接赋值的话只能接收一个函数,如果有好几个函数想要在onload中执行,那么我们就需要编写如下代码:

        function a(elem) {
            elem.innerHTML = '我是函数a,我要改变Element的HTML结构';
        };
        function b(elem) {
            elem.innerHTML = '我的函数b,我要改变Element的style';
        }
        window.onload = function () {
            var elem = document.getElementById('test');
            a(elem);
            b(elem);
        };

回调函数初衷就是建立在这么个玩意儿的上面,不再让我们分散这些函数,而是把这些函数统一整理。可以看见,我们在window.onload中希望针对一个Element做两件事情:先改变html结构,然后改变这个html的style。两个函数同样是针对一个Element操作,而这两个函数最终的执行都是有序进行的。那么我们为什么不编写一个这样的对象管理这些函数呢。当然, 这只是回调函数的最基础的存在意义,我们需要的不仅仅是这样一个简单的回调函数对象,我们需要一个更加强大的回调函数。好吧,这只是一个简单的用例,那么我可以告诉你这个回调函数除了一个个执行函数之外,它还可以做什么。

Callbacks本质就是控制函数有序的执行,Javascript是单线程引擎,也就说,javascript同一时间只会有一处代码在运行——即便是Ajax、setTimeout。 这两个函数看起来好像都是异步的,其实并非如此,浏览器在运行javascript代码的时候,这些代码都会被有序的压入一个队列中,当你运行Ajax的时候,浏览器会把Ajax 压入代码队列,浏览器在处理javascript代码是从这个代码队列中一个一个取代码执行的——Callbacks,迎合了这种单线程引擎。

当然,我们要的,不仅仅是这样一个简单的工具对象——在jQuery源码中,Callbacks提供了一组函数的基本管理,为Deferred(异步队列)提供了基础,同时也服务于Queue(同步队列)。 Deferred用于抹平/扁平化金字塔编程(大量的回调函数嵌套,例如Ajax中需要根据请求返回码决定执行的代码); 而Queue,驱动着jQuery.animate(动画引擎)。

那么我们就来编写一个Callbacks吧。

Callbacks模型

Array(数组):
既然我们Callbacks要承接一系列函数,那么必然需要有一个容器。我们可以使用一个数组,并把每一个函数压到该数组中,需要执行的时候,循环数组项执行。

工作模型:

这个Callbacks需要非常的强大,并不仅仅是压入函数,然后执行这么简单,这个Callbacks应该拥有良好的执行模型。
once:当前Callbacks对象中所有的函数只会执行一次,执行一次完之后就会被释放掉,我们可以为使用Callbacks对象的用户提供一个稳定有效的方案,确保函数只会执行一次,之后不再执行,稳定了这些函数的线程。
auto:自动执行模型,这是个有意思的模型,有些函数依赖上一层函数,例如函数b的执行依赖于函数a,那么我们提供一个自动执行的模型:第一次执行这个Callbacks之后,每次添加函数到Callbacks的时候,自动执行过去添加的那些函数,并把最后一次给定的参数数据传递给过去的那些函数,这样就从Callbacks中抹平了这些依赖函数之间需要反复触发的关系,这是个有意思的模型。
once&auto:我们可以让它更强大,同时工作once和auto模型,即:当每次添加函数到Callbacks中的时候,过去的函数都会执行,然后,释放掉这些过去的函数,下次继续添加函数的时候,过去的那些函数不会再执行,因为once模型,已经把它们释放掉了。

API:

add(function) - 添加一个(或多个)函数到Callbacks对象中:当然,如果你并不添加函数只是好奇看看Callbacks,我们也将让你继续享受你的乐趣——我们并不会抛出异常,因为这对于我们来说并不擅长。
remove(function) - 移除一个Callbacks中的一个函数:既然有了添加,那么我们也应该提供反悔的方案,我们是多么的平易近人,容忍着别人过去所做的一切。
has(function) - 判断Callbacks中是否包含一个函数:哦?你竟然不确定是否包含这个函数,当初可是你丢进来的啊!你怎么如此马虎?不过既然你问我的话,我仍然会告诉你Callbacks是否包含这个函数,我知道你很繁忙,并不能记住和确定所有的事情。
empty() - 清空Callbacks:这些函数对于你失去了意义了么?什么?已经执行过你就不想要了?所以你希望可以清空它?好吧,为了内存君我还是忍下你这个需求。
disable() - 废掉一个Callbacks:为了和别人的代码稳定的存在,我选择了自我牺牲——没错,这个方法可以废掉Callbacks,彻底的废掉,就如同它曾经尚未存在过一般。
disabled() - 判断这个Callbacks是否已经被废掉:如果你仍然不相信Callbacks是否真的自我牺牲,那么这个方法可以让你安心。
lock(boolean) - 锁定这个Callbacks对象:你害怕它并不稳定,但是你又不想舍弃它,lock是个不错的方法,它接收一个Boolean的参数,表示是否需要锁定这个对象,当然,无参的它用于让你确定Callbacks是否被锁定。
fire(data) - 执行这个Callbacks中的函数:我们做的这一切,不都是为了这一刻执行的宿命么?参数将会成为这些需要执行的函数的参数。
fireWith(context,data) - 执行Callbacks中的函数,并且指定上下文。在fire()里,所有的函数的Context(上下文)都是Callbacks对象,而fireWidth(),可以让你重新定义这些要执行的函数的上下文,多么自由的编程啊,Callbacks为你考虑了一切。
fired() - 判断这个Callbacks过去是否已经执行过:我们相信,多数时候你并不知道过去做过什么,但是我们记录了你做的一切,如果你过去曾经执行过这个Callbacks对象,那么你休想否认,因为我们知道过去你是否执行了这个Callbacks。

基本模块实现

简单的实现:
我们先来简单的实现一个Callbacks:

(function (window, undefined) {
            var Callbacks = function () {
                //通过闭包保护这些私有变量
                var list = [],//回调函数列表
                    fired;//是否执行过
                //返回一个闭包的Callbakcs对象
                return {
                    add: function (fn) {
                        //当Callbacks废弃掉的时候,list为undefined
                        if (list) {
                            //添加一个回调函数
                            list.push(fn);
                            //支持链式回调
                     &nb

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 20款超赞的jQuery插件 Web开发人员必备
  • jquery中EasyUI实现异步树
  • jQuery实现标题有打字效果的焦点图代码
  • jQuery进行组件开发完整实例
  • 浅谈jquery采用attr修改form表单enctype不起作用的问题
  • jQuery插件PageSlide实现左右侧栏导航菜单
  • JQuery 控制内容长度超出规定长度显示省略号
  • jQuery实现放大镜效果实例代码
  • 使用jQuery快速解决input中placeholder值在ie中无法支持的问题
  • jquery获取所有选中的checkbox实现代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery实现将div中滚动条滚动到指定位置的方法
    • jQuery与javascript对照学习 获取父子前后元素 实现代码
    • jquery仿京东侧边栏导航效果
    • jquery 选项卡效果 新手代码
    • jquery ajax 检测用户注册时用户名是否存在
    • jQuery切换网页皮肤并保存到Cookie示例代码
    • JQuery扩展插件Validate 2通过参数设置验证规则
    • 原生js实现addclass,removeclass,toggleclasss实例
    • jQuery实现三级联动效果
    • 基于jquery的划词搜索实现(备忘)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有