이 글은 주로 jQuery 소스 코드의 콜백 함수에 대한 분석을 소개합니다. 이는 특정 참조 값을 가지고 있습니다. 이제는 필요한 친구들이 참조할 수 있습니다.
콜백 함수는 함수 포인터를 매개변수로 전달하면 호출되고 실행되는 함수입니다. then this 포인터가 이 함수를 호출할 때 우리는 그것이 콜백 함수라고 말합니다. 콜백 함수는 함수 구현자가 직접 호출하는 것이 아니라 특정 이벤트나 조건이 발생했을 때 상대방이 해당 이벤트나 조건에 대응하기 위해 호출하는 함수이다. 回调函数是一个通过函数指针来调用执行的函数，如果你把一个函数的指针作为参数传递出去，那么这个指针调用这个函数的时候，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。
好处： 使用回调函数进行处理，代码就可以继续进行其他任务，而无需空等。实际开发中，经常在javascript中使用异步调用。
异步回调
$(document).ready(callback);
$(document).on(‘click’,callback)
$.ajax({
url: "aaron.html",
context: document
}).done(function() {
//成功执行
}).fail(function() {
//失败执行
);
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});同步
var test1 = function(callback) {
//执行长时间操作
callback();
}
test1(function() {
//执行回调中的方法
});
一个同步(阻塞)中使用回调的例子，目的是在test1代码执行完成后执行回调callback所以理解回调函数最重要的2点：
1、一个回调函数作为参数传递给另一个函数是，我们仅仅传递了函数定义。我们并没有在参数中执行函数。我们并不传递像我们平时执行函数一样带有一对执行小括号()的函数
2、回调函数并不会马上被执行，它会在包含它的函数内的某个特定时间点被“回调”。
在理解jquery的回调对象之前我们先来学习一下观察者模式(SB模式)：
观察者模式： 一个对象作为一个特定任务的观察者，当这个任务出发或者执行完毕之后通知观察者(Subscriber)。观察者也可以叫做订阅者，它指向被观察者(Publisher)，当事件发生时，被观察者会通知观察者。
对于$.Callbacks 创建的Callback对象，它的add和fire方法就是，其实就是基于发布订阅（Publish/Subscribe）的观察者模式的设计。
// 模拟一下这种模式
function aa() {
console.log('aa');
}
function bb() {
console.log('bb');
}
var m_db = {
Callbacks: [],
add: function(fn) {
this.Callbacks.push(fn);
},
fire: function() {
this.Callbacks.forEach(function(fn){
fn();
})
}
}
m_db.add(aa);
m_db.add(bb);
m_db.fire();设计原理
开始构建一个存放回调的数组，如this.callbacks= [] 添加回调时，将回调push进this.callbacks，执行则遍历this.callbacks执行回调，也弹出1跟2了。当然这只是简洁的设计，便于理解，整体来说设计的思路代码都是挺简单的，那么我们从简单的设计深度挖掘下这种模式的优势。
模式的实际使用
// 首先看一个场景
$.ajax({
url: '',
..
}).done(function(data) {
// 第一步处理数据
// 第二步处理DOM
$('aaron1').html(data.a)
$('aaron2').html(data.b)
$('aaron3').html(data.c)
// 其余处理
})首先，所有的逻辑都写在done方法里面，这样确实是无可厚非的，但是问题就是逻辑太复杂了。Done里面有数据处理、html渲染、还可能有其它不同场景的业务逻辑。这样如果是换做不同的人去维护代码，增加功能就会显得很混乱而且没有扩展性。
$.ajax({
url: '',
..
}).done(function(data) {
// 第一步处理数据
processData(data);
// 第二步处理DOM
processDom(data);
// 其余处理
processOther(data);
})这样看着时好一些了，通过同步执行来一次实现三个方面的处理，每一方面的处理都提取出来，但是这样的写法几乎就是“就事论事”的处理，达不到抽象复用。
var m_cb = {
callbacks: [],
add: function(fn){
this.callbacks.push(fn);
},
fire: function(data){
this.callbacks.forEach(function(fn){
fn(data);
})
}
}
m_cb.add(function(data){
// 数据处理
})
m_cb.add(function(data){
// DOM处理
})
m_cd.add(function(data){
// 其余处理
})
$.ajax({
url: '',
...
}).done(function(data){
m_cd.fire(data);
})这样使用了观察者模式之后是不是感觉好多了呢，设计该模式背后的主要动力是促进形成松散耦合。在这种模式中，并不是一个对象调用另一个对象的方法，而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。订阅者也称为观察者，而被观察的对象称为发布者或主题。当发生了一个重要的事件时，发布者将会通知（调用）所有订阅者并且可能经常以事件对象的形式传递消息。
总之、观察者模式就是将函数/业务处理管理起来，当一定的事件触发或者时某一任务执行完毕后，一次性执行。
对于$.Callbacks创建的Callback对象，它的add和fire方法就是，其实就是基于发布订阅（Publish/Subscribe）的观察者模式的设计。
$.Callbacks一般的开发者使用的较少，它的开发实现主要时为$.ajax以及$.deferred。
jQuery.Callbacks是jquery在1.7版本之后加入的，是从1.6版中的_Deferred对象中抽离的，主要用来进行函数队列的add、remove、fire、lock等操作，并提供once、memory、unique、stopOnFalse四个option이점: 처리에 콜백 함수를 사용하면 코드는 헛되이 기다리지 않고 다른 작업을 계속 수행할 수 있습니다. 실제 개발에서는 JavaScript에서 비동기 호출이 자주 사용됩니다.
function aa() {
console.log('aa');
}
function bb() {
console.log('bb');
}
var cb = $.Callbacks();
cb.add(aa);
cb.add(bb);
cb.fire();
// aa
// bbfunction fn1(value) {
console.log(value);
}
function fn2(value) {
fn1("fn2 says: " + value);
return false;
}
var cb1 = $.Callbacks();
cb1.add(fn1); // 添加一个进入队列
cb1.fire('foo'); // 执行一下
// foo
cb1.add(fn2); // 再添一个
cb1.fire('bar'); // 一次性执行
// bar
// fn2 says: bar
cb1.remove(fn2); // 移除一个
cb1.fire('111'); // 执行剩下的那一个
// 111관찰자 패턴: 개체 특정 작업에 대한#🎜🎜#관찰자역할을 하며 작업이 시작되거나 완료되면관찰자(구독자)에게 알립니다.Observer는Observed(게시자)를 가리키는Subscriber라고도 할 수 있습니다. 이벤트가 발생하면Observed가 됩니다.관찰자에게 알립니다.
$.Callbacks 에 의해 생성된 Callback 개체의 경우 해당 개체의 add 및 fire 실제로 이 방법은 게시 및 구독 (Publish/Subscribe)의 관찰자 패턴 설계를 기반으로 합니다. #🎜🎜#callbacks.add() ：回调列表中添加一个回调或回调的集合。 callbacks.disable() ：禁用回调列表中的回调。 callbacks.disabled() ：确定回调列表是否已被禁用。 callbacks.empty() ：从列表中删除所有的回调。 callbacks.fire() ：用给定的参数调用所有的回调。 callbacks.fired() ：访问给定的上下文和参数列表中的所有回调。 callbacks.fireWith() ：访问给定的上下文和参数列表中的所有回调。 callbacks.has() ：确定列表中是否提供一个回调。 callbacks.lock() ：锁定当前状态的回调列表。 callbacks.locked() ：确定回调列表是否已被锁定。 callbacks.remove() ：从回调列表中的删除一个回调或回调集合。
패턴의 실제 사용법
jQuery.Callbacks = function(options) {
// 首先对参数进行缓冲
options = typeof options === "string" ?
(optionsCache[options] || createOptions(options)) :
jQuery.extend({}, options);
// 实现代码
// 函数队列的处理
fire = function() {}
// 自身方法
self = {
add: function() {},
remove: function() {},
has: function(fn) {},
empty: function() {},
disable: function() {},
disabled: function() {},
lock: function() {},
locked: function() {},
fireWith: function(context, args) {},
fire: function() {},
fired: function() {}
};
return self;
};완료에는 데이터 처리, html 렌더링이 포함되어 있으며 다양한 시나리오에 대한 비즈니스 논리도 포함될 수 있습니다. 이러한 방식으로, 서로 다른 사람들이 코드를 유지 관리한다면 기능을 추가하는 것은 혼란스럽고 확장성이 없습니다. #🎜🎜#// 处理通过空格分隔的字符串
var str = "once queue";
var option = {};
$.each(str.match(/\S+/g) || [], function (_index, item) {
option[item] = true;
})
console.log(option);
// {once: true, queue: true}var callbacks = $.Callbacks('once');
callbacks.add(function() {
alert('a');
})
callbacks.add(function() {
alert('b');
})
callbacks.fire(); //输出结果: 'a' 'b'
callbacks.fire(); //未执行느슨한 결합의 형성을 촉진하는 것입니다. 이 패턴에서는 한 객체가 다른 객체의 메서드를 호출하는 대신 한 객체가 다른 객체의 특정 활동을 구독하고 상태가 변경되면 알림을 받습니다. 구독자는 관찰자라고도 하며 관찰되는 개체는 게시자 또는 주제라고 합니다. 중요한 이벤트가 발생하면 게시자는 모든 구독자에게 알림(전화)을 하고 이벤트 객체 형태로 메시지를 전달하는 경우가 많습니다. #🎜🎜##🎜🎜#간단히 말하면, 옵저버 패턴은 기능/비즈니스 프로세스를 관리하고, 특정 이벤트가 발생하거나 특정 작업이 완료되면 한꺼번에 실행하는 패턴입니다. #🎜🎜##🎜🎜#$.Callbacks에 대해콜백이 생성되었습니다. 개체, 해당add및fire메서드는 실제로 게시 및 구독(Publish/Subscribe)의 관찰자 패턴을 기반으로 설계되었습니다.
$.Callbacks는 개발자가 덜 일반적으로 사용하며 주로 $.ajax 및 deferred입니다. 코드>. #🎜🎜##🎜🎜#jQuery.Callbacks는 jquery 버전 1.7 이후에 버전 1.6의 _Deferred 객체에서 추가되었습니다. 함수 대기열의 추가, 제거, 실행 및 잠금과 같은 작업을 수행하고 네 가지 옵션(<code>once, memory, Unique, stopOnFalse )을 제공합니다. 몇 가지 특별한 제어를 수행합니다. #🎜🎜##🎜🎜#이 함수는 이벤트 트리거 메커니즘, 즉 관찰자 디자인 패턴의 구독 및 게시 모드에서 자주 사용됩니다. $.Callbacks는 주로 ajax, deferred 및 queue에 나타납니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜# 이 방법의 사용법을 자세히 분석해 보겠습니다#🎜🎜#function aa() {
console.log('aa');
}
function bb() {
console.log('bb');
}
var cb = $.Callbacks();
cb.add(aa);
cb.add(bb);
cb.fire();
// aa
// bbfunction fn1(value) {
console.log(value);
}
function fn2(value) {
fn1("fn2 says: " + value);
return false;
}
var cb1 = $.Callbacks();
cb1.add(fn1); // 添加一个进入队列
cb1.fire('foo'); // 执行一下
// foo
cb1.add(fn2); // 再添一个
cb1.fire('bar'); // 一次性执行
// bar
// fn2 says: bar
cb1.remove(fn2); // 移除一个
cb1.fire('111'); // 执行剩下的那一个
// 111$.Callbacks（）就是一个工厂函数。
jQuery.Callbacks() 的 API 列表如下：
callbacks.add() ：回调列表中添加一个回调或回调的集合。 callbacks.disable() ：禁用回调列表中的回调。 callbacks.disabled() ：确定回调列表是否已被禁用。 callbacks.empty() ：从列表中删除所有的回调。 callbacks.fire() ：用给定的参数调用所有的回调。 callbacks.fired() ：访问给定的上下文和参数列表中的所有回调。 callbacks.fireWith() ：访问给定的上下文和参数列表中的所有回调。 callbacks.has() ：确定列表中是否提供一个回调。 callbacks.lock() ：锁定当前状态的回调列表。 callbacks.locked() ：确定回调列表是否已被锁定。 callbacks.remove() ：从回调列表中的删除一个回调或回调集合。
源码结构
jQuery.Callbacks = function(options) {
// 首先对参数进行缓冲
options = typeof options === "string" ?
(optionsCache[options] || createOptions(options)) :
jQuery.extend({}, options);
// 实现代码
// 函数队列的处理
fire = function() {}
// 自身方法
self = {
add: function() {},
remove: function() {},
has: function(fn) {},
empty: function() {},
disable: function() {},
disabled: function() {},
lock: function() {},
locked: function() {},
fireWith: function(context, args) {},
fire: function() {},
fired: function() {}
};
return self;
};参数处理
// 处理通过空格分隔的字符串
var str = "once queue";
var option = {};
$.each(str.match(/\S+/g) || [], function (_index, item) {
option[item] = true;
})
console.log(option);
// {once: true, queue: true}Callbacks内部维护着一个List数组。这个数组用于存放我们订阅的对象，它是通过闭包来实现长期驻存的。添加回调时，将回调push进list，执行则遍历list执行回调。
Callbacks 有4个参数。
once 的作用是使callback队列只执行一次。
var callbacks = $.Callbacks('once');
callbacks.add(function() {
alert('a');
})
callbacks.add(function() {
alert('b');
})
callbacks.fire(); //输出结果: 'a' 'b'
callbacks.fire(); //未执行// 来看一下具体怎么实现
// jQuery是在执行第一个fire的时候直接给清空list列表了，然后在add的地方给判断下list是否存在，从而达到这样的处理
function Callbacks(options){
var list = [];
var self = {};
self: {
add: function(fn){
list.push(fn);
},
fire: function(data){
this.list.forEach(function(item){
item(data);
})
if(options == 'once') {
list = undefined;
}
}
}
return self;
}// $jQuery.Callbacks的处理,在fire中调用了 self.disable(); 方法
// 禁用回调列表中的回调。
disable: function() {
list = stack = memory = undefined;
return this;
}memory 保持以前的值，将添加到这个列表的后面的最新的值立即执行调用任何回调
function fn1(val) {
console.log('fn1 says ' + val);
}
function fn2(val) {
console.log('fn2 says ' + val);
}
function fn3(val) {
console.log('fn3 says ' + val);
}
var cbs = $.Callbacks('memory');
cbs.add(fn1);
cbs.fire('foo'); // fn1 says foo
console.log('..........')
cbs.add(fn2); // 这里在添加一个函数进入队列的同时，就立马执行了这个 回调了
cbs.fire('bar');
// fn2 says foo 这个东东比较特殊~
// fn1 says bar
// fn2 says bar
console.log('..........')
cbs.add(fn3);
cbs.fire('aaron');
// fn3 says bar
// fn1 says aaron
// fn2 says aaron
// fn3 says aaron// 需要解决的问题一个就是如何获取上一个参数，以及add后的执行
function Callbacks(options) {
var list = [];
var self;
var firingStart;
var memory;
function _fire(data) {
memory = options === 'memory' && data;
firingIndex = firingStart || 0; //
firingStart = 0;
firingLength = list.length;
for (; list && firingIndex < firingLength; firingIndex++) {
list[firingIndex](data)
}
}
self = {
add: function(fn) {
var start = list.length;
list.push(fn)
// 如果参数是memory
if (memory) {
firingStart = start; //获取最后一值
_fire(memory); // 同时执行
}
},
fire: function(args) {
if (list) {
_fire(args)
}
}
}
return self;
}Unique：确保一次只能添加一个回调(所以在列表中没有重复的回调)
function fn1(val) {
console.log('fn1 says ' + val);
}
var callbacks = $.Callbacks( "unique" );
callbacks.add( fn1 );
callbacks.add( fn1 ); // repeat addition
callbacks.add( fn1 );
callbacks.fire( "foo" );stopOnFalse: 当一个回调返回false 时中断调用
function fn1(value) {
console.log(value);
return false;
}
function fn2(value) {
fn1("fn2 says: " + value);
return false;
}
var callbacks = $.Callbacks("stopOnFalse");
callbacks.add(fn1);
callbacks.fire("foo");
callbacks.add(fn2);
callbacks.fire("bar");
// foo
// bar$.callback()的源码
jQuery.Callbacks = function( options ) {
// Convert options from String-formatted to Object-formatted if needed
// (we check in cache first)
//通过字符串在optionsCache寻找有没有相应缓存，如果没有则创建一个，有则引用
//如果是对象则通过jQuery.extend深复制后赋给options。
options = typeof options === "string" ?
( optionsCache[ options ] || createOptions( options ) ) :
jQuery.extend( {}, options );
var // Last fire value (for non-forgettable lists)
memory, // 最后一次触发回调时传的参数
// Flag to know if list was already fired
fired, // 列表中的函数是否已经回调至少一次
// Flag to know if list is currently firing
firing, // 列表中的函数是否正在回调中
// First callback to fire (used internally by add and fireWith)
firingStart, // 回调的起点
// End of the loop when firing
firingLength, // 回调时的循环结尾
// Index of currently firing callback (modified by remove if needed)
firingIndex, // 当前正在回调的函数索引
// Actual callback list
list = [], // 回调函数列表
// Stack of fire calls for repeatable lists
stack = !options.once && [],// 可重复的回调函数堆栈，用于控制触发回调时的参数列表
// Fire callbacks// 触发回调函数列表
fire = function( data ) {
//如果参数memory为true，则记录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 ) {
// 阻止未来可能由于add所产生的回调
memory = false; // To prevent further calls using add
break; //由于参数stopOnFalse为true，所以当有回调函数返回值为false时退出循环
}
}
//标记回调结束
firing = false;
if ( list ) {
if ( stack ) {
if ( stack.length ) {
//从堆栈头部取出，递归fire
fire( stack.shift() );
}
} else if ( memory ) {//否则，如果有记忆
list = [];
} else {//再否则阻止回调列表中的回调
self.disable();
}
}
},
// Actual Callbacks object
// 暴露在外的Callbacks对象,对外接口
self = {
// Add a callback or a collection of callbacks to the list
add: function() { // 回调列表中添加一个回调或回调的集合。
if ( list ) {
// First, we save the current length
//首先我们存储当前列表长度
var start = list.length;
(function add( args ) { //jQuery.each，对args传进来的列表的每一个对象执行操作
jQuery.each( args, function( _, arg ) {
var type = jQuery.type( arg );
if ( type === "function" ) {
if ( !options.unique || !self.has( arg ) ) { //确保是否可以重复
list.push( arg );
}
//如果是类数组或对象,递归
} else if ( arg && arg.length && type !== "string" ) {
// Inspect recursively
add( arg );
}
});
})( arguments );
// Do we need to add the callbacks to the
// current firing batch?
// 如果回调列表中的回调正在执行时，其中的一个回调函数执行了Callbacks.add操作
// 上句话可以简称：如果在执行Callbacks.add操作的状态为firing时
// 那么需要更新firingLength值
if ( firing ) {
firingLength = list.length;
// With memory, if we're not firing then
// we should call right away
} else if ( memory ) {
//如果options.memory为true，则将memory做为参数，应用最近增加的回调函数
firingStart = start;
fire( memory );
}
}
return this;
},
// Remove a callback from the list
// 从函数列表中删除函数（集）
remove: function() {
if ( list ) {
jQuery.each( arguments, function( _, arg ) {
var index;
// while循环的意义在于借助于强大的jQuery.inArray删除函数列表中相同的函数引用（没有设置unique的情况）
// jQuery.inArray将每次返回查找到的元素的index作为自己的第三个参数继续进行查找，直到函数列表的尽头
// splice删除数组元素，修改数组的结构
while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
list.splice( index, 1 );
// Handle firing indexes
// 在函数列表处于firing状态时，最主要的就是维护firingLength和firgingIndex这两个值
// 保证fire时函数列表中的函数能够被正确执行（fire中的for循环需要这两个值
if ( firing ) {
if ( index <= firingLength ) {
firingLength--;
}
if ( index <= firingIndex ) {
firingIndex--;
}
}
}
});
}
return this;
},
// Check if a given callback is in the list.
// If no argument is given, return whether or not list has callbacks attached
// 回调函数是否在列表中.
has: function( fn ) {
return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length );
},
// Remove all callbacks from the list
// 从列表中删除所有回调函数
empty: function() {
list = [];
firingLength = 0;
return this;
},
// Have the list do nothing anymore
// 禁用回调列表中的回调。
disable: function() {
list = stack = memory = undefined;
return this;
},
// Is it disabled?
// 列表中否被禁用
disabled: function() {
return !list;
},
// Lock the list in its current state
// 锁定列表
lock: function() {
stack = undefined;
if ( !memory ) {
self.disable();
}
return this;
},
// Is it locked?
// 列表是否被锁
locked: function() {
return !stack;
},
// Call all callbacks with the given context and arguments
// 以给定的上下文和参数调用所有回调函数
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;
},
// Call all the callbacks with the given arguments
// 以给定的参数调用所有回调函数
fire: function() {
self.fireWith( this, arguments );
return this;
},
// To know if the callbacks have already been called at least once
// // 回调函数列表是否至少被调用一次
fired: function() {
return !!fired;
}
};
return self;
};未完待续~~
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
위 내용은 jQuery 소스코드의 콜백 함수 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
