jquery Callbacks方法实现

版本:1.7.1

jQuery.Callbacks(flags)

调用Callbacks方法后,返回一个用于处理回调函数队列的对象,对象包含有add,remove,fire,fireWith,fired,lock,locked,disable,

disabled,has,empty方法用于管理和操作回调函数队列,回调函数队列以数组的形式存储在函数Callbacks作用域内,通过闭包机制返回的回调对象操作回调函数队列。

参数flags

取值:once memory unique stopOnFalse

once:确保回调函数对列只能触发一次

memory:记录fire函数传入的参数值,之后通过add方法添加一个或多个函数时,函数立即执行,并且使用的参数时记录的通过fire传入的值。

unique:确保回调函数队列中没有重复的函数。

stopOnFalse:当某个回调函数返回false时,中断回调函数队列中后面的函数继续执行。

若没有给flags赋值,回调对象处理回调队列的行为类似监听函数,能够多次触发。

若有参数值,可以是一个,也可以是通过隔开的多个值的集合。

add(fn,[fn,fn..],fn...)

添加一个或一组回调函数到回调队列中。传入的参数可以是单个函数,也可以是有函数组成的数组。

remove(fn,fn,fn,...)

从回调函数队列中删除一个或一组回调函数。传入的参数形式是单个数组。

fire(arg)

使用arg参数出发回调队列中的所有回调函数。

fieWith(context,arg)

使用指定的上下文和参数触发回调队列中的所有回调函数。

fired()

判定回调函数是否被触发过。

lock()

锁定回调函数队列。

locked()

判断回调函数队列是否被锁定。

has(fn)

检测回调函数fn是否在回调函数队列中。

empty()

把回调队列置空。

源码分析

1.总体结构

var flagCache = {};//缓存flags的值

//把flags值(以空格分隔的字符串)转化为对象形式表示

function createFlags(flags){}

jQuery.Callbacks = function(flags){

  //检查flagCache缓存中是否有flags值,若有直接使用flagsCache存储的值的对象表示形式,若没有缓存,重新把字符串格式转化为对象的形式,返回给flags

  flags = flags ? ( flagsCache[ flags ] || createFlags( flags ) ) : {};

  var

list = [];//存放回调函数队列

stack = [];//存放触发函数fire执行的队列

memory,//记录回调函数是否被触发过,是否是memory模式以及上一次fire传的参数值

firing,//回调函数是否在执行

firingStart,//将要执行的第一个回调函数的下标

firingLengh,//执行回调函数的长度

firingIndex,//正在执行的回调函数的下标

add = function(args){},//添加一个或几个回调函数的工具方法

fire = function(context, args){},//触发回调函数的工具方法

self ={

add:function(){},//添加回调函数

remove:function(){},//删除回调函数

has:function(fn),//判断回调函数fn是否在回调队列中

empty:function(),//把回调队列置为空

disable:function(),//禁用回调队列

disabled:function(),//判断回调队列是否被禁用

lock:function(),//锁定回调队列

locked:function(),//判断回调列表是否被锁定

       fireWith:function(context,args){},//根据指定的上下文和参数触发回调队列

fire:function(){},//根据指定的参数触发回调队列

fired:function()//判断回调队列是否被触发过

};

  return self;   

}

分析:

(1)根据传入的flags的值来确定管理回调队列的方式,以带有空格的字符串的形式传入。并且把传入的字符串形式转化为对象表示形式,并且把对象表示形式缓存到对象flagCache中,在以后调用时,若缓存中有这个字符串的对象表示形式,直接使用缓存的对象表示形式,而不用重新字符串转化为对象表示形式。

(2)在Callback函数作用域中定义了几个数据变量、两个工具方法以及向外提供接口的回调对象。回调对象使用了闭包机制对数据变量操作及使用两个工具方法。

2.方法实现

createFlags(flags)

//存储字符串转化为对象形式的缓存
var flagsCache = {};

//把字符串表示形式转化为对象表示形式
function createFlags( flags ) {
    var object = flagsCache[ flags ] = {},
        i, length;
    flags = flags.split( /\s+/ );
    for ( i = 0, length = flags.length; i < length; i++ ) {
        object[ flags[i] ] = true;
    }
    return object;
}
时间: 2024-11-07 21:12:15

jquery Callbacks方法实现的相关文章

jquery源码解析:jQuery工具方法Callbacks详解

我们首先来讲下Callbacks是如何使用的:第一个例子 function a(){} function b(){} var cb = $.Callbacks(); cb.add(a); cb.add(b); cb.fire();      //就会先执行a方法,再执行b方法 上面大概的意思是:add方法,就是把方法添加到数组list中,每执行一次,就添加一个方法.而fire方法,就是把list数组中的方法按顺序执行. 使用场景:第二个例子 function a(n){ } (function(

jQuery.callbacks 注释

1 (function( jQuery ) { 2 3 // String to Object flags format cache 4 var flagsCache = {}; 5 6 // Convert String-formatted flags into Object-formatted ones and store in cache 7 // 将字符串形式的flags转换成对象形式,并且存到cache中,例: "once memory" => {"once&

jQuery异步框架探究1:jQuery._Deferred方法

jQuery异步框架应用于jQuery数据缓存模块.jQuery ajax模块.jQuery事件绑定模块等多个模块,是jQuery的基础功能之一.实际上是jQuery实现的一个异步处理框架,从本质上讲与java aio没有区别,所以需要从更抽象层面的"异步处理"的视角分析解读该模块.这个部分与dom功能关系不大,是独立部分,可以看作是jQuery工具系列之一. 与异步框架相关的方法定义于jQuery类的静态方法中.只有三个方法,但是功能和应用及其强大!本篇详细讲解第一个方法jQuery

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

前言: 作为参数传递给另一个函数执行的函数我们称为回调函数,那么该回调又是否是异步的呢,何谓异步,如:作为事件处理器,或作为参数传递给 (setTimeout,setInterval)这样的异步函数,或作为ajax发送请求,应用于请求各种状态的处理,我们可以称为异步回调,jQuery.Callbacks 为我们封装了一个回调对象模块,我们先来看一个应用场景: // 为什么jQuery中的ready事件可以执行多个回调,这得益于我们的jQuery.Deferred递延对象(是基于jQuery.Ca

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

jQuery on()方法

jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on("click",func

优化加载jQuery的方法

请看下面的一段代码: 1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 2 <script type="text/javascript"> 3 window.jQuery || document.write("<script src='__ADMIN_JS__/jquery-2.0.3.

jQuery AJAX 方法

jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: 方法 描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象