88

jQuery API ドキュメントサイトからready

次の 3 つの構文はすべて同等です。

  • $(document).ready(handler)
  • $().ready(handler) (これはお勧めしません)
  • $(ハンドラ)

宿題をした後 -ソースコードを読んで遊んだ後、理由がわかりません

$().ready(handler)

推奨されません。1 番目と 3 番目の方法はまったく同じdocumentです。

rootjQuery = jQuery(document);
...
...

// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

しかし、ready 関数は、選択されたノード要素のセレクターと対話しません。readyソース コード:

ready: function( fn ) {
    // Attach the listeners
    jQuery.bindReady();
        // Add the callback
    readyList.add( fn );
        return this;
},

ご覧のとおり、コールバックを内部 queue( readyList) に追加するだけで、セット内の要素を変更したり使用したりしません。これによりready、すべての jQuery オブジェクトで関数を呼び出すことができます。

お気に入り：

  • 通常のセレクター: $('a').ready(handler) DEMO
  • ナンセンスセレクター: $('fdhjhjkdafdsjkjriohfjdnfj').ready(handler) DEMO
  • 未定義のセレクタ: $().ready(handler) DEMO

最後に...私の質問に：なぜ$().ready(handler)推奨されないのですか？

4

6 に答える 6

89
于 2012-05-27T20:55:54.523 に答える
11

あなたが指摘したように、さまざまなオプションがほとんど同じことを行うので、ライブラリライターの帽子をかぶって推測する時が来ました.

  1. おそらく、jQuery の人々は$()、将来の使用のために利用できるようにしたいと考えています (推奨されていなくても、機能することが文書化されているため疑わしいです。特殊なケース$().readyの場合のセマンティクスも汚染されます)。$

  2. より実用的な理由: 2 番目のバージョンは最終的にラップされないdocument唯一のバージョンであるため、コードを保守するときに壊れやすくなります。例：

    // BEFORE
$(document).ready(foo);

// AFTER: works
$(document).ready(foo).on("click", "a", function() {});

    これを

    // BEFORE
$().ready(foo);

// AFTER: breaks
$().ready(foo).on("click", "a", function() {});

  3. 上記に関連してready、jQueryオブジェクトが何をラップしても（ここの場合のように何もラップしなくても）同じように機能する（唯一の？）メソッドであるという意味で異常です。これは、他の jQuery メソッドのセマンティクスとの大きな違いであるため、特にこれに依存することはお勧めできません。

    更新: Esailja のコメントが指摘しているように、エンジニアリングの観点からは、readyこのように機能するため、実際には静的メソッドである必要があります。

更新 #2:ソースを掘り下げると、1.4 ブランチのある時点で$()match に変更されたようです$([])が、1.3 では のように動作しまし$(document)た。この変更により、上記の正当性が強化されます。

于 2012-05-25T11:19:39.503 に答える
4

空のオブジェクトを$()返すのに対し、別のものに適用するのはそうではありません。それでも機能しますが、直感的ではないと思います。$(document)ready()

$(document).ready(function(){}).prop("title") // the title
$().ready(function(){}).prop("title")  //null - no backing document
于 2012-05-25T11:23:15.557 に答える
3

おそらくこれは単なるドキュメントのバグであり、修正する必要があります。使用する$().ready(handler)ことの唯一の欠点は読みやすさです。$(handler)確かに、それは同じように読めないと主張します。同意するので、使用しません。

また、ある方法が別の方法よりも高速であると主張することもできます。ただし、このメソッドを 1 つのページで何回連続して呼び出して、違いに気付くことができるでしょうか?

最終的には個人の好みになります。$().ready(handler)読みやすさ以外にマイナス面はありません。この場合、ドキュメントは誤解を招くと思います。

于 2012-05-25T14:33:30.940 に答える
2

3 つに矛盾があることを明らかにするために、よく使用される 4 番目の形式を追加しました。(function($) {}(jQuery));

このマークアップを使用すると:

<div >one</div>
<div>two</div>
<div id='t'/>

そしてこのコード：

var howmanyEmpty = $().ready().find('*').length;
var howmanyHandler = $(function() {}).find('*').length;
var howmanyDoc = $(document).ready().find('*').length;
var howmanyPassed = (function($) { return $('*').length; }(jQuery));
var howmanyYuck = (function($) {}(jQuery));
var howmanyYuckType = (typeof howmanyYuck);

$(document).ready(function() {
    $('#t').text(howmanyEmpty + ":" + howmanyHandler + ":" 
        + howmanyDoc + ":" + howmanyPassed + ":" + howmanyYuckType);
});

最後のステートメントからの div の表示結果は次のとおりです: 0:9:9:9:undefined

SO、Handler と Doc のバージョンのみが、ドキュメント セレクターを取得するときに使用するものを返すという jQuery 規則と一致しており、Passed フォームでは何かを返す必要があります (私はこれをしないと思いますが、単に「内部」を示すには、何かがあります)。

好奇心旺盛な人のために、これのフィドル バージョンを次に示します: http://jsfiddle.net/az85G/

于 2012-05-25T13:06:10.263 に答える
0

これは何よりも読みやすさのためだと思います。

こいつは表情豊かじゃない

$().ready(handler);

なので

$(document).ready(handler)

おそらく彼らは、何らかの形式の慣用的な jQuery を宣伝しようとしているのでしょう。

于 2012-05-25T12:11:57.540 に答える