CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Samuel
Samuel

Reputation: 12341

Too many javascript files

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.

Upvotes: 0

Views: 1578

Answers (3)

VJAI
VJAI

Reputation: 32758

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

Upvotes: 1

lucuma
lucuma

Reputation: 18339

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

Upvotes: 0

Chris Herring
Chris Herring

Reputation: 3665

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.

Upvotes: 1

Related Questions