Question

我正在尝试为我的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要编写，我想在事情失控之前提出一个策略，而不是已经存在。< / p>

Answer 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>");
}

这项技术很不错，因为它会限制你通过的数量。

Answer 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。它保持干净，缩小和压缩生产版本，在开发中我们可以确保文件永远不会被缓存，这可以节省一些麻烦。

Answer 3

最后，我将在评论（this post）中使用Uvita链接的解决方案。到目前为止，它似乎运行良好，它允许我执行缩小，以及它让我轻松保持我的JavaScript组织方式与我保持组织的视图相同。总而言之，它似乎是资产管理和MVC集成到我的javascript文件中最干净的方法。

Answer 4

我做了什么，它可能不是最好的方式，但它适用于我，是我使用资产管理器。不试图做广告，但我在他们的MVC产品中使用Telerik的WebAssetManager。我在过去使用的开源资产管理器可能也可以在这里找到：

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中。

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

4 个答案: