javascript - MVC .NET 3 - 可维护、重构友好的 Javascript 文件

Question

我目前有页面特定的 javascript 文件，看起来像这样:

$(document).ready(function () 
{
  namespace.home.list = {}; 

  namespace.home.list.Update = function ()
  {
    var element = $(namespace.ElementIds.LIST);
    //some code that pulls a list from the server and dumps the data into our element
  });
};

按照我自己的约定，这个 .js 文件属于 Controller Home/List(相应地属于 View Home/List.cshtml)。

此外，namespace.ElementIds 有一个 ID 列表，这些 ID 手动与(几乎)相同的 .cs 文件保持同步，因此服务器生成的 html 创建的元素与我在我的 js 文件中引用的 ID 相同。

我对此不满意，因为这是保持我的 elementId 和 js namespace 重构友好的解决方案。有没有更好的办法？

目前我的 javascript 是通过带有 src 属性的脚本标签加载的，但我考虑过将它们放在 .cshtml 文件中，这些文件只有一个带有一些 razor 标记的脚本标签，可以让我只使用我的 C# 类来定义 namespace + elementIds .我觉得这不是一个好主意，但实际上我不知道为什么。它会提高我重构服务器代码并将其链接到客户端代码的能力，但有什么缺点呢？缺乏缓存？性能下降？

Answer 1

通常您不希望将那么多 javascript 文件链接到您的文档。在 HTTP 协议(protocol)中，每个都耗尽了一次往返的时间和开销。

你应该做的是构建/使用一个系统来收集项目中的所有 JS 文件，并将它们压缩成一个缩小的 js 文件(如果你需要更轻的负载，则为 2-3 个)。这将确保它们可以一次性快速加载。

然后您在文档中链接一个文件，将原始 js 文件重命名为什么都没有关系。或者它住在哪里。

关于命名空间，您应该注意的事项:

您可能应该将大部分模块包装在一个范围内，以防止污染您的全局命名空间，这具有为您的命名空间机制提供快捷方式的额外好处:

;(function($, $namespace) {

    var $module = $namespace.list = {};

    $module.Update = function ()
    {
       var element = $($namespace.ElementIds.LIST);
       //some code that pulls a list from the server and dumps the data into our element
    };

})(jQuery, namespace.home);

这允许您拥有具有有用(通用)名称的私有(private)辅助函数。因为它们只能从该范围内访问并且不会与其他模块冲突。此外，这可以确保您的 jQuery 永远不会与可能在全局命名空间中使用 $ 标识符的另一个 js 库发生冲突。