7

私は次のようなコードに出くわしました：

jQuery(function($) {
  $('#saySomething').click(function() {
    alert('something');
  });
});

よくわかりません。なぜ私はこれを簡単に行うことができないのですか？

$('#saySomething').click(function() {
   alert('saySomething');
});
4

10 に答える 10

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

の省略形です：

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

の準備が整うのを待たないと、documentイベントをバインドする要素はDOMに存在せず、イベントは実際にはバインドされません。

または、の読み込みが完了するのを待つこともできますがbody、これには、読み込みに時間がかかる画像の待機が含まれます。

正直なところ、待つ必要はありませんdocument.ready。$('#saySomething').click(...)要素がDOMに存在することがわかっている場合は、先に進んで使用できます。

<button id="saySomething>Say Something!</button>
<script>
    jQuery('#saySomething').click(...);
</script>

最後にjQuery(function ($) {...});知っておくべきニュアンスがあります。関数の$パラメーターは、へのエイリアスjQueryに使用されます。これにより、他のライブラリ（プロトタイプなど）との競合を心配することなく、関数内で省略形$を使用できます。$

待っていない場合は、 jQueryのエイリアスに使用されるIIFEdocument.readyを確認するのが一般的です。

(function ($) {
    $('#saySomething').click(...);
}(jQuery));
于 2012-06-13T14:26:56.253 に答える
6 
jQuery(function($) {

のショートカットです

jQuery(document).ready(function(){

これは、ドキュメントがDOMが構築される「準備完了」状態になるまで待機します。これで、jQueryスクリプトはページ全体を操作でき、要素を見逃すことはありません。

しかし、 -それなしでjQueryを実行できます。スクリプトが頭の中にある場合、まだ作成されていない要素を選択するリスクがあります。影響を与えたい要素の直後にドキュメントの本文でjQueryを使用して、できるだけ早くそれらを操作しようとしました。それは珍しいケースで、私は通常それをしません。

準備完了機能を使用するもう1つの理由は、複数回実行できます。複数のスクリプトを含める場合、または条件付きで含まれるコードがある場合は、複数のready（）関数を使用できます。各readyブロックのコードは、ready状態になるまで保持され、追加された順に実行されます。

于 2012-06-13T14:27:01.337 に答える
2

最初の例は、ページが完全に読み込まれた後に実行されます。2番目の例は直接実行されます（おそらく失敗します）。

したがって、最初は次の省略形です。

$(document).ready(function(){
  // Do something after the page is loaded.
});
于 2012-06-13T14:27:02.120 に答える
2

これは「ドキュメントの読み込み」の省略形であり、$記号を使用して他のライブラリとの衝突を回避するために、内部に$がエイリアスされた長い「jQuery」を使用しています。

ドキュメントの読み込みを待たないと、予測できない/機能しなくなる可能性があります。また、名前の衝突がある場合、物事は単純に爆発します。

于 2012-06-13T14:27:12.197 に答える
2

$(function() {})詳細については、jQuerysドキュメントレディ関数http://api.jquery.com/jQuery/#jQuery3およびhttp://api.jquery.com/ready/の略です。

于 2012-06-13T14:27:17.873 に答える
2

ドキュメントから直接コピーして貼り付けます：

jQuery( callback )戻り値：jQuery

説明：DOMの読み込みが完了したときに実行される関数をバインドします。

version added: 1.0jQuery( callback )

`callback` The function to execute when the DOM is ready.

この関数は、準備ができているDOMに依存するページ上$(document).ready()の他の操作をラップするために使用する必要があるという点で、と同じように動作します。$()この関数は、技術的には連鎖可能ですが、実際にはそれに対して連鎖することはあまりありません。

APIを確認してください

于 2012-06-13T14:28:23.290 に答える
2

コードのコンテキストによって異なりますが、JavaScriptには、名前空間またはモジュールパターン内に変数とメソッドをカプセル化するための一般的な設計手法があります。このコードは、その意図の派生物である可能性があります。

モジュールデザインパターンの背後にある理由は、グローバル変数の複雑さと「クラバリング」の危険性に要約されます。

同じ名前の変数（または関数）が2回定義されている場合、クローバーが発生する可能性があります。2番目の定義は最初の定義をオーバーライドし、本質的にそれを覆い隠します。

したがって、グローバル名前空間から変数（および関数）を保護する構造でコードをラップするのが経験則です。Douglas Crockfordは、これらのタイプのシナリオをよく説明しています。

この例は、「クロージャー」と呼ばれるもう少し一般的な化身を示しています。

var jspy = (function() {
    var _count = 0;

    return {
      incrementCount: function() {
        _count++;
      },
      getCount: function() {
        return _count;
      }
    };
})();

最初は方向感覚を失いますが、一度認識すれば、それは第二の性質になります。重要なのは、_count変数をプライベートメンバーとして、2つのアクセス可能なメソッドを持つ返されたオブジェクトにカプセル化することです。

グローバル名前空間には、2つのメソッドを持つものではなく、1つの変数（jspy）しか含まれないため、これは強力です。これが強力である2番目の理由は、_count変数が2つのメソッド（incrementCount、getCount）のロジックによってのみアクセスできることを保証することです。

私が言ったように、あなたのコードはこの経験則の化身かもしれません。

いずれにせよ、JavaScriptでこのパターンを知ることは重要です。これは、たとえば、フレームワーク間のはるかに強力な相互作用や、AMDなどのフレームワークの非同期ロードへの扉を開くためです。

これは名前空間の良い例です。

要約すると、知るのに役立つ高度なJavaScriptデザインパターンがあり、関連する用語はモジュールパターン、名前空間パターンです。追加の関連用語は、閉鎖とAMDです。

お役に立てば幸いです。ではごきげんよう！ナッシュ

于 2012-06-13T14:42:43.350 に答える
1

これjQuery(function(){...}はのショートカットですjQuery(document).ready(function(){...})。Readyイベントは、DOMの準備ができたときにトリガーされるため、まだ利用できないものにアクセスしていないことを確認できます。

一方、2番目のスニペットで行うようにクリックメソッドをバインドする場合。#saySomethingそのコードはすぐに実行されるため、宣言後に必ず配置する必要があります。

于 2012-06-13T14:29:27.157 に答える
0

jQuery(function($) { ... });これは、DOM（HTML）が完全にレンダリングされてアクセス可能になるまで、コードが実行されないようにするものです。

于 2012-06-13T14:27:22.883 に答える
0

jqueryでDOMを完全にロードする必要がない場合は、どちらの形式でも安全に使用できます。jqueryを実行する前にDOMが完全にロードされることを保証するには、jqueryステートメントをでラップします$(function...。

$(function(){ ...});$(document).ready(function(){ ... }); https://stackoverflow.com/a/6454695/209942http://jqfundamentals.com/chapter/jquery-basics のショートカットです

ラップされたJqueryコードは、$(functionすべてのHTMLがメモリに完全に解析され、ドキュメントを操作する準備ができるまで実行されません。

ご使用の環境で、レンダラーがjqueryにヒットする前にDOMが完全にロードされることが保証されていない場合は、jqueryをでラップする必要があります$(function。

$をローカル変数にするこの代替DOM対応フォームを試して、$記号を使用する可能性のある他の変数との競合を回避することもできます。

jQuery（function（$）{...}）; https://stackoverflow.com/a/6454701/209942

jqueryコードがラップされていない場合$(function、それは機能しますか？DOMがロードされている場合は、はい。DOMの読み込みは、JavaScriptの読み込み方法によって異なります。
HTML本文の最後で外部JavaScriptファイルが参照されているときにJavaScript関数を呼び出すにはどうすればよいですか？

この他の同様のフォームは、DOMがレンダリングされるのを待たないことに注意してください。すぐに実行される関数リテラルです。先頭に$または先頭にjqueryはありませんが、末尾にopen+close括弧があります。

（働き（）{...}）（）;

于 2018-06-15T16:34:43.973 に答える