Best practices to develop and maintaing code for complex JQuery/JQueryUI based applications

Question

I'm working on my first very complex JQuery based application.

A single web page can contain hundreds of JQuery related code for example to JQueryUI dialogs.

Now I want to organize code in separated files.

For example I'm moving all initialization dialogs code $("#dialog-xxx").dialog({...}) in separated files and due to reuse I wrap them on single function call like

dialogs.js

function initDialog_1() {
  $("#dialog-1").dialog({});
}

function initDialog_2() {
  $("#dialog-2").dialog({});
}

This simplifies function code and make caller page clear

$(function() {
  // do some init stuff
  initDialog_1();
  initTooltip_2();
});

Is this the correct pattern?

Are you using more efficient techniques?

I know that splitting code in many js files introduces an ugly band-bandwidth usage so.

Does exist some good practice or tool to 'join' files for production environments?

I imagine some tool that does more work than simply minimize and/or compress JS code.

Bogdan Nicolau · Accepted Answer · 2010-03-30 06:31:56Z

2

Some suggestions I might add:

keep all your variables in a globally available, multi-structured object, something like: MyVars = { dialogs: {}, tooltips: {} } and then use that across all your scripts

use call or apply methods for dynamically calling custom function names,if you perhaps want to keep the above object lightweight

For tidying things up, you could read this: http://betterexplained.com/articles/speed-up-your-javascript-load-time

answered Mar 30, 2010 at 6:31

Bogdan Nicolau

1984 bronze badges

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

Comments

sfussenegger · Accepted Answer · 2010-03-28 08:19:19Z

0

This sounds fairly okay too me. Just two notes:

Use descriptive method names. "initDialog_1" doesn't tell you anything about the dialog it initializes.
While keeping JS code split into several files eases development it harms the felt performance of your interface. You could merge all files into one during build/deployment/runtime of your app. How to do it best heavily depends on your environment though.

answered Mar 28, 2010 at 8:19

sfussenegger

36.2k17 gold badges101 silver badges120 bronze badges

1 Comment

dafi Over a year ago

the name "initDialog_1" is only for make the question clear, obviously initDialogModifyTags is one of the real initXXX I've

Daniel Earwicker · Accepted Answer · 2010-03-28 08:19:27Z

0

I'm working on something fairly complex in JS right now, and have been wondering the same thing. I looked at various "module" implementations but while they look "cool" they don't seem to offer much value.

My plan at this point is to continue referencing lots of script files from my .html page (the plan is to only have one .html page, or very few).

Then when I'm building the release version, I'll write a very simple tool to fit into my build process, which will discover all the scripts I reference from the .html pages and concatenate them into one file, and replace the multiple <script> elements with a single one, so that only one request is necessary in the "release" version.

This will allow the compression to work across all the script text instead of on each separate file (like doing tar followed by gzip) and should make a difference to the script download time (though I should stress I haven't actually implemented it yet).

answered Mar 28, 2010 at 8:19

Daniel Earwicker

117k38 gold badges209 silver badges289 bronze badges

2 Comments

Rich Over a year ago

FYI, I've had the exact same experience and thought. I've eventually found the steal.js script from the JavaScript MVC framework to be very useful: javascriptmvc.com/docs/steal.html#&who=steal Essentially your html file references one javascript file, that in turn references all your .css and .js files. In production you run a script to chomp all of those .css and .js files into minified versions. It's pretty slick...

Daniel Earwicker Over a year ago

@Rich - that's almost exactly what I ended up doing. I have a .js file containing an array of other .js files. I have a version of that file which contains the name of a single combined minified file, and another (auto-generated) version that lists all the individual files. So I can switch between the two depending on whether I want debugging convenience or runtime performance.

ground5hark · Accepted Answer · 2010-03-28 08:25:41Z

-1

You usually want to keep all of your javascript inside one file. Less HTTP requests is usually better. If you take a look at the jQuery source, you'll notice that every function and property is right there in the jQuery global object:

jQuery.fn = jQuery.prototype = {
    init: function(){ ... },
    animate: function() { ... },
    each: function() { ... },
    // etc
}

However, the pattern you seem to be interested seems similar to the "module" pattern. The YUI framework uses this pattern, and allows developers to "require" different components of the library from the core module via HTTP request. You can read more about YUI here:

http://developer.yahoo.com/yui/3/yui/

answered Mar 28, 2010 at 8:25

ground5hark

4,5249 gold badges33 silver badges35 bronze badges

1 Comment

roundcrisis Over a year ago

You want to deliver less files yes, that doesnt mean that is how you write it, so its not required you keep all you js in one file while developing

Collectives™ on Stack Overflow

Best practices to develop and maintaing code for complex JQuery/JQueryUI based applications

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related