jQuery 소스 코드의 콜백에 대해 알아보기

본 글은 주로 jQuery 소스코드의 콜백 학습을 소개하고 있습니다. 이제는 누구나 참고할 수 있도록 공유하겠습니다.

jQuery 소스코드 학습의 콜백

jQuery, deferred는 콜백을 통해 비동기적으로 구현되며 구현의 핵심은 콜백입니다. ajax、deferred通过回调实现异步，其实现核心是Callbacks。

使用方法

使用首先要先新建一个实例对象。创建时可以传入参数flags，表示对回调对象的限制，可选值如下表示。

• stopOnFalse:回调函数队列中的函数返回false时停止触发

• once:回调函数队列只能被触发一次

• memory:记录上一次触发队列传入的值，新添加到队列中的函数使用记录值作为参数，并立即执行。

• unique:函数队列中函数都是唯一的

var cb = $.Callbacks('memory');
cb.add(function(val){
    console.log('1: ' + val)
})
cb.fire('callback')
cb.add(function(val){
    console.log('2: ' + val)
})
// console输出
1: callback
2: callback

Callbacks 提供了一系列实例方法来操作队列和查看回调对象的状态。

• add: 添加函数到回调队列中，可以是函数或者函数数组

• remove: 从回调队列中删除指定函数

• has: 判断回调队列里是否存在某个函数

• empty: 清空回调队列

• disable: 禁止添加函数和触发队列，清空回调队列和上一个传入的值

• disabled: 判断回调对象是否被禁用

• lock: 禁用fire，若memory非空则同时add无效

• locked: 判断是否调用了lock

• fireWith: 传入context和参数，触发队列

• fire: 传入参数触发对象，context是回调对象

源码解析

$.Callback()方法内部定义了多个局部变量和方法，用于记录回调对象的状态和函数队列等，返回self，在self实现了上述回调对象的方法，用户只能通过self提供的方法来更改回调对象。这样的好处是保证除了self之外，没有其他修改回调对象的状态和队列的途径。

其中，firingIndex为当前触发函数在队列中的索引，list是回调函数队列，memory记录上次触发的参数，当回调对象实例化时传入memory时会用到，queue保存各个callback执行时的context和传入的参数。self.fire(args)实际是self.fireWith(this,args)，self.fireWith内部则调用了在Callbacks定义的局部函数fire。

    ...
    // 以下变量和函数 外部无法修改，只能通过self暴露的方法去修改和访问
    var // Flag to know if list is currently firing
        firing,

        // Last fire value for non-forgettable lists
        // 保存上一次触发callback的参数，调用add之后并用该参数触发
        memory,

        // Flag to know if list was already fired
        fired,

        // Flag to prevent firing
        // locked==true fire无效 若memory非空则同时add无效
        locked,

        // Actual callback list
        // callback函数数组
        list = [],

        // Queue of execution data for repeatable lists
        // 保存各个callback执行时的context和传入的参数
        queue = [],

        // Index of currently firing callback (modified by add/remove as needed)
        // 当前正触发callback的索引
        firingIndex = -1,

        // Fire callbacks
        fire = function() {
            ...
        },
        
        // Actual Callbacks object
        self = {
            // Add a callback or a collection of callbacks to the list
            add: function() {
                ...
            },
            ...
            // Call all callbacks with the given context and arguments
            fireWith: function( context, args ) {
                if ( !locked ) {
                    args = args || [];
                    args = [ context, args.slice ? args.slice() : args ]; // :前为args是数组，:后是string
                    queue.push( args );
                    if ( !firing ) {
                        fire();
                    }
                }
                return this;
            },

            // Call all the callbacks with the given arguments
            fire: function() {
                self.fireWith( this, arguments );
                return this;
            },
            ...
        }

