jQuery プラグインの開発時に IIFE を使用する理由

謎めいた jQuery IIFE パターンを理解する

はじめに

jQuery プラグインの開発を詳しく調べると、不可解なコードに遭遇することがよくあります。スニペット:

(function($) {})(jQuery);

この謎めいた表現は成り立ちますjQuery プラグインの分野では非常に重要です。その目的を解き明かし、プラグイン構築の微妙な違いを探ってみましょう。

引数を伴う関数の実行

コード ブロックは基本的に、jQuery を受け取る匿名関数を実行します。引数としてオブジェクトを指定します。この手法は、即時呼び出し関数式 (IIFE) として知られており、次のような複数の目的を果たします。

• グローバル スコープを汚すことなく、指定されたコードを即時に実行します。
• ローカル コードのカプセル化が可能になります。
• 関数に引数を与えるためのクリーンな方法を提供します。

プラグインの記述スタイルの比較

この基本的な使用法以外にも、jQuery プラグインを記述するにはいくつかのアプローチがあります。 3 つの一般的なスタイルの違いを調べてみましょう。

タイプ 1: jQuery セレクターの拡張

(function($) {
    $.fn.jPluginName = {

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

このアプローチは、カスタム メソッドを使用して jQuery セレクターを拡張しますが、技術的にはプラグインではありません。 jQuery の関数プロトタイプの既存のメソッドに新しい機能を追加します。

タイプ 2: jQuery コアの拡張

(function($) {
    $.jPluginName = {

        }
})(jQuery);

タイプ 1 と同様に、これは、プラグインですが、jQuery コアを拡張します。これは、jQuery のアーセナルに新しいトラバーサル メソッドを追加するのに役立ちます。

タイプ 3: jQuery の関数のプロトタイプの拡張

(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        var defaults = {  
        }  

        var options =  $.extend(defaults, options);  

        //This is where you write your plugin's name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

タイプ 3 は、jQuery を作成するための推奨メソッドです。プラグイン。これにより、任意の jQuery セレクターで呼び出すことができるカスタム メソッドを作成できます。 jQuery の関数のプロトタイプを拡張することにより、すべてのセレクター インスタンスを通じてプラグインの機能にアクセスできるようになります。

以上がjQuery プラグインの開発時に IIFE を使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。