web-dev-qa-db-ja.com

「$（）。ready（handler）」が推奨されないのはなぜですか？

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

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

  • $（document）.ready（handler）
  • $（）。ready（handler）（これはお勧めしません）
  • $（ハンドラー）

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

_$().ready(handler) 
_

推奨されません。 1番目と3番目の方法はまったく同じです。3番目のオプションは、キャッシュされたjQueryオブジェクトのready関数を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;
},
_

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

お気に入り：

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

javascriptjquerycallbackdocument-ready
88
gdoron is supporting Monica

jQuery開発者の1人から公式の回答を得ました：

$().ready(fn)は、$()が$(document)へのショートカットであったためにのみ機能します。 （jQuery <1.4）
したがって、$().ready(fn)は読み取り可能なコードでした。

しかし、人々は$().mouseover()やその他のあらゆる種類の狂気のようなことをしていました。
そして人々は空のjQueryオブジェクトを取得するために$([])をしなければなりませんでした

そのため、1.4では、$()が空のjQueryを提供するように変更し、多くのコードを壊さないように$().ready(fn)を機能させました。

$().ready(fn)は文字通りコアにパッチが適用され、レガシーの場合に適切に機能するようになりました。

ready関数の最適な場所は$.ready(fn)ですが、これは非常に古い設計上の決定であり、それが現在の状況です。

彼に聞いた：

$（fn）は$（）。ready（fn）よりも読みやすいと思いますか？！

彼の答えは：

私は実際のアプリでは常に$（document）.ready（fn）を実行しますが、通常、アプリにはdoc readyブロックが1つしかないため、メンテナンスとはまったく異なります。

$（fn）もかなり読めないと思います、それはただWorks™を知っておく必要があることです...

87
gdoron is supporting Monica

さまざまなオプションがあなたが指摘するのとほとんど同じことをするので、それは図書館の作家の帽子をかぶって、いくつかの推測をする時です。

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

  2. はるかに実用的な理由：2番目のバージョンはnotで終わる唯一のバージョンであるため、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メソッドのセマンティクスとの大きな違いであるため、特にこれに依存することはお勧めできません。

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

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

11
Jon

$()がemptyオブジェクトを返すのに対し、$(document)はready()をさまざまなものに適用しないという事実だけです。それでも機能しますが、直感的ではないと思います。

$(document).ready(function(){}).prop("title") // the title
$().ready(function(){}).prop("title")  //null - no backing document
4
Alex K.

おそらくこれは単なるドキュメントのバグであり、修正する必要があります。$().ready(handler)を使用することの唯一の欠点は、読みやすさです。確かに、$(handler)も同様に判読できないと主張します。私は同意します、それが私がそれを使わない理由です。

また、ある方法が別の方法よりも速いと主張することもできます。ただし、違いに気付くために、このメソッドを1ページに連続して十分な回数呼び出す頻度はどれくらいですか。

最終的にそれは個人的な好みに帰着します。可読性の引数以外に$().ready(handler)を使用することにマイナス面はありません。この場合、ドキュメントは誤解を招くと思います。

3
Kevin B

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

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

これは好奇心旺盛な人のためのこれのフィドルバージョンです： http://jsfiddle.net/az85G/

2
Mark Schultheiss

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

これは表現力がありません

$().ready(handler);

なので

$(document).ready(handler)

おそらく、彼らはある種の慣用的なjQueryを宣伝しようとしています。

0
Hyangelo