[解決済み] なぜ「$().ready(handler)」が推奨されないのか?
質問
からの
jQuery API ドキュメントサイト
に対して
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
) にコールバックを追加するだけで、セット内の要素を変更したり使用したりはしません。これによって
ready
関数をすべてのjQueryオブジェクトで呼び出すことができます。
のように。
-
レギュラー
セレクタを使用します。
$('a').ready(handler)
デモ -
無意味
セレクタに
$('fdhjhjkdafdsjkjriohfjdnfj').ready(handler)
デモ -
未定義
セレクタに
$().ready(handler)
デモ
最後に...私の質問に
なぜ
$().ready(handler)
は推奨されないのでしょうか?
どのように解決するのですか?
jQueryの開発者の一人から公式な回答を得ました。
$().ready(fn)
が動作するのは
$()
へのショートカットであったからです。
$(document)
(jQuery <1.4)
そこで
$().ready(fn)
は読みやすいコードでした。
しかし、昔の人はこんなことをやっていました。
$().mouseover()
とか、いろいろと狂っていた。
をしなければならず、人々は
$([])
を実行して、空の jQuery オブジェクトを取得する必要がありました。
そこで、1.4では、これを
$()
が空のjQueryを与えるように変更し、単に
$().ready(fn)
が動作するようにしただけで、多くのコードを破壊することはありません。
$().ready(fn)
は文字通り、レガシーケースで適切に動作するようにコアでパッチを当てただけです。
の最適な場所は
ready
関数は
$.ready(fn)
になっていますが、これは本当に古い設計上の決定で、それが今の私たちの姿なのです。
私は彼に尋ねました。
$().ready(fn) よりも $(fn) の方が読みやすいと思いますか!
彼の答えはこうでした。
<ブロッククオート私はいつも実際のアプリで$(document).ready(fn)をしていますし、通常、アプリには1つのdoc readyブロックしかありませんから、メンテナンスのようなものではありません。
私も$(fn)はかなり読みにくいと思います。 というのは、単に A Thing That You Have To Know Works™ (日本語訳) ...
関連
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] なぜ ++[[]][+[] +[+[]] は "10" という文字列を返すのでしょうか?
-
[解決済み] window.onload vs $(document).ready()
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] これは純関数ですか?