通过self.add添加函数到回调队列中，代码如下。先判断是否memory且非正在触发，如果是则将fireIndex移动至回调队列的末尾，并保存memory。接着使用立即执行函数表达式实现add函数，在该函数内遍历传入的参数，进行类型判断后决定是否添加到队列中，如果回调对象有unique标志，则还要判断该函数在队列中是否已存在。如果回调对象有memory标志，添加完毕之后还会触发fire，执行新添加的函数。

            add: function() {
                if ( list ) {

                    // If we have memory from a past run, we should fire after adding
                    // 如果memory非空且非正在触发，在queue中保存memory的值,说明add后要执行fire
                    // 将firingIndex移至list末尾 下一次fire从新add进来的函数开始
                    if ( memory && !firing ) {
                        firingIndex = list.length - 1;
                        queue.push( memory );
                    }

                    ( function add( args ) {
                        jQuery.each( args, function( _, arg ) {
                            // 传参方式为add(fn)或add(fn1,fn2)
                            if ( jQuery.isFunction( arg ) ) {
                                /**
                                 * options.unique==false
                                 * 或
                                 * options.unique==true&&self中没有arg
                                 */
                                if ( !options.unique || !self.has( arg ) ) {
                                    list.push( arg );
                                }
                            } else if ( arg && arg.length && jQuery.type( arg ) !== "string" ) {
                                // 传参方式为add([fn...]) 递归
                                // Inspect recursively
                                add( arg );
                            }
                        } );
                    } )( arguments ); //arguments为参数数组 所以add的第一步是each遍历

                    //添加到list后若memory真则fire，此时firingIndex为回调队列的最后一个函数
                    if ( memory && !firing ) {
                        fire();
                    }
                }
                return this;
            }

fire、fireWith方法内部实际调用了局部函数fire，其代码如下。触发时，需要更新fired和firing，表示已触发和正在触发。通过for循环执行队里中的函数。结束循环后，将firingIndex更新为-1，表示下次触发从队列中的第一个函数开始。遍历在fireWith中更新过的queue，queue是保存数组的数组，每个数组的第一个元素是context,第二个元素是参数数组。执行函数时要是否返回false且回调对象有stopOnFalse

사용방법

사용하려면 먼저 새로운 인스턴스 객체를 생성해야 합니다. 생성 시 flags 매개변수를 전달하여 콜백 개체에 대한 제한 사항을 나타낼 수 있습니다. 선택 값은 다음과 같습니다.

• stopOnFalse: 콜백 함수 대기열의 함수가 false

를 반환하면 트리거를 중지합니다. < li>
once: 콜백 함수 큐는 한 번만 트리거될 수 있습니다

• memory: 마지막 트리거 큐에 전달된 값을 기록합니다. 새로 추가된 큐에 넣은 함수는 레코드 값을 인자로 받아 즉시 실행됩니다.

• 고유: 함수 대기열의 함수는 모두 고유합니다.

// Fire callbacks
        fire = function() {

            // Enforce single-firing
            // 执行单次触发
            locked = locked || options.once;

            // Execute callbacks for all pending executions,
            // respecting firingIndex overrides and runtime changes
            // 标记已触发和正在触发
            fired = firing = true;
            // 循环调用list中的回调函数
            // 循环结束之后 firingIndex赋-1 下一次fire从list的第一个开始 除非firingIndex被修改过
            // 若设置了memory，add的时候会修改firingIndex并调用fire
            // queue在fireWith函数内被更新，保存了触发函数的context和参数
            for ( ; queue.length; firingIndex = -1 ) {
                memory = queue.shift();
                while ( ++firingIndex < list.length ) { 

                    // Run callback and check for early termination
                    // memory[0]是content memory[1]是参数
                    if ( list[ firingIndex ].apply( memory[ 0 ], memory[ 1 ] ) === false &&
                        options.stopOnFalse ) {
                        
                        // Jump to end and forget the data so .add doesn&#39;t re-fire
                        // 当前执行函数范围false且options.stopOnFalse==true 直接跳至list尾 终止循环
                        firingIndex = list.length;
                        memory = false;
                    }
                }
            }

            // 没设置memory时不保留参数
            // 设置了memory时 参数仍保留在其中
            // Forget the data if we&#39;re done with it
            if ( !options.memory ) {
                memory = false;
            }

            firing = false;

            // Clean up if we&#39;re done firing for good
            if ( locked ) {

                // Keep an empty list if we have data for future add calls
                if ( memory ) {
                    list = [];

                // Otherwise, this object is spent
                } else {
                    list = "";
                }
            }
        },

콜백은 일련의 예제 대기열을 조작하고 콜백 객체의 상태를 보는 방법입니다.

