How to manage single JavaScript file in ASP.NET MVC application?

Question

I am working on an ASP.NET MVC application and using jQuery.

I understand from various web resources that I should:

1. Reference the google CDN for loading jQuery library. (No problem with that)
2. Combine, minify and compress my javascript files into one file.
3. NOT write JavaScript code in view files.

Now the problem is that on different views, I need to do different things when DOM is ready. For example lets assume I want to slideUp element with id ID1 on View1 and slideDown element with id ID2 on View2. How can I do this from single js file?

Answer 1

As I see it, I don't think your project / application is going to support that pattern of improving performance. Personally, if you have a lot of view-specific JavaScript going on (do X on View1, Y on View2), I think your view templates are the perfect place for them. I would:

1. Reference third-party libraries from CDN's - google for JQuery etc.
2. Combine all of my helper / utility functions into a single JS file. Ensure this is suitably "minified" / compressed, and put a reference to it in your masterpage / common header file.
3. Implement page specific JavaScript as part of your view files. Just make sure they are clean and separated from the actual HTML. Regularly keep a check on what is in your view JavaScript, and if you are repeating functionality, abstract it out into your source file of common / utility methods.