jQueryプラグインの構文を理解したい

Question 1

jQueryサイトには、jQueryの基本的なプラグイン構文が次のようにリストされています。

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

JavaScriptの観点から何が起こっているのかを理解したいのですが、これはJSが以前に見た構文に従っているようには見えないためです。だから私の質問のリストはここにあります：

function（$）...を変数、たとえば「the_function」に置き換えると、構文は次のようになります。
```
 (the_function)( jQuery );
```
「（jQuery）;」とはやってる？the_functionの括弧は本当に必要ですか？なぜそこにいるのですか？あなたが与えることができる別のコードはありますか？
これはfunction（$）で始まります。それで、それは関数を作成しています、私が知る限り、すでに定義されている$のパラメーターで実行されることはありませんか？何が起こっているのですか？

助けてくれてありがとう！

Question 2

function(x){ 
    x...
}

名前のない単なる関数で、1つの引数 "x"を取り、xを使用して処理を行います。

共通の変数名である 'x'の代わりに、あまり一般的ではない変数名である$を使用できますが、それでも合法です。

function($){ 
    $...
}

括弧で囲んで、式として解析されることを確認します。

(function($){
    $....
})

関数を呼び出すには、引数のリストを付けた後に（）を置きます。たとえば、3を渡してこの関数を呼び出したい場合は、次のようにします$。

(function($){
    $...
})(3);

キックのために、この関数を呼び出して、jQueryを変数として渡します。

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

これにより、1つの引数を取り、その関数を呼び出す新しい関数が作成され、jQueryに値として渡されます。

どうして？

jQueryで何かをしたいたびにjQueryを書くのは面倒なのでです。

なぜ書くだけではないのか $ = jQueryですか？

他の誰かが何かを意味するために$を定義したかもしれないからです。これにより、$の他の意味がこれによって隠されることが保証されます。

Question 3

(function( $ ){

})( jQuery );

これは$、引数内で使用する自己実行型の無名関数$でjQueryあり、その関数の内部ではなく（）を使用できます$。他のライブラリでも特別な意味があるため、他のライブラリと競合する恐れはありません。このパターンは、jQueryプラグインを作成するときに特に役立ちます。

そこでも、代わりに任意の文字を書き込むことができ$ます。

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

ここjで、最後に指定されたjQueryが自動的に追いつきます(jQuery)。または、引数を完全に省略することもできますが、衝突を恐れることjQueryなくキーワードを使用する必要があります$。その$ため、省略形の引数で囲まれているので、その関数内$でjQueryすべての代わりに書くことができます。

jQueryのソースコードを見ても、すべてが間に挟まれていることがわかります。

(function( window, undefined ) {
  // jQuery code
})(window);

これは、引数付きの自己実行型無名関数も見ることができるようです。window（とundefined）の引数が作成され、グローバルにマッピングされているwindow底部で物体(window)。これは最近の一般的なパターンであり、以下にマッピングされているwindowグローバルwindowオブジェクトではなく、引数から調べられるため、ほとんど速度向上はありません。

これ$.fnはjQueryのオブジェクトで、新しい関数（オブジェクトでもあります）またはプラグイン自体を作成して、jQueryがプラグインをその$.fnオブジェクトにラップして使用できるようにします。

興味深いことに、私はここで同様の質問に答えていました：

JavaScript / jQueryクロージャー関数の構文

この記事をチェックして、私が作成した自己実行関数の詳細を確認することもできます。

JavaScriptの自己実行関数

Question 4

基本的なプラグイン構文により、プラグインの本体での$参照に使用できます。jQuery$、プラグインのロード時のID。これにより、他のライブラリ、特にプロトタイプとの名前の競合を防ぎます。

構文は、既知のパラメーターを受け入れる関数を定義している$ため$、関数本体で参照できるようになり、すぐにその関数を呼び出してjQuery、引数として入力します。

これは、グローバルネームスペースを汚染しないためにも役立ちます（したがってvar myvar = 123;、プラグイン本体で宣言しても突然は定義されませんwindow.myvar）。しかし、主な表面上の目的は、再定義された$場所を使用できるようにすることです$。

Question 5

そこでは、自己呼び出しの匿名関数を扱っています。$記号がjQueryオブジェクトにバインドされていることを確認するために、そのような関数内でjQueryプラグインをラップすることは「ベストプラクティス」のようなものです。

例：

(function(foo) {
    alert(foo);
}('BAR'));

これはBAR、<script>ブロックに入れられたときに警告します。パラメータBARは、それ自体を呼び出す関数に渡されます。

同じ原則がコードでも発生しjQueryます。オブジェクトは関数に渡されるため$、jQueryオブジェクトを確実に参照します。

Question 6

最後のjQueryはそれ自体（jQuery）を関数に渡すため、プラグイン内で$記号を使用できます。あなたもできた

(function(foo){

  foo.fn.myPlugin = function() {


    this.fadeIn('normal', function(){


    });

  };
})( jQuery );

Question 7

これと他の最近のJavaScriptのトリックと一般的なプラクティスの明確な説明を見つけるために、Javascript Gardenを読むことをお勧めします。

http://bonsaiden.github.com/JavaScript-Garden/

これらのパターンの多くは多くのライブラリで広く使用されていますが、実際には説明されていないため、これは特に便利です。

Question 8

ここでの他の答えは素晴らしいですが、対処されていない重要な点が1つあります。あなたは言う：

それで、それは関数を作成しています、私が知る限り、すでに定義されている$のパラメーターで実行されることはありませんか？

グローバル変数$が使用できるという保証はありません。デフォルトでは、jQueryはグローバルスコープに2つの変数を作成します：$and jQuery（2つは同じオブジェクトのエイリアスです）。ただし、jQueryはnoConflictモードでも実行できます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

を呼び出すとjQuery.noConflict()、$jQueryライブラリが含まれる前のグローバル変数が設定されます。これにより、jQueryを$、グローバル変数としても使用する他のJavaScriptライブラリで使用できるようになります。

$jQueryのエイリアスであることに依存するプラグインを作成した場合、そのプラグインはnoConflictモードで実行しているユーザーには機能しません。

他の人がすでに説明したように、投稿したコードは、すぐに呼び出される無名関数を作成します。次に、グローバル変数jQueryがこの無名関数に渡され、関数内でローカル変数として安全にエイリアスされ$ます。