在 asp.net MVC 项目中处理大型 javascript 代码的好策略是什么？答案

【问题标题】：What is a good strategy for dealing with large javascript code in asp.net MVC projects?在 asp.net MVC 项目中处理大型 javascript 代码的好策略是什么？
【发布时间】：2010-07-28 13:27:13
【问题描述】：

我正在尝试找出管理我的 MVC 项目的 javascript 代码的最佳方法。由于页面的工作流程，我网站的一些页面在用户界面中使用 javascript 非常繁重。

为了使开发和调试更容易，我将所有 javascript 拆分为四个 .js 文件，Initializations.js 具有处理任何形式的 jquery 控件和字段初始化的所有功能，DataRetrieval.js 具有所有功能通过 ajax 检索和显示数据，DataModification.js 具有通过 ajax 将数据修改发送到服务器的所有功能，Utilities.js 具有提供帮助的实用功能。

以这种方式构建它不仅有助于我的开发工作，因为我知道哪个文件包含基于函数的特定函数，而且它还使我的 javascript 文件更小。它还有助于调试，因为我可以直接从 chrome 的调试器中查看脚本，选择哪个文件并轻松找到我需要调试的功能。从我正在阅读的内容来看，这也有帮助，因为大多数浏览器可以同时下载多个 .js 文件，从而更快地加载页面。这也使得以后更容易缩小。

我注意到的问题是，使用 .js 文件我无法将 C# 代码嵌入其中，因为它们不是视图。这意味着我所有的 URL 都必须有魔术字符串（因此，如果我稍后更改路由，我必须手动更改所有 URL）并且我不能使用我在 C# 中设置的常量来使所有内容都易于管理（如果我更改一个常量，例如整数意味着一个项目未发布，我必须在我的 javascript 文件中搜索所有引用并手动更改它们，这可能会导致错误）。

现在我想到的一种可能性是将我的 javascript 文件转换为部分视图。然而，这仍然使在 Web 浏览器中调试页面变得相当复杂，因为页面的源代码将被 javascript 乱扔。这也使得以后很难缩小 javascript。

那么我可以使用哪些其他策略来管理我的 javascript 并使其与网站的 c#/MVC 部分保持一致，并且在我需要进行更改时不必违反 DRY？

我网站的 Web 应用程序部分还有很多开发工作要做，所以还有很多 JavaScript 需要编写，我想在事情变得比现在更糟之前想出一个策略。

【问题讨论】：

一个有趣的问题。在一些小型（非 MVC）项目中，我最终包含了一个 .js 文件，以及我的页面上名为“setupVariables”之类的单个方法，因此我可以将 C# 嵌入其中......我敢肯定不是最优雅的解决方案。
也许这篇文章可以帮助你。 stackoverflow.com/questions/2957517/… 问候。
那篇文章正是我所需要的。允许我将所有 js 文件分开，但仍然允许在其中使用 C#！谢谢！

标签： javascript asp.net-mvc code-organization

【解决方案1】：

保持 JS 的结构不变，但传递重要的东西而不是使用魔法字符串。

编写一个 HTML Helper 将尽可能少的数据传递给 JS 并在您的 Site.Master 中使用它，例如这是一个非常简化的示例。

public MvcHtmlString ScriptData(this HtmlHelper helper)
{
    var scriptData = "window.Routing.ImportantRoute = '" + Url.Action("ActionName", "ControllerName") + "'; ";
    // etc.
    return MvcHtmlString.Create("<script type = 'text/javascript'>" + scriptData + "</script>");
}

这种技术很好，因为它往往会限制你通过的数量。

【讨论】：

【解决方案2】：

您应该查看一个名为 Pithy 的应用程序：http://github.com/clearwavebuild/Pithy

我非常专门地在我的 MVC 应用程序中使用它。您创建一个主 Pithy.js 文件，如下所示：

 "print.css": [
    "~/static/css/print.css"
],

"login-page.css": [
    "~/static/css/pages/page_login.css"
],

