局部 View 中的 Javascript 如果局部 View 在页面上多次出现，如何让它只出现一次

Question

我有一些像这样的 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 中，这个部分 View 在一个 DisplayFor 中。

我必须在一个页面上显示 3 次 DisplayFor，以便您有效地获得:

<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>

那么首先，在页面上重复 3 次 javascript 是一种不好的做法吗？

第二件事是，当我点击其中一个按钮时，我收到了 3 次 Hi 警报。我猜是有道理的，因为脚本是在屏幕上重复三遍。

有谁知道如何解决这个问题，所以每次单击按钮我只会收到一次消息。

毕竟说三遍 Hi 有点过分了。

Answer 1

So for a start, is this bad practice having the Javascript repeated three times on the page

是的，这很糟糕。正如您所注意到的，除了在数据传输和加载时间方面不必要地增加页面权重页面之外，它还会造成令人头疼的重复。

解决它的一种方法是异步加载脚本。检查您的脚本是否已加载(这在 Razor 局部 View 中):

// 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，可能还值得研究一下它的 script bundling features .

---

编辑

如果您只有几行简短的脚本，我想上面的内容可能有点矫枉过正，就像您的示例中那样。更好/更直接的方法可能是简单地检查局部 View 的脚本是否已在当前页面上运行。只需修改以添加一个全局范围的 bool 值:

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

        $('.findpersonbtn').click(function () {
            alert("Hi");
        }
    }
});