What is a good strategy for working with large javascript code in asp.net MVC projects?

Question

I am trying to figure out how best to manage javascript code for my MVC project. Several pages of my site are very heavy with javascript for the user interface due to the workflow on the pages.

To simplify development and debugging, I split all my javascript into four .js files, Initializations.jswhich have all the functions to handle any form of jquery control and initialize the field DataRetrieval.js, which has all the functions to extract and display data through ajax DataModification.js, which has everything functions for sending data changes to the server through ajax and Utilities.js, which have useful functions to help.

Structuring this method helped my development efforts not only in knowing which file contains a specific function, based on what the function does, but also reduces my javascript files. It also helps in debugging, because I see scripts directly from chrome debugger, choose which file and it is easy to find the function that I need to debug. From what I'm reading, this also helps, since most browsers can load multiple .js files at the same time and thus load the page faster. It also facilitates minimization at a later time.

The problem I notice is that using .js files I cannot embed C # code in them, since they are not representations. This means that all my URLs must have magic strings for them (so if I change the routes later, I have to manually change all the URLs) and I cannot use the constants that I have set in C # to make everything manageable in all directions (if I change a constant, for example, which integer means that the project is unpublished, I need to look for all the links in javascript files and change them manually, which can lead to errors).

, , - javascript . , - - , javascript. javascript .

, javascript #/MVC DRY, ?

- - , javascript, , - , .

Answer 1

, Uvita ( ). , , javascript , . MVC javascript.

Answer 2

JS , , .

HTML-, , 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 3

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"
],

# :

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

JS , .

# , , #, 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 4

, , , Asset Manager. , Telerik WebAssetManager MVC. , , :

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 , , . , , , .

As for dynamic variables inside js files. I simply declare a route pointing to ~ \ Scripts \ Dynamic.js, which allows me to insert any dynamic variables into the JavaScript I need.