3

我试图找出管理我的 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 需要编写，我想在事情变得比现在更多失控之前想出一个策略。

4

4 回答 4

0

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

于 2010-07-29T12:40:25.390 回答
0

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

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

于 2010-07-28T14:00:17.997 回答
0

您应该查看一个名为 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。它在生产版本中保持干净、缩小和压缩，在开发中，我们可以确保文件永远不会被缓存，这可以省去一些麻烦。

于 2010-07-29T04:27:10.680 回答
-1

我所做的，它可能不是最好的方法，但它对我有用，是我使用资产管理器。不想做广告，但我在他们的 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 中。

于 2010-07-28T14:07:17.450 回答