0

我们有一个包含多个区域的 MVC 4 Web 应用程序。

网站上的所有页面都使用了一个主布局视图，它包含所有的 CSS 包括、渲染主体标签，然后是所有的 JavaScript 库。

<head>
<link rel="stylesheet" media="screen" href="~/Content/jquery-ui-1.10.3.custom.min.css" />
..
</head
<body>
    <div id="main-content">@RenderBody()</div>
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
    ..   
</body>

JavaScript 由 jquery、jqueryui 和插件等常用库组成。还有一个 JavaScript 文件包含整个站点的自定义代码

由于只有 1 个包含数千行的大型 JavaScript 文件，因此通过检查特定 DOM 元素的存在来确定代码例程是否继续进行来初始化代码例程。

runExample = function() {
    if ($(".Example").length > 0){
      // execute code
    }
}
..
runExample();

这当然是有问题的，因为所有文件都包含大量脚本，而有适用于所有页面的代码，大多数代码仅适用于某些区域或页面。

  • 有没有更好的方法来为网站拆分 JavaScript？ 请记住，有条件的是自定义代码，不一定是插件
  • 即使有办法为每个区域创建一个 JavaScript 文件，在主布局中如何引用它？
  • 是否最好在包含文件的末尾加载 JavaScript 包含文件？
  • 缩小对性能的影响是什么？它是否有利于自定义代码文件？

任何意见，将不胜感激。

4

1 回答 1

1

首先，使用捆绑。看看你项目中 App_Start 文件夹下的 BundleConfig.cs。通过简单地将所有 JS 缩小和捆绑在一起，有时某些代码实际上并未在当前页面上使用是无关紧要的（从每个页面使用的一个缓存 JS 文件中获得的节省有时比加载新的不同位更好） JS 在每个页面上。）

如果你需要更细粒度的控制，你可以使用 Require.js 之类的东西。您基本上将 JS 编写在依赖于其他模块运行的模块中（在这种情况下，您的所有插件、jQuery 等都成为“模块”）。您需要尽可能地在逻辑上手动缩小和组合您的 JS，但这将允许您将各种脚本集成在一起，而不必担心加载顺序和缺少依赖项。

作为旁注，我会恭敬地不同意 Kevin B。如果可维护性要求您的 JS 必须在头脑中，我会说这是您的代码设计存在更大问题的症状。在头部添加 JS的唯一好理由是在页面呈现之前运行 JS 是必不可少的。一个很好的例子是 Modernizr，它为 html 元素添加了类，以允许您指定不同的样式等，具体取决于用户浏览器中是否可用某些功能，或者在 IE 的情况下，用户正在运行什么版本。如果不加载头部，您的样式会在页面加载后发生变化，导致无样式内容的闪烁等。除了这些情况之外，所有JS 应该在结束 body 标记之前，因为 JS 是阻塞的：浏览器将完全停止它正在做的事情和页面的所有呈现，并在继续之前完全运行脚本。太多了，你的用户盯着空白页太久了。

此外，所有脚本（以及与此相关的 CSS）都应该被缩小。没有充分的理由不这样做，而且用户必须下载的字节数差异通常非常显着。尤其是在当今这个万物皆可移动且数据计划过于有限的时代，每个字节确实很重要。

于 2013-11-04T22:06:34.357 回答