Cet article présente principalement l'analyse de la fonction de rappel du code source de jQuery. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
est une fonction qui est appelée et exécutée via un pointeur de fonction. Si vous passez un pointeur de fonction en paramètre, alors lorsque le pointeur appelle cette fonction, nous l'appelons un rappel. . fonction. La fonction de rappel n'est pas appelée directement par l'implémenteur de la fonction, mais est appelée par une autre partie lorsqu'un événement ou une condition spécifique se produit pour répondre à l'événement ou à la condition. 回调函数
Grâce à la fonction de rappel pour le traitement, le code peut continuer à effectuer d'autres tâches sans attendre en vain. Dans le développement réel, les appels asynchrones sont souvent utilisés en 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代码执行完成后执行回调callbackDonc les deux points les plus importants pour comprendre la fonction de rappel :
1 Lorsqu'une fonction de rappel est passée en paramètre à une autre fonction, on transmet uniquement la définition de la fonction. Nous n'exécutons pas la fonction sur les paramètres. On ne passe pas une fonction avec une paire de parenthèses d'exécution () comme on exécute habituellement des fonctions 2. La fonction de rappel ne sera pas exécutée immédiatement, elle sera exécutée à un moment précis au sein de la fonction la contenant. le point est "rappelé". 2. Mode observateur Avant de comprendre l'objet de rappel de jquery, apprenons d'abord le mode observateur (mode SB) : Mode observateur : un objet agit comme Apour une tâche spécifique, qui avertiraPour l'objet观察者(Abonné) lorsque la tâche est démarrée ou terminée.观察者peut également être appelé观察者, qui pointe vers订阅者(éditeur). Lorsqu'un événement se produit,被观察者en informera被观察者.观察者
créé par $.Callbacks , ses méthodes Callback et add sont en fait conçues sur la base du modèle d'observateur de publication et d'abonnement 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();// 首先看一个场景
$.ajax({
url: '',
..
}).done(function(data) {
// 第一步处理数据
// 第二步处理DOM
$('aaron1').html(data.a)
$('aaron2').html(data.b)
$('aaron3').html(data.c)
// 其余处理
}) contient Done, 数据处理 et éventuellement html渲染. De cette façon, si différentes personnes devaient gérer le code, l’ajout de fonctions serait source de confusion et ne serait pas évolutif. 其它不同场景的业务逻辑
$.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);
}). Dans ce modèle, au lieu qu'un objet appelle les méthodes d'un autre objet, un objet s'abonne aux activités spécifiques d'un autre objet et est averti lorsque l'état change. Les abonnés sont également appelés observateurs, et les objets observés sont appelés éditeurs ou sujets. Lorsqu'un événement important se produit, l'éditeur avertit (appelle) tous les abonnés et peut souvent transmettre des messages sous la forme d'objets événementiels. 松散耦合
En bref, le mode observateur consiste à gérer les fonctions/processus métier et à les exécuter tous en même temps lorsqu'un certain événement est déclenché ou qu'une certaine tâche est terminée.
créé par$.Callbacks, ses méthodesCallbacketaddsont, en fait Conception basée sur le modèle d'observateur de publication et d'abonnementfire.（Publish/Subscribe）
est rarement utilisé par les développeurs généraux, et son développement et sa mise en œuvre sont principalement $.Callbacks et $.ajax. $.deferred
a été ajouté après la jQuery.Callbacks version 1.7. Il a été extrait de l'objet jquery dans la version 1.6. Il est principalement utilisé pour effectuer des opérations telles que la file d'attente de fonctions _Deferred et fournit add、remove、fire、lock. Quatre once、memory、unique、stopOnFalse effectuent des contrôles spéciaux. option
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中文网！
相关推荐：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Le rôle de index.html
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