"login-page.js": [
    "~/static/js/pages/cw.page-login.js"
],

"changePassword-page.css": [
    "~/static/css/pages/page_changepassword.css"
],

"changePassword-page.js": [
    "~/static/js/pages/page-changepassword.js"
],

"encounter-list.css": [
    "~/static/css/encounter-list/encounter-list.print.css",
    "~/static/css/encounter-list/encounter-list.table.css"
],

然后在您的 C# 视图中，您可以调用：

    <%= Pithy.Javascript.Render("changePassword-page.js") %>

这将加载所有带有该标签的相应 JS 文件，将它们缩小并压缩。

至于将 C# 变量放入我需要的文件中，我确实使用局部视图，但我的局部视图只有 C# 的变量声明，然后普通 JS 文件将引用这些变量。

例如：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<script type="text/javascript">
    var BehaviorReduction = {

};

BehaviorReduction.loadingImage = "<%= Url.Content(Links.Static.img.ajax_loader_gif) %>";
BehaviorReduction.behaviorOverviewUrl =  "<%=Url.Action(MVC.BehaviorReduction.RenderBehaviorOverview()) %>";
BehaviorReduction.addNewBehaviorUrl = "<%=Url.Action(MVC.BehaviorReduction.AddNewBehavior()) %>";
</script>

然后：

<asp:Content runat="server" ID="Content3" ContentPlaceHolderID="JavaScript">
    <% Html.RenderPartial(MVC.BehaviorReduction.Views.BehaviorReductionJavascript);%>
    <%= Pithy.Javascript.Render("BehaviorReduction.js")%>
</asp:Content>

整个过程让我们非常容易管理我们的 javascript。它在生产版本中保持干净、最小化和压缩，在开发中我们可以确保文件永远不会被缓存，这会省去一些麻烦。

【讨论】：

【解决方案3】：

最后，我将采用 Uvita 在 cmets (this post) 中链接的解决方案。到目前为止，它似乎运行良好，它允许我执行缩小以及它让我轻松地保持我的 javascript 有条理，就像我保持我的视图有条理一样。总而言之，将资产管理和 MVC 集成到我的 javascript 文件中似乎是最简洁的方法。

【讨论】：

谨慎使用这种完全动态的 JavaScript 输出和缩小方法。它可能在项目的早期工作，但以这种方式提供“静态”资源可能会在您的服务器上产生不必要的负载，并降低您未来使用 CDN 进行优化的能力（如果需要）。使用链接线程和上面 Zeus 中描述的“initVariables”方法通常是一种“更安全”且更具可扩展性的方法。
不会缓存处理服务器负载问题（大多数情况下，我将使用它来路由 URL 和项目范围的常量值，因此我只需要真正生成一次的 javascript。至于CDN，如果我要切换到使用 CDN，无论如何我都必须更改 src 标签，所以我仍然可以生成 javascript 文件，将它们放在 CDN 上并将我的 <src> 标签指向 CDN。

【解决方案4】：

我所做的，它可能不是最好的方法，但它对我有用，是我使用资产管理器。不想做广告，但我在他们的 MVC 产品中使用 Telerik 的 WebAssetManager。有一个我过去使用过的开源 Asset Manager，也可以在这里找到：

http://weblogs.asp.net/rashid/archive/2009/05/02/script-and-css-management-in-asp-net-mvc-part-2.aspx

有了这些，我的资产结构如下：

Assets\
        Scripts\
                 Shared\  <--Jquery etc
                 ControllerName\
                                ViewName\

        Css\
            CssStuffGoesHere.css

母版页、和视图指定它们需要哪些 JavaScript 文件才能使它们工作，然后资产管理器将它们组合在一起并将它们与缓存版本组合在一起。就像我说的，我不知道它是否完美，但它让事情变得非常简单。

至于 js 文件中的动态变量。我只是声明了一个指向 ~\Scripts\Dynamic.js 的路由，它允许我将任何动态变量注入到我需要的 JavaScript 中。

【讨论】：