在ASP.NET MVC 4中组织自定义JavaScript

Question

我是mvc 4的新手，想知道应该把自定义的javascript文件放在哪里。所谓“自定义”，指的是仅在特定视图或局部视图中使用的脚本。

我也使用区域（Areas），这增加了复杂性。我考虑把我的脚本放在应用程序根目录下的Script文件夹中，然后再放在Custom子文件夹中。

那么我应该如何在我的视图中引用这些脚本呢？我应该使用自定义bundle吗？

- Sam

Answer 1

我认为将您的脚本添加到自定义文件夹中的scripts文件夹是正确的方法。 您可以在appstart\BundleConfig.cs文件中创建一个新的捆绑包，如下所示：

bundles.Add(new ScriptBundle("~/bundles/custom").Include(
                   "~/Scripts/Custom/myCustom.js",
                   "~/Scripts/Custom/myCustom2.js"));

然后像这样将 bundle 添加到您的视图中：

@section scripts{

 @Scripts.Render("~/bundles/custom")

}

这将在您的layout文件中的@RenderSection("scripts", required: false)行呈现。

或者，要仅调用特定的一个view脚本，您可以执行以下操作：

@section scripts{
<script src="~/Scripts/Custom/myCustom.js"></script>
}

注意：可以从“解决方案资源管理器”中将脚本文件拖到该节中。您不必编写整个路径。
编辑 - 似乎很重要，所以我从上次的评论中复制了这段内容：
为了使用缩小，您需要将脚本添加到绑定表中，并将BundleTable.EnableOptimizations = true;添加到BundleConfig文件中或在web.config文件中设置<compilation debug="false"。

- Yoav

---

谢谢。我只有一个问题，就是显然一次只能加载一个视图，带有一个相关的自定义脚本。使用 ScriptBundle，每当我浏览到一个视图时，我会加载所有视图的自定义脚本。对我来说，那似乎过度了，更不用说脚本之间的冲突风险（例如：我的自定义脚本通常以 $（document）.ready 开头）。 - Sam

不确定我是否理解您的问题。在“脚本部分”定义的捆绑包仅将呈现给调用它的视图。此外，多次调用(document).ready()没有问题，请参见此处。 - Yoav

我的意思是，如果我为所有自定义脚本创建一个捆绑包，那么每当视图调用此捆绑包时，所有自定义脚本都将被加载。所以我想知道是否应该为每个自定义脚本创建一个捆绑包。 - Sam

如果您只需要加载一个脚本，那么您无需创建捆绑包，只需在视图的脚本部分调用特定的脚本即可（见我编辑过的答案）。 - Yoav

是的，目前我正在这样做。但是我没有利用优化（特别是缩小文件大小）。 - Sam

你是正确的。为了使用“缩小”功能，您需要将脚本添加到“bundle table”中，并在“BundleConfig”文件中添加“BundleTable.EnableOptimizations = true;”，或在您的“web.config”文件中设置“<compilation debug =“false”...”。 - Yoav

Answer 2

你可以将脚本组织在“Scripts”文件夹中：

• ~/Scripts/Home/foobar.js
• ~/Scripts/Admin/baz.js
• ...

我应该使用自定义 Bundle 吗？

当然，你可以捆绑那些总是一起使用的脚本。

- Darin Dimitrov

---

通常情况下，我每个视图只有一个脚本。为每个唯一的脚本创建一个捆绑包是否可行？这不会太多了吗？ - Sam

压缩应该足够了。此外，您可以考虑将功能分组在一个较大的脚本中，在视图之间重复使用。最好拥有一个单一的压缩捆绑包，即使在给定视图中并未使用所有功能，也比为每个视图使用数百个小脚本要好得多。 - Darin Dimitrov

@DarinDimitrov 不是创建每个视图的捆绑包更好吗？然后它们可以合并，并且每个视图只有一个或几个脚本。 - Odys