(function($) {})(jQuery); とはどういう意味ですか? 質問する

(function($) {})(jQuery); とはどういう意味ですか? 質問する

私は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);

私の考えは大きく外れていて、すべて同じことを意味しているのかもしれません。混乱しています。場合によっては、 Type 1 を使用して作成したプラグインではこれが機能していないようです。これまでのところ、Type 3 が最もエレガントに思えますが、他のタイプについても知りたいです。

ベストアンサー1

まず、 のように見えるコード ブロックは、(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 の拡張プロトタイプは、プラグインの名前と機能を保持するオブジェクトを取得し、それをプラグイン ライブラリに追加します。

おすすめ記事