4

私はこのようなコードを持っています：

$(document).ready(function () {

    $('.accessLink')
        .bind('click', accessLinkClick);
    $('#logoutLink')
        .click(function (e) {
            window.location = $(this).attr('data-href')
        });

});

私のサイトの各部分の機能はいくつかの小さなファイルに分割されており、サイトが展開されると、これらは模倣されて結合されます。

最大10個のこれらの小さなファイルはそれぞれ$（document）.readyを待ちます。これを行うのに多くのオーバーヘッドがあるかどうか誰かに教えてもらえますか？コードを機能領域に分割することは、コードの保守が容易に見えることを意味しますが、jQuery 1.8.1を使用しているので、オーバーヘッドについて疑問に思っています。

アップデート：

答えに基づいて、私はこのようにコーディングし始めました：

$(document).ready(function () {

    accessButtons(); // login, register, logout
    layoutButtons();
    themeButtons();  // theme switcher, sidebar, print page

});

各関数は次のようにコード化されます。

function accessButtons() {

    $('.accessLink')
        .bind('click', accessLinkClick);
    $('#logoutLink')
        .click(function (e) {
            window.location = $(this).attr('data-href')
        });

};
4

5 に答える 5

6

$(document).ready()10回の呼び出しと、10回の初期化関数を呼び出す呼び出しの違いは次のとおりです。

10回の呼び出しで、次のようになります。

  • への10回の呼び出し$(document)。
  • メソッドへの10回の呼び出し.ready()。
  • DOMレディイベントの1つのイベントリスナー
  • DOM readyイベントが発生すると、コールバックの配列を循環し、に渡された各コールバックを呼び出します.ready()。

10個の初期化関数すべてを呼び出す関数がある場合$(document).ready()は、次のようになります。

  • への1回の呼び出し$(document)。
  • メソッドを1回呼び出します.ready()。
  • DOMレディイベントの1つのイベントリスナー
  • DOMreadyイベントが発生すると、1つのreadyハンドラーが呼び出されます。
  • 次に、readyハンドラーが10回の初期化関数呼び出しを呼び出します。

.ready()したがって、違いは、9つの追加のjQueryオブジェクトを作成して9つの追加のメソッド呼び出しを行うのにかかる時間とほぼ同じです。極端な場合、これは目立つ可能性がありますが、実際に違いが見られる可能性はほとんどありません。

于 2012-09-10T06:11:52.607 に答える
3

コードを順番に実行する必要がある場合は、同じdom readyコールバック関数に含める必要があります。そうでない場合は、コードを異なるdomreadyコールバックに分割できます。

于 2012-09-10T05:40:39.360 に答える
3

この関数を使用して、.ready()他のすべてのコードが読み込まれ、ページの準備ができたら、実行する必要のあるすべてのコードをラップするだけです。単独で実行できるライブラリがあり、DOMで何もする必要がない場合は、それらを準備完了呼び出しに入れる必要はありません。

于 2012-09-10T05:43:47.153 に答える
2

多くの通話を使用するとパフォーマンスが低下し$(document).ready()ますが、それほど悪くはないようです。また、一部のブラウザでは、パフォーマンスにまったく影響を与えていないようです。リンクされたページには$()、大規模なDOMを変更するために使用する場合の、いくつかの一般的なブラウザーのテスト結果があります。

于 2012-09-10T05:46:56.983 に答える
2

パフォーマンスの問題のため、私は個人的にページごとに個別の関数を作成しています。$(document).ready()したがって、複数回実行する代わりに、各ページで関数を起動するだけです。このように、私は通常$(document).ready()、グローバルに対して1回、特定のページに対して1回、合計2回しか実行しない傾向があります。

function ContactForm() {
    $(function () {
         // Contact form page specific stuff.
    });
}

私の見解では（あなたの質問の音によって、あなたがMVCを使用していると仮定して）、私がすることは以下を追加することです：

@section scripts {
    @Scripts.Render("~/bundles/ContactForm")
    <script type="text/javascript">ContactForm();</script>
}
于 2012-09-10T06:10:53.163 に答える