29

Backbone とhttp://todomvc.com/の todo サンプル アプリを調べ ています。ファイル内のコードを開始する方法が 3 種類あることに気付きました。

$(function() {
 // code here
});

$(function( $ ) {
 // code here
});

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

違いがわかりません。また、どちらを使用する必要があるかがわかりません。

また、これを使用してコードを開始する人もいます。

$(document).ready(function(){
  // code here
});

私が見たものからすると、これが完全な書き方ですよね？

より一般的な方法では、JavaScript コードを常に各ファイルにそのようなものに含める必要がありますか?

アドバイスありがとうございます。

4

3 に答える 3

55

  1. $(document).ready(function(){})コードがDOM対応で実行されるようにして、DOMにアクセスできるようにします。これについて詳しくは、 jQueryのドキュメントをご覧ください。

  2. $(function(){})＃1の単なるエイリアスです。ここにあるコードはすべて、DOMの準備ができるまで待機します（ドキュメントを参照）。

  3. $(function($){})＃1および＃2と同等ですが、ローカルスコープでjQueryへのクリーンな参照を取得するのはあなただけです（以下の注を参照）。$同様に、＃1の関数に渡すことができ、同じことを行います（jQueryへのローカル参照を作成します）。

  4. (function(){}())は単なる自己実行無名関数であり、新しいクロージャーを作成するために使用されます。

これらはいずれもバックボーンに固有のものではないことに注意してください。最初の3つはjQueryに固有のものですが、＃4は単なるバニラJavaScriptです。

注：上記の＃3で何が起こっているかを理解するには、それ$がのエイリアスであることを忘れないでjQueryください。ただし、$変数を使用するライブラリはjQueryだけではありません。は$他の誰かによって上書きされる可能性があるため、スコープ内で$常にjQueryを参照するようにする必要があります。つまり、$引数です。

結局、それは基本的に次の2つのオプションに要約されます。

  1. JavaScriptがにロードされているhead場合は、ドキュメントの準備ができるまで待つ必要があるため、次を使用します。

    jQuery(function($) {
    // Your code goes here.
    // Use the $ in peace...
});

  2. ドキュメントの下部にJavaScriptをロードする場合（終了ボディタグの前に-これは間違いなく実行する必要があります）、ドキュメントの準備が整うのを待つ必要はありません（パーサーがスクリプト）、およびSEAF（別名IIFE）で十分です。

    (function($) {
    // Use the $ in peace...
}(jQuery));

PSクロージャとスコープの詳細については、JS101：スコープに関する簡単なレッスンを参照してください。

于 2012-08-17T15:41:55.800 に答える
18

それを理解することから始めるのは理にかなっていると思い$ = jQueryます。無名関数内の名前空間について読むときの以下の目的は、より理にかなっています。しかし、本質的には、どちらでも使用できます。複数のライブラリを使用していて、他のライブラリで使用したい場合は、代わりjQuery()に使用します。$()$

$(document).ready(function(){
    // Here we have jQuery(document) firing off the ready event
    // which executes once the DOM has been created in 
    // order to ensure that elements you are trying to manipulate exist.
});

​$(function () {
    // Short-hand version of $(document).ready(function () { });
});

Document.ready() の詳細

を括弧$内に入れると、jQuery の $ エイリアスが保証されます (常にこの方法で jQuery を意味するので安全です)。

$(function ($) { /* code here : $ always means jQuery now */ });

最後に、IIFE (Immidially-Invoked Function Expression)があります - IIFE の説明

(function (myNameSpace, $) {
    // This is an anonymous function - it is ran instantly
    // Usually used for namespaces / etc
    // This creates a scope/wrapper/closure around everything inside of it
}(window.myNameSpace, jQuery));

上部の $ (下部の jQuery と一致) は、$ (ドル記号) がネームスペースの範囲内の jQuery を表すことを示します。これは、他のライブラリが、開発者が $ の使用を意図/希望するものと衝突しないようにするために行われます。

(function (myNameSpace, $) {
    // Now because of all of this scope/wrapper/closure awesome...
    // you can create -INTERNAL- variables (sort of like Private variables from other langs) 
    // this variable cannot be accessed outside the namespace unless it is returned / exposed

    var internalVariable = '123'; // Internal

    // Even Internal functions!
    function privateFunction () {
        console.log('this is private!');
    }

    // --------------------------------------------------------
    // Public -method- of nameSpace exposing a private variable
    // Notice we're using the myNameSpace object we exposed at the top/bottom

    myNameSpace.nameSpaceMethod = function () {
        privateFunction(); // we can call the private function only inside of the namespace
        return internalVariable; // now we could get this variable
    };
}(window.myNameSpace, jQuery)); // notice these mirror the above arguments in the anon function

無名関数の詳細

名前空間の外にいる場合、これらの内部/パブリック メソッドと変数がどのように影響を受けるかを確認できます。

// This will come up undefined
alert(internalVariable);

// This will trigger a -method- of the myNameSpace namespace - and alert "123"
// Showcasing how we access a Public method - which itself has access to the internal variable
// and exposes it to us!
alert(myNameSpace.nameSpaceMethod());
​
于 2012-08-17T15:43:53.207 に答える
2

この二つ：

$(function() {
 // code here
});

$(document).ready(function(){
  // code here
});

どちらも直接同等であり、ドキュメントがロードされたときに jQuery を開始する方法です。前者は後者の短いバージョンです。

これです：

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

は、パラメータがゼロのスコープ付き関数であり、パラメータがゼロですぐに呼び出されます。

于 2012-08-17T15:42:27.633 に答える