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.

Answer 1

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