1. ホーム
  2. ジャバスクリプト

[解決済み】(function($) {})(jQuery);ってどういう意味?

2022-03-29 01:15:54

質問

jQueryプラグインを書き始めたばかりです。私は3つの小さなプラグインを書きましたが、実際にはその意味を知らずに、すべてのプラグインに単に行をコピーしています。どなたか、これらについてもう少し詳しく教えていただけませんか?おそらく、説明はいつかフレームワークを書くときに便利でしょう :)

これは何をするものですか(jQueryを何らかの形で拡張しているのは知っていますが、他に何か面白いことはありますか)。

(function($) {

})(jQuery);

プラグインの書き方として、次の2つの方法の違いは何ですか。

タイプ1:

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

タイプ2

(function($) {
    $.jPluginName = {

        }
})(jQuery);

タイプ3

(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);

私はここで道を外れているかもしれないし、多分すべてが同じことを意味します。私は混乱しています。場合によっては これ は、タイプ1を使って書いていたプラグインでは動作しないようです。今のところ、タイプ3が一番エレガントだと思うのですが、他のものも知りたいです。

どのように解決するのですか?

まず、次のようなコードブロックがあります。 (function(){})() は、単にその場で実行される関数に過ぎません。少し分解してみましょう。

1. (
2.    function(){}
3. )
4. ()

2行目は普通の関数で、ランタイムに関数を親スコープに返すよう伝えるために括弧でくくられ、それが返されると4行目で関数が実行されます。

1. function(){ .. }
2. (1)
3. 2()

1が宣言、2が関数のリターン、3が関数の実行だけであることがわかると思います。

使用例です。

(function(doc){

   doc.location = '/';

})(document);//This is passed into the function above

その他、プラグインに関する質問についてですが

タイプ1:これは実際にはプラグインではなく、プラグインが関数になる傾向があるため、関数として渡されるオブジェクトです。

タイプ2:これもプラグインではありません。 $.fn オブジェクトを作成します。結果は同じだが、jQueryコアの拡張に過ぎない。これは、toArrayなどのトラバース関数を追加したい場合です。

タイプ3:これはプラグインを追加するのに最適な方法です。jQueryの拡張プロトタイプは、あなたのプラグイン名と関数を保持するオブジェクトを取り、あなたのためにプラグインライブラリに追加します。