• add: 함수 또는 함수 배열일 수 있는 함수를 콜백 대기열에 추가합니다

remove: 콜백 대기열에서 지정된 함수를 제거합니다

• has: 콜백 대기열에 함수가 있는지 확인🎜 li>
• 🎜 비어 있음: 콜백 대기열 지우기🎜
• 🎜비활성화: 함수 추가 및 트리거 대기열을 비활성화하고 콜백 대기열 및 마지막 수신 값🎜 li>
• 🎜disabled: 콜백 객체가 비활성화되었는지 확인🎜
• 🎜lock: 비활성화 fire, 메모리가 비어 있지 않으면 추가가 동시에 유효하지 않습니다🎜
• 🎜locked: lock🎜
• 🎜fireWith가 호출됩니다.: 컨텍스트와 매개변수를 전달하여 대기열을 트리거합니다🎜
• 🎜fire: 개체를 트리거하는 매개변수를 전달합니다. context code>는 콜백 개체입니다🎜

소스 코드 분석

🎜$.Callback() 메소드는 기록을 위한 여러 지역 변수와 메소드를 정의합니다. 콜백 객체의 상태 및 함수 대기열은 self로 반환됩니다. 위의 콜백 객체 메소드는 self에 구현되어 있습니다. . 사용자는 self에서 제공하는 메소드만을 사용하여 콜백 객체를 변경할 수 있습니다. 이것의 장점은 self를 제외하고 콜백 객체의 상태와 대기열을 수정할 수 있는 다른 방법이 없도록 한다는 것입니다. 🎜🎜그 중 firingIndex는 대기열에 있는 현재 트리거 함수의 인덱스이고, list는 콜백 함수 대기열이며, memory는 콜백 객체가 인스턴스화될 때 memory가 전달될 때 사용됩니다. queue는 각 콜백이 실행될 때 전달되는 컨텍스트와 매개변수를 저장합니다. self.fire(args)는 실제로 self.fireWith(this, args)이고 self.fireWith는 내부적으로 콜백 로컬 함수 <code>fire가 정의되었습니다. 🎜rrreee🎜self.add를 통해 콜백 큐에 함수를 추가하면 코드는 다음과 같습니다. 먼저 메모리인지, 트리거되고 있지 않은지 확인하세요. 그렇다면 fireIndex를 콜백 대기열의 끝으로 이동하고 메모리를 저장하세요. 그런 다음 즉시 실행 함수 표현식을 사용하여 추가 기능을 구현하고, 함수에서 들어오는 매개변수를 순회하고, 콜백 객체에 unique 플래그가 있는 경우 유형 판단을 수행한 후 대기열에 추가할지 여부를 결정합니다. , 해당 기능이 이미 대기열에 존재하는지 여부도 판단해야 합니다. 콜백 객체에 memory 플래그가 있는 경우 추가가 완료된 후 fire가 트리거되어 새로 추가된 함수를 실행합니다. 🎜rrreee🎜 fire 및 fireWith 메서드는 실제로 로컬 함수 fire를 호출하며 코드는 다음과 같습니다. 실행되면 실행됨 및 실행이 실행되어 실행되고 있음을 나타내도록 업데이트되어야 합니다. for 루프를 통해 대기열에 있는 함수를 실행합니다. 루프를 종료한 후 fireingIndex를 -1로 업데이트하여 다음 실행이 대기열의 첫 번째 함수에서 시작됨을 나타냅니다. fireWith에서 업데이트된 queue를 탐색합니다. queue는 배열을 보유하는 배열입니다. 각 배열의 첫 번째 요소는 context 입니다. code>에서 두 번째 요소는 매개변수 배열입니다. 함수 실행 시 <code>false를 반환할지 여부와 콜백 개체에 stopOnFalse 플래그가 있으면 트리거를 중지합니다. 🎜rrreee🎜 🎜🎜위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 🎜🎜관련 권장 사항: 🎜🎜🎜js 비동기 for 루프 소개🎜🎜🎜🎜🎜jQuery-Ajax는 Json 데이터를 요청하고 이를 프런트 엔드 페이지에 로드합니다🎜🎜🎜

위 내용은 jQuery 소스 코드의 콜백에 대해 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!