1

我慢慢地对 JavaScript 有了更好的理解，但我一直坚持如何最好地解决这个特定的组织/执行场景。

我来自 C# 背景并且习惯于使用命名空间，所以我一直在阅读如何使用 JavaScript 实现这一点。我已经将已经开始成为一个大型 JavaScript 文件的内容拆分为更符合逻辑的部分。

对于页面特定的 JavaScript，我已决定每页一个文件，其中包含两个或多个页面共有的任何内容，例如可重用的实用程序函数，位于另一个命名空间和文件中。

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

由于我在处理大量自定义 JavaScript 方面缺乏经验，我在通用 JavaScript 文件中定义了一个函数，如下所示：

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>');
        });
    });
});

这显然远非理想，因为它特定于应用程序中的单个页面，但在每个页面请求上都被执行，如果不是完全愚蠢的话，这完全没有意义，而且效率极低。所以这导致我首先开始阅读命名空间。

经过一番阅读，我现在将其移至特定页面的文件并像这样重写它：

从 common.js 移动到 historyPage.js

(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 ));

我在jQuery Enterprise 页面上找到了这种模式。我还不会假装完全理解它，但它似乎是一种非常流行且最灵活的方式来组织和执行具有各种不同范围的 JavaScript，同时将事物排除在全局范围之外。

然而，我现在正在努力解决的是如何从执行的角度正确利用这种模式。我还试图将任何 JavaScript 排除在我的 HTML Razor 视图之外，并以一种不显眼的方式工作。

那么我现在如何historyPage.GetHistory只在它应该实际执行时调用该函数，即：只有当用户导航到网站上的历史页面并且需要函数的结果时？

4

2 回答 2

0

通过查看代码，似乎最简单的测试是检查您所在的页面是否包含带有idof的元素history-list。像这样的东西：

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

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

尽管如果它真的只需要在一个给定的页面上运行，那么它可能就不是共享 javascript 文件的理想选择。

于 2013-05-07T20:33:54.560 回答
0

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

在 _Layout.cshtml

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

在 History.cshtml 中

@section History
{
  historyPage.GetHistory();
}

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

于 2013-05-07T22:03:22.383 回答