web-dev-qa-db-ja.com

関数の引数としてjQueryドル記号（$）？

私はJavaScriptクロージャーを理解しており、これがネイティブJSで行われるのを見てきました。

(function () {
  // all JS code here
})();

しかし、jQueryスパイスを追加するとどうなりますか？

(function ($) {
  // all JS code here
})(jQuery);
jqueryclosuresdollar-sign
48
ma11hew28

これは、ページ内のすべてのコードでjQueryが認識されるわけではないように、jQueryを$にマッピングする方法です。

多分、再利用したいjQueryを使用する既存のスクリプトがあるが、同じページで$も使用するプロトタイプも使用している。

その構成のコードを使用してjQueryをラップすることにより、ページ内の他のコードと競合することなく、含まれている部分の$をjQueryに再定義します。

35
David Mårtensson

あなたが見たとき：

_(function() {
  // all JS code here
})();
_

それは自己呼び出し匿名関数として知られています。最後に_()_が追加されているため、関数は解析されるとすぐに実行されます（これにより、js関数が実行されます）。

余分な外側の中括弧は単なる慣習であることに注意してください。次のように書くこともできます。

_function() {
  // all JS code here
}();
_

しかし、その慣習は至る所で頻繁に使用されており、それを守る必要があります。

_(function($) {
  // all JS code here
})(jQuery);
_

ここでは、_$_がjQueryオブジェクトにマップされているため、jQueryキーワードの代わりに_$_を使用できます。そこに他のキャラクターを置くこともできます：

_(function(j) {
  // all JS code here
})(jQuery);
_

ここでは、jはjQueryオブジェクトにマップされます。

また、自己呼び出し関数に指定された引数はその関数のスコープ内に留まり、外側のスコープ/変数と競合しないことにも注意してください。

この件について記事を書いていたので、チェックしてみてください。

52
Sarfraz
(function() {
   // all JS code here
})();

すぐに呼び出される関数式（ [〜＃〜] iife [〜＃〜] ）であり、「iffy」と発音されます。一部の人々は、それらを「匿名の自己実行関数」または単に「自己実行関数」と呼びます。

(function(aParameter) {
   alert(aParameter);  // will alert "an argument"
})("an argument");

パラメータ 'aParameter'を取り、引数「an argument」を渡すIIFEを次に示します。

(function($){
   alert($(window).jquery);  // alert the version of jQuery
})(jQuery);

これも似ていますが、 "jQuery"（THE jQueryオブジェクトインスタンス）がIIFEの引数であり、この場合、jQueryは '$'パラメータとして渡されます。このように、「$」と入力するだけで、IIFEの本体はjQueryとそのメンバーにアクセスできます。これは一般的なjQuery規則であり、jQueryプラグインを作成する人々がこの規則をこの方法で維持することは一般的です。

上記のコードはjQuery規約を維持するだけでなく、あなたも他の誰もが誤ってその規約を破ることがないことも保証します。たとえば、次のコードを取ります：

var $ = function() {
   alert('foo');
}

このコードは '$'をjQueryではないものに変換します。誰かがプラグインコードの外部の他のコードでこれを実行し、jQueryを '$'としてプラグインに明示的に渡さなかった場合、通常のように '$'をjQueryとして使用することはできません。

17
Hawkeye Parker

このようにjQueryをクロージャーに渡す理由は2つあります。

最も重要なのは、コードが jQueryの「競合なし」モード を使用するページで機能することです。これにより、$グローバルを制御する必要がある他のライブラリと一緒にjQueryを使用できます。このため、jQueryプラグインを作成するときは、(function($) { ... })(jQuery)手法を強く推奨します。

2番目の理由は、それが$を自己実行関数のスコープ内のローカル変数にし、ローカル変数アクセスがグローバル変数アクセスより（わずかに）高速であることです。個人的には、これは非常に説得力のある理由だとは考えていません。DOMメソッドではなくjQueryを使用するオーバーヘッドが許容できるシナリオを想像できませんが、グローバル変数としてjQueryにアクセスするオーバーヘッドは許容できません。 :-)

プラグインを作成していない場合にこの手法を使用する最大の理由は、一貫性のためです—プラグインを作成するときに忘れないようにするisそれがis n'tであるときにそれをする癖があるなら重要です。その上、いつコードをリサイクルする機会があるかわかりません！

12
Ben Blank