jQuery Callbacks の完全な関数コードの詳細な説明 (yourself_jquery による)-jsチュートリアル-php.cn

使用法は $.Callbacks とまったく同じですが、パラメータを持つ add、remove、fire、empty、has、およびコンストラクタ関数のみを実装します。$.Callbacks には、disable、disabled、fireWith、fired、lock、locked メソッドもあります。

コードは次のとおりです:

コードをコピーコードは次のとおりです:

String.prototype.trim = function ()
        {
            return this.replace( /^\s+|\s+$/g, '' );
        };

        // Simulate jQuery.Callbacks object
        function MyCallbacks( options )
        {
            var ops = { once: false, memory: false, unique: false, stopOnFalse: false };

            if ( typeof options === 'string' && options.trim() !== '' )
            {
                var opsArray = options.split( /\s+/ );
                for ( var i = 0; i < options.length; i++ )
{
if ( opsArray[i] === 'once' )
ops.once = true;
else if ( opsArray[i] === 'memory' )
ops.memory = true;
else if ( opsArray[i] === 'unique' )
ops.unique = true;
else if ( opsArray[i] === 'stopOnFalse' )
ops.stopOnFalse = true;
}
}

var ar = [];
var lastArgs = null;
var firedTimes = 0;

function hasName( name )
{
var h = false;

if ( typeof name === 'string'
&& name !== null
&& name.trim() !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === name )
{
h = true;
break;
}
}
}

return h;
}

// add a function
this.add = function ( fn )
{
if ( typeof fn === 'function' )
{
if ( ops.unique )
{
// check whether it had been added before
if ( fn.name !== '' && hasName( fn.name ) )
{
return this;
}
}

ar.push( fn );

if ( ops.memory )
{
// after added , call it immediately
fn.call( this, lastArgs );
}
}

return this;
};

// remove a function
this.remove = function ( fn )
{
if ( typeof ( fn ) === 'function'
&& fn.name !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === fn.name )
{
ar.splice( i, 1 );
}
}
}

return this;
};

// remove all functions
this.empty = function ()
{
ar.length = 0;
return this;
};

// check whether it includes a specific function
this.has = function ( fn )
{
var f = false;

if ( typeof ( fn ) === 'function'
&& fn.name !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === fn.name )
{
f = true;
break;
}
}
}

return f;
};

// 含まれる関数を 1 つずつ呼び出します
this.fire = function ( args )
{
if ( ops.once && firedTimes > 0 )
{
これを返す;
}

if ( ar.length > 0 )
{
var r;

for ( var i = 0; i < ar.length; i )
{
r = ar[i].call( this, args );

if ( ops.stopOnFalse && r === false )
{
ブレーク;
}
}
}

firedTimes ;

if ( ops.memory )
{
lastArgs = args;
}

これを返す;
};
};

测试関数数如下：（注意fn1 fn2 は匿名関数数、 fn2 戻り false 、 fn3 は有“名”関数数）

复制代代码如下:

var fn1 = function ( v )
{
console.log( 'fn1 ' ( v || '' ) );
};

var fn2 = function ( v )
{
console.log( 'fn2 ' ( v || '' ) );
return false;
};

function fn3( v )
{
console.log( 'fn3 ' ( v || '' ) );
};

1. 追加と起動をテストします

var cb=new MyCallbacks();

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.fire('hello')

出力:

fn1 hello
fn2 hello
fn3 hello

2.
var cb=new MyCallbacks();

の削除をテストします。

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.remove(fn1)
cb.fire('hello')
cb.remove(fn3)
cb.fire('hello')
出力:

fn1 こんにちは
fn2 こんにちは
fn3 こんにちは
-------------------------------- --
fn1 hello
fn2 hello

2. テストには
var cb=new MyCallbacks();

があります。

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.has(fn1)

cb.has(fn3)

出力:

偽

---------------

本当

3. パラメーターを使用してコンストラクターを 1 回テストします

var cb=new MyCallbacks('once')

cb.add(fn1)

cb.fire('hello')

cb.add(fn2)

cb.fire('hello')

出力:

こんにちは

-----------------

-----------------------------

4. パラメータを使用してコンストラクターをテストします:memory

var cb=new MyCallbacks('memory')

cb.add(fn1)

cb.fire('hello') // 出力: fn1 hello

cb.add(fn2) // 出力: fn2 hello

cb.fire('hello')

出力:

fn1 こんにちは

fn2 こんにちは

5. パラメーターを使用してコンストラクターをテストします: stopOnFalse

var cb=new MyCallbacks('stopOnFalse')

cb.add(fn1)

cb.add(fn2)

cb.add(fn3)

cb.fire('hello')

出力:

fn1 hello
fn2 hello
6. パラメーターを指定してコンストラクターをテストします: unique

var cb=new MyCallbacks('unique')

b.add(fn3)

cb.fire('hello')

出力:

fn3 こんにちは

7. 組み合わせたパラメーターを使用してコンストラクターをテストします。4 つの設定パラメーターを自由に組み合わせることができます。一度にすべての組み合わせをテストすることはできません。そうでない場合は、16 個のテストケースを作成する必要があります。T_T

var cb=new MyCallbacks('一度メモリに一意の stopOnFalse')

cb.add(fn1) // 出力: fn1

cb.add(fn2) // 出力: fn2

cb.add(fn3) // 出力: fn3

cb.fire('hello')

出力:

fn1 hello
fn2 hello
cb.fire('hello') // 出力: 出力なし

以下は公式 API ドキュメントです:

説明: コールバックリストを管理する強力な方法を提供する多目的コールバックリストオブジェクト。$.Callbacks() 関数は、jQuery $.ajax() および $.Deferred( ) コンポーネントを、新しいコンポーネントの機能を定義するための同様のベースとして使用できます。

コンストラクター: jQuery.Callbacks( flags )

flags
タイプ: 文字列
コールバックリストの動作を変更する、スペースで区切られたフラグのオプションのリスト。
可能なフラグ:
once: コールバックリストが 1 回だけ起動できるようにします (
memory: 以前の値を追跡し、リストが起動された後に追加されたコールバックを最新の「記憶された」値ですぐに呼び出します (Deferred のように)。
一意: コールバックは 1 回だけ追加できるようにします (リストに重複がないようにします)。
stopOnFalse: コールバックが false を返すと呼び出しを中断します。
デフォルトでは、コールバックリストはイベントコールバックリストのように動作し、次のことができます。複数回「解雇」される。

上記では、.add() と .fire() という 2 つの特定のメソッドが使用されていました。.add() メソッドはコールバックリストへの新しいコールバックの追加をサポートし、.fire() メソッドは追加された関数を実行して、同じリスト内のコールバックによって処理される引数を渡す方法。

コールバックを使用してパブリッシュ/サブスクライブモードのパブリッシュ/サブスクライブを実装する: (公式ドキュメント)

コードをコピーコードは次のとおりです:

var トピック = {};

jQuery.Topic = function ( id )
{
var callbacks,
Method,
topic = id && topic[id];

if ( !topic )
{
callbacks = jQuery.Callbacks();
topic = {
パブリッシュ: callbacks.fire,
サブスクライブ: callbacks.add,
unsubscribe: callbacks.remove
};
if ( id )
{
トピック[id] = トピック;
}
}
トピックに戻る;
};

を使用します

复制代代码如下:

$.Topic( 'mailArrived' ).subscribe( function ( e )
{
console.log( '新しいメールがありました! ' );
console.log( "メールタイトル : " e.title );
console.log( "メール内容: " e.content );
}
);

$.Topic( 'mailArrived' ).publish( { title: 'メールタイトル', content: 'メール内容' } );

实现了残りの全機能：callbacks.disable 、 callbacks.disabled 、 callbacks.fired 、callbacks.fireWith 、 callbacks.lock 、 callbacks.locked 、その後重构了下代码结构、将实现放入了秘密関数数内、その後プロセス経由で window.callbacks が例を返します。免責のために new が必要です。

具体的なコードは次のとおりです。jQuery バージョンに応じて使用できるコールバックの比は次のとおりです。

复制代码代码如下:

( function ( window, undefined )
{
// Simulate jQuery.Callbacks object
function Callbacks( options )
{
var ops = { once: false, memory: false, unique: false, stopOnFalse: false },
ar = [],
lastArgs = null,
firedTimes = 0,
_disabled = false,
_locked = false;

if ( typeof options === 'string' && options.trim() !== '' )
{
var opsArray = options.split( /\s+/ );
for ( var i = 0; i < options.length; i++ )
{
if ( opsArray[i] === 'once' )
ops.once = true;
else if ( opsArray[i] === 'memory' )
ops.memory = true;
else if ( opsArray[i] === 'unique' )
ops.unique = true;
else if ( opsArray[i] === 'stopOnFalse' )
ops.stopOnFalse = true;
}
}

function hasName( name )
{
var h = false;

if ( typeof name === 'string'
&& name !== null
&& name.trim() !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === name )
{
h = true;
break;
}
}
}

return h;
}

ar.push( fn );

if ( ops.memory )
{
// after added , call it immediately
fn.call( this, lastArgs );
}
}

return this;
};

// remove all functions
this.empty = function ()
{
ar.length = 0;
return this;
};

// check whether it includes a specific function
this.has = function ( fn )
{
var f = false;

if ( typeof ( fn ) === 'function'
&& fn.name !== ''
&& ar.length > 0 )
{
for ( var i = 0; i < ar.length; i++ )
{
if ( ar[i].name === fn.name )
{
f = true;
break;
}
}
}

return f;
};

this.disable = function ()
{
_disabled = true;
return this;
};

this.disabled = function ()
{
return _disabled;
};

this.fired = function ()
{
return firedTimes > 0;
};

                function _fire( context, args )
                {
                    if ( _disabled || ops.once && firedTimes > 0 || _locked )
                    {
                        return;
                    }

                    if ( ar.length > 0 )
                    {
                        var r;

                        for ( var i = 0; i < ar.length; i++ )
                        {
                            r = ar[i].call( context, args );

                            if ( ops.stopOnFalse && r === false )
                            {
                                break;
                            }
                        }
                    }

firedTimes++;

                    if ( ops.memory )
                    {
                        lastArgs = args;
                    }

};

                this.fireWith = function ( context, args )
                {
                    context = context || this;
                    _fire( context, args );
                    return this;
                };

                this.fire = function ( args )
                {
                    _fire( this, args );
                    return this;
                };

                this.lock = function ()
                {
                    _locked = true;
                    return this;
                };

this.locked = function ()
{
return _locked;
};

};

// ファクトリメソッドとしてグローバルに公開
window.callbacks = function ( options )
{
return new Callbacks( options );
};

} )( window );