更好的JavaScript组织和执行—低调的方式—自动执行匿名函数

我慢慢地对JavaScript有了更好的理解，但我一直在思考如何最好地处理这个特定的组织/执行场景

我来自C#背景，习惯于使用名称空间，因此我一直在阅读如何使用JavaScript实现这一点。我已经把已经开始变成一个大JavaScript文件的东西分割成更多的逻辑部分

我已经决定在另一个名称空间和文件中为特定于页面的JavaScript创建一个页面文件，其中包含两个或多个页面所共有的任何内容，如可重用的实用程序函数

这在目前对我来说是有意义的，并且似乎是一个流行的选择，至少在开发过程中是如此。我将使用一个捆绑工具来组合这些不同的文件，以便部署到生产环境中，使开发更合理、更容易找到代码的任何东西都会更好

由于我在处理大量定制JavaScript方面缺乏经验，因此我在通用JavaScript文件中定义了如下函数：

var $histList = $('#history-list');

if($histList.length > 0){
    // EXECUTE THE CODE
}

common.js

$(document).ready(function () {
    var historyUrl = '/history/GetHistory/';
    $.getJSON(historyUrl, null, function (data) {
        $.each(data, function (index, d) {
            $('#history-list').append('<li>' + d.Text + '</li>');
        });
    });
});

(function(historyPage, $, undefined) {

    historyPage.GetHistory = function () {
        var historyUrl = '/history/GetHistory/';
        $.getJSON(historyUrl, null, function (data) {
            $.each(data, function (index, d) {
                $('#history-list').append('<li>' + d.Text + '</li>');
            });
        });
    };
    }( window.historyPage = window.historyPage || {}, jQuery ));

$（文档）.ready（函数（）{
var historyUrl='/history/GetHistory/'；
$.getJSON（历史URL，null，函数（数据）{
$。每个（数据，函数（索引，d）{
$（“#历史记录列表”）.append（“
”+d.Text+”
）；
});
});
});

这显然远远不够理想，因为它只针对应用程序中的一个页面，但在每个页面请求上都会执行，这是完全没有意义的，而且效率极低，如果不是完全愚蠢的话。因此，我首先开始阅读名称空间

经过一点阅读，我现在将其移动到一个特定于页面的文件中，并按如下方式重新编写：

var $histList = $('#history-list');

if($histList.length > 0){
    // EXECUTE THE CODE
}

从common.js移动到historyPage.js

$(document).ready(function () {
    var historyUrl = '/history/GetHistory/';
    $.getJSON(historyUrl, null, function (data) {
        $.each(data, function (index, d) {
            $('#history-list').append('<li>' + d.Text + '</li>');
        });
    });
});

(function(historyPage, $, undefined) {

    historyPage.GetHistory = function () {
        var historyUrl = '/history/GetHistory/';
        $.getJSON(historyUrl, null, function (data) {
            $.each(data, function (index, d) {
                $('#history-list').append('<li>' + d.Text + '</li>');
            });
        });
    };
    }( window.historyPage = window.historyPage || {}, jQuery ));

（函数（historyPage，$，未定义）{
historyPage.GetHistory=函数（）{
var historyUrl='/history/GetHistory/'；
$.getJSON（历史URL，null，函数（数据）{
$。每个（数据，函数（索引，d）{
$（“#历史记录列表”）.append（“
”+d.Text+”
）；
});
});
};
}（window.historyPage=window.historyPage | |{}，jQuery））；

我在地图上发现了这个图案。我还不想假装完全理解它，但它似乎是一种非常流行且最灵活的方式，可以组织和执行各种不同作用域的JavaScript，而不是将内容排除在全局范围之外

然而，我现在正在努力解决的是如何从执行的角度正确地利用这种模式。我还试图在HTML Razor视图中保留任何JavaScript，并以一种不引人注目的方式工作

---

那么，我现在如何调用

historyPage.GetHistory

函数，仅当它实际应该执行时，即：仅当用户导航到网站上的历史记录页并且需要该函数的结果时？

查看代码，似乎最简单的测试是检查您所在的页面是否包含id为

history list

的元素。大概是这样的：

var $histList = $('#history-list');

if($histList.length > 0){
    // EXECUTE THE CODE
}

---

尽管如果它真的只需要在一个给定的页面上运行，那么它可能并不适合共享javascript文件。

使用我在上述问题中详细介绍的代码，我通过执行以下操作使其工作：

在_Layout.cshtml中

    @if (IsSectionDefined("History"))
    {
      <script type="text/javascript">
          $(document).ready(function () {
            @RenderSection("History", required: false)
        });
      </script>
    }

@section History
{
  historyPage.GetHistory();
}

---

仅当用户请求网站上的历史记录页时，代码才会按要求执行。尽管上面@Dagg Nabbit的评论给我带来了一个曲线球，我认为我在正确的轨道上。。。嗯…

它不在共享文件中，而是在historyPage.js文件中，该文件只包含历史页面的代码。有没有更好的方法来封装特定页面的代码？如果这个脚本只需要在一个页面上运行，那么为什么首先需要“命名”它？只需编写

函数getHistory（）{…}

一次，并仅将其包含在该页面上。如果您已经有一个全局“名称空间”对象，那么使用

myNS.getHistory=function（）{…}--这里的混乱生活真的没有理由，而且听起来你肯定知道
historyPage
是否存在，所以不需要
window.historyPage=window.historyPage |{}
（而且不需要
未定义的
，因为您没有使用它；因为
无效
，从来没有使用过它）。我还没有接触过大量可能的JavaScript。我正试图在一片充满不同观点和方法的浑水中航行。老实说，我被你的评论弄糊涂了。就像我说的，我还没有假装完全理解它。请记住，我也试图在不知情的情况下做事但我不确定如何或在哪里编写
函数getHistory（）
就我而言，我只编写了一次函数，没有重复的代码。如果我仍然很愚蠢，请原谅。@Jammer如果它已经只包含在该页面上，那么我不确定您的实际问题是什么。在上面的问题中，您只问了“当用户导航到历史页面时”如何运行它。但这听起来似乎不是问题。@JamesMontagne我在发布原始问题后发现了这种技巧。我想我现在将继续使用这种技巧，随着我对它的理解加深，我以后将能够更好地重新评估。谢谢你的帮助。