Too many javascript files

Question

I have a web project in Asp.net MVC where in many pages, there is drop down list controls. When the value of these drop down list changes, a request to the controller action must be made to refresh some div tags.

To do that, I use the $(document).ready() function of jquery and I create a function like this:

$("#ComboBox").change(function() { /* do something here */ });

$.get('@Url.Action("Action", "Controller")', function (result) { 
    // TODO: process the results of the server side call
});

The problem is I don't want to create a big javascript file that contains a list of all things that must be done in all pages when the document ready event of jquery occurs.

For example, in one page, I have a combobox that create a request to the action x of the controller x and in another page another combobox that create a request to the action y of the controller y.

I'm not sure if this is a good strategy to create a distinct javascripf file for each of these pages.

What can I do? Create a javascript for each specific document ready function? If I put all the functions in the same document ready function of the same javascript file, what about conflict naming in id and class referred by control with jquery? And if all the functions are in the same javascript, what about page that don't use 90% of the functions in the document ready function.

i think you need an auto build tool to get all js file together — Torrent Lee
– Torrent Lee, Commented Jun 15, 2012 at 2:07

VJAI · Accepted Answer · 2012-06-15 06:17:30Z

1

When javascript gets more and more bigger in the client side you should really think about maintenance. jQuery is really easy to use but the problem is suddenly you will see the callbacks/handlers in many places makes difficult to manage. I would suggest you to use some kind of MVC library in the client side like Backbone.js that helps to organize the code in a better way.

The second this as the development perspective we should separate out the complete javascript used in the application into separate files module/controller wise. You could use minification frameworks that helps to combine all the javascript into single file.

The ASP.NET MVC 4 itself has the support of bindling/minification that helps you to combine and minify a set of js or css files.

http://ofps.oreilly.com/titles/9781449320317/ch_ClientOptimization.html#BundlingAndMinification http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx

answered Jun 15, 2012 at 6:17

VJAI

32.9k23 gold badges108 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Herring Over a year ago

I wouldn't recommend backbone.js at this stage. It doesn't sound like the total amount of javascript is very large, it's just scattered across many pages. Mixing mv* on the client and mvc on the server would be confusing until the OP had some more experience with js.

VJAI Over a year ago

I too don't recommend at this stage and that advice is for future.

Chris Herring · Accepted Answer · 2012-06-15 02:19:28Z

Having one large javascript file is not a problem, in fact it is desired. By placing the majority of your javascript in one file the browser can cache this file and on subsequent page loads will not need to fetch the javascript from the server resulting in faster page loads. You may still want to split your javascript files but for maintenance reasons. e.g. it might make sense to have a customer.js file for all customer related pages and so on.

To setup the individual event handlers in the document ready event you could include inline javascript in the page load which will allow you to set the actual control id if server generated (e.g. using <% Combo.ClientID %>). This code may just call the appropriate function in your main js file.

lucuma · Accepted Answer · 2012-06-15 02:38:16Z

If your application is quite large, organizing it by functional area will probably make sense although if you find you have a lot of little js files I'd suggest you place them together. That being said, there are some great tools that can minimize and group different javascript files together (live or as a part of a build process) and even monitor changes. They both can even translate .less/coffeescript etc into css as well.

Check out squishit and chirpy. I think both are available on Nuget.

Squishit: http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher

Chirpy: http://chirpy.codeplex.com/

The general wizdom is that if you have one js file that gets loaded on the first page view it gets cached for subsequent page views. This is generally why you may want to serve one file for all of them (although you can keep them separated as you develop).

Collectives™ on Stack Overflow

Too many javascript files

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related