在 asp.net mvc 4 中组织自定义 javascript答案

【问题标题】：organizing custom javascripts in asp.net mvc 4在 asp.net mvc 4 中组织自定义 javascript
【发布时间】：2013-01-15 07:55:47
【问题描述】：

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

我也使用区域，因此增加了复杂性。我正在考虑将我的脚本放在应用程序根目录的 Script 文件夹中，然后放在 Custom 子文件夹中。

然后我将如何在我的视图中引用脚本？我应该使用自定义捆绑包吗？

【问题讨论】：

标签： javascript asp.net-mvc-4 bundle

【解决方案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 只调用一个特定的script，您可以这样做：

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

注意：您可以将脚本文件从solution explorer 拖到该部分。您不必编写整个路径。
编辑 - 似乎很重要，所以我从我的上一条评论中复制了这一点：
为了使用minification，您需要将脚本添加到捆绑表中，并将BundleTable.EnableOptimizations = true; 添加到BundleConfig 文件或在web.config 文件中设置<compilation debug="false"。

【讨论】：

谢谢。我对这种方法只有一个问题：显然，一次可能只加载一个视图，并带有一个关联的自定义脚本。使用 scriptbundle，每当我浏览到一个视图时，我都会为每个视图加载所有自定义脚本。这对我来说似乎有点矫枉过正，更不用说脚本之间发生冲突的风险了（例如：我的自定义脚本通常以 $(document).ready 开头）
不确定我是否理解您的问题。在scripts section 定义的包将只为调用它的视图呈现。多次调用(document).ready()也没有问题，见this。
我的意思是，如果我为所有自定义脚本创建一个包，那么每当视图调用此包时，我的所有自定义脚本都会被加载。所以我想知道是否应该为每个自定义脚本创建一个包。
如果你只需要加载一个脚本，那么你不需要为它创建一个包，只需在你视图的脚本部分调用特定的脚本（参见我编辑的答案）。跨度>
是的，这就是我目前所做的。但是我没有利用优化（特别是缩小）。

【解决方案2】：

您可以在Scripts 文件夹中组织您的脚本：

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

我应该使用自定义捆绑包吗？

当然，您可以捆绑始终在一起的脚本。

【讨论】：

通常，每个视图只有一个脚本。可以为每个唯一脚本创建一个包吗？这还不算多吗？
缩小就足够了。此外，您可能会考虑将功能分组到一个更大的脚本中，以便在视图之间重用。即使不是所有功能都在给定视图中使用，最好有一个单一的缩小包，而不是每个视图都有数百个小脚本。
@DarinDimitrov 为每个视图创建捆绑包不是更好吗？然后可以合并它们，每个视图只有一个或几个脚本。