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.