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: 
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>
This sounds fairly okay too me. Just two notes:

1. Use descriptive method names. "initDialog\_1" doesn't tell you anything about the dialog it initializes.
2. 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.