2

jQuery について 1 つの質問があり、その使用方法についてしばらく自問自答しています。$(documemt).ready()DOMイベントハンドラーのHTMLでの設定で、jQueryを介してイベントハンドラーを設定することに違いはありますか?

少しわかりやすくするために、サイトに多くのイベントを追加してロード時間を長くしたくありません。例: ajax ドロップダウンを追加して、受信トレイにリダイレクトするだけでなく、フォーラムに新しいメッセージを表示したいと考えています。これを行うには2つの方法があります。

•jQueryの方法=>$(documemt).ready()

$(document).ready(function () {
    $(".new_messages_link").click(function (e) {
        e.preventDefault();
        // Ajax query an showing the dropdown
    });
});

サイトが読み込まれた後、jQuery でイベント ハンドラーをバインドするだけです。ここでの問題は、サイトが完全にロードされた後にのみクリックが機能することです。サイトの速度を低下させる大きな画像の問題。

• HTML DOM の方法

<a href="#" class="new_messages_link" onClick="show_new_messages(this); return false;">New Messages</a>

function show_new_messages(var element) {
    // Ajax query an showing the dropdown
}

これは厳密なプログラミングではありません。メソッドを変更する場合は html を変更する必要がありますが、待つ必要はありません$(documemt).ready()。また、サイト表示中は負荷がかからず、クリックするだけですよね？

問題：

私の質問は、何を使用すればよいですか？何が良いのか、本当の違いは何ですか？ちなみに、設定したいイベントハンドラは一つだけではなく、たくさんあるので、ロード時間も重要です。よくわかりませんが、関数にコードを入れすぎると気分が悪くなり$(documemt).ready()ます。

4

3 に答える 3

2

jQuery を使用する場合は、 $(document).ready(function(){}); を使用する必要があります。方法。これは「邪魔にならない Javascript」と呼ばれ、ビジネス ロジック/動作をプレゼンテーション/マークアップから分離できます。

( $(document).ready(function(){}); メソッドによって、私は実際にはあなたの例であなたのイベントバインディングをもっと参照していると言うことに注意してください)

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

于 2013-09-26T11:30:32.150 に答える
2

インライン スクリプトを使用すると若干高速になる可能性がありますが、この$(documemt).ready()アプローチはより信頼性が高く、HTML と JS の間に分離レイヤーを提供することでコードを維持するのに役立ちます。

注: 関連するスクリプトがまだ読み込まれていない場合、ページの読み込み時にインライン関数を使用できない可能性があります。これにより、予期しない動作やエラーが発生する可能性があります。

于 2013-09-26T11:37:11.010 に答える
1

また、サイト表示中は負荷がかからず、クリックするだけですよね？

リンクのクリックは、show_new_messagesスクリプトがロードされた後にのみ機能するため、onclick 属性を使用し、スクリプトがロードされる前にクリックすると、ユーザーにエラー メッセージが表示される場合があります。でイベント ハンドラーを設定する$(documemt).ready()と、イベント ハンドラーがアタッチされるまでにすべてのスクリプトも読み込まれるため、クリックすると機能します。

于 2013-09-26T11:36:26.800 に答える