2

私はいくつかのhtmlを持っています:

<input type="button" value="Show message" class="messagebtn btn" disabled="disabled" />
<img class="loader" style="display: none;" alt="Loading..." src="@Url.Content("~/Content/Images/ajax-loader.gif")" />
<div class="peopleresultsdiv">
</div>
<script type="text/javascript">
    $(document).ready(function () {
    $('.messagebtn').click(function () {
        alert("Hi");
    }
    });
</script>

これはすべて PartialView 内にあり、この部分ビューは DisplayFor 内にあります。

1 つのページに DisplayFor を 3 回表示する必要があるため、次のことが効果的に得られます。

<input type="button" value="Show message" class="messagebtn btn" disabled="disabled" />
<img class="loader" style="display: none;" alt="Loading..." src="@Url.Content("~/Content/Images/ajax-loader.gif")" />
<div class="peopleresultsdiv">
</div>
<script type="text/javascript">
    $(document).ready(function () {
    $('.findpersonbtn').click(function () {
        alert("Hi");
    }
    });
</script>
<input type="button" value="Show message" class="messagebtn btn" disabled="disabled" />
<img class="loader" style="display: none;" alt="Loading..." src="@Url.Content("~/Content/Images/ajax-loader.gif")" />
<div class="peopleresultsdiv">
</div>
<script type="text/javascript">
    $(document).ready(function () {
    $('.findpersonbtn').click(function () {
        alert("Hi");
    }
    });
</script>
<input type="button" value="Show message" class="messagebtn btn" disabled="disabled" />
<img class="loader" style="display: none;" alt="Loading..." src="@Url.Content("~/Content/Images/ajax-loader.gif")" />
<div class="peopleresultsdiv">
</div>
<script type="text/javascript">
    $(document).ready(function () {
    $('.findpersonbtn').click(function () {
        alert("Hi");
    }
    });
</script>

まず、JavaScript をページ上で 3 回繰り返すという悪い習慣はありますか?

次に、ボタンの 1 つをクリックすると、Hi アラートが 3 回表示されます。スクリプトが画面上で 3 回繰り返されるため、これは理にかなっていると思います。

誰もがこれを回避する方法を知っているので、ボタンをクリックするたびにメッセージが1回だけ表示されます。

結局のところ、こんにちはと3回言うのは少しやり過ぎです。

4

3 に答える 3

1

まず、ページで Javascript を 3 回繰り返すという悪い習慣はありますか

はい、かなり悪いです。お気づきのように、データ転送と読み込み時間の点でページの重みが不必要にページに追加されるだけでなく、重複による頭痛の種になります。

これを回避する 1 つの方法は、スクリプトを非同期的にロードすることです。スクリプトが既に読み込まれているかどうかを確認します (これは Razor 部分ビューに表示されます)。

// check in the global scope for "MyFunctions" object, and a "doWireup" method
if (!window.MyFunctions || !window.MyFunctions.doWireup) {

    // if it doesn't exist, load it from "myfunctions.js"
    $.getScript(@Url.Content("Scripts/myfunctions.js"), function() {

        // execute wireups
        window.MyFunctions.doWireup();
    });
} else { 
    window.MyFunctions.doWireup();
}

スクリプトには次の関数myfunctions.jsが含まれている必要があります。doWireup

// get or create "MyFunctions" object in the global scope
var my = window.MyFunctions || (window.MyFunctions = {});

// add "doWireup" method to it
my.doWireup = function() {
    $('.findpersonbtn').click(function () {
        alert("Hi");
    });
};

この種のスクリプト管理は、 Require.js、Cassetteなどを使用して、依存関係管理と一緒にうまく実現できます。MVC4 を使用している場合は、そのスクリプト バンドル機能も検討する価値があります。

編集

あなたの例のように、スクリプトが数行しかない場合、上記はやり過ぎかもしれません。より良い/簡単な方法は、部分ビューのスクリプトが現在のページで実行されているかどうかを確認することです。グローバル スコープのブール値を追加するには、次のように変更します。

$(document).ready(function () {
    if (typeof window.HasScriptRun == "undefined")
    {
        window.HasRunScript = true;

        $('.findpersonbtn').click(function () {
            alert("Hi");
        }
    }
});
于 2012-11-21T20:16:19.533 に答える
0

私の提案は、HTMLフラグメントからJavaScriptを削除し、それをページのヘッダーまたはフッターに含めることです。

于 2012-11-21T20:10:21.850 に答える
0

同一のスクリプトのインスタンスが3つあるため、ボタンごとに3つのイベントリスナーが追加されます。$(document).ready(function(){})すべての要素がすでにDOMに存在する場合、ページが読み込まれると、の関数が実行されることに注意してください。

セレクター$('.findpersonbtn')は複数の要素（この場合は3つ）と一致する可能性があり、これらの一致する要素のそれぞれにクリックリスナーが追加されます。インスタンスごとにコードを実行する必要はありません。jQueryがすでに実行しています。

ちなみに、セレクターはあなたの例では何にも一致しませんがfindpersonbtn、元のコードの各ボタンインスタンスのクラスだったと思います

関数内thisでは、クリックされた要素を参照します。を実行することで、jQueryとして使用できます$(this)。したがって、たとえば、各ボタンに表示するメッセージが異なる場合、次のことができます。

<input type="button" value="Show message 1" class="findpersonbtn messagebtn btn" data-message="hi"/>
<input type="button" value="Show message 2" class="findpersonbtn messagebtn btn" data-message="hello"/>
<input type="button" value="Show message 3" class="findpersonbtn messagebtn btn" data-message="salut"/>

<script type="text/javascript">
$(document).ready(function () {
  $('.findpersonbtn').click(function () {
    alert($(this).data('message'));
  });
});
</script>
于 2012-11-21T20:26:11.860 に答える