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

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery Callbacks の完全な関数コードの詳細な説明 (yourself_jquery による)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:12 PM

jquery

使用法は $.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                 {
                    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                     {
                        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                     {
                        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                     {
                        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 {
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                     {
                        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                         {
                            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                         {
                            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                         {
                            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 {
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 );

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。