I am trying to figure the best way to manage my javascript code for my MVC project. A few pages of my site are very heavy with javascript for the user interface due to the workflow of the pages.
In order to make development and debugging easier I split all my javascript into four .js files, Initializations.js which has all the functions to handle any form of jquery control and field initializations, DataRetrieval.js which has all the functions to retrieve and display data via ajax, DataModification.js which has all the functions to send data modifications to the server via ajax, and Utilities.js which have utility functions to help out.
Structuring it this way has helped my development effort in not only the fact that I know which file contains a specific function based on what the function does, but it also keeps my javascript files smaller. It also helps in debugging because I can see the scripts right from chrome’s debugger, choose which file and easily find the function I need to debug. From what I’m reading this also helps as most browsers can download multiple .js files simultaneously and thus load the page faster. This also makes it easier to minify at a later time.
The issue I am noticing is that using .js files I cannot embed C# code into them, as they aren’t views. This means that all my URLs have to have magic strings for them (so if I change routes later I have to change all the URLs by hand) and I can’t use constants I have setup in C# to make everything manageable across the board (if I change a constant, such as what integer means a project is unpublished, I have to search for all references in my javascript files and change them by hand, which can lead to bugs).
Now one possibility I thought of is to turn my javascript files into partial views. However, this still makes debugging the page in a web browser pretty complicated as the page’s source code will be littered with javascript. This also makes it hard to minify the javascript at a later time.
So what other strategies can I use to manage my javascript and keep it in line with the c#/MVC portions of the site and not have to violate DRY when I need to make changes?
The web application portion of my site still has a lot of development to do so there is still much more javascript to write, and I want to come up with a strategy before things get out of hand more than they already are.
In the end I’m going to go with the solution linked to by Uvita in the comments (this post). So far it seems to be working well, it allows me to perform minification as well as it lets me easily keep my javascript organized the same way I keep my views organized. All in all it seems the cleanest method to both asset management and MVC integration into my javascript files.