Convert a large javascript file into multiple files -

my question: how 1 best go breaking large, monolithic javascript object literal multiple, discrete, files?

i have single javascript file consists of object literal many methods attached it. it's getting quite long , want break smaller parts can more managed.

i've heard can use amd or commonjs organize things, i've heard should use requirejs, should use webpack or browserify, should use number of other tools/techniques. after looking @ these things confused best approach is.

how it? how take single object literal consisting of few thousands lines of javascript (made of functions "search" , "login" , "user") , reorganize multiple files more dealt group of developers? single, giant file thing getting unwieldy , options seems varied , unclear. simple app uses vanilla js, little jquery , sits on top of grails backend.

i think question pretty clear if need code @ here example of sort of object literal talking about:

var myobj = {      foo: "one",     bar: "two",     baz: false,     deez: -1,      login: function() {         // lots , lots of code     },      user: function() {         // lots , lots of code     },      beers: function() {         // lots , lots of code     },      varieties: function() {         // lots , lots of code     }      init: function() {         myobj.login.init();         myobj.user.init();         // lots of jquery document.ready stuff     } }  myobj.init(); 

here's pattern use:

• when possible, break concepts own sub-object
• regardless of sub-objects or not, declare non-broken-up properties first, add needed
• if files across multiple files , not wish use sub-objects per-file, use temporary object hold additional properties, , extend original.

sample:

var myobj = {   foo: "one",   bar: "two",   baz: false,   deez: -1 }  myobj.login = function() {     // lots , lots of code };  myobj.user = function() {     // lots , lots of code };  myobj.drinks = {   beer: function() {},   wine: function() {},   sunnydelight: {     drinkit: function() {},     burp: function() {}   } };  myobj.init = function() {   myobj.login.init();   myobj.user.init();   // lots of jquery document.ready stuff }  myobj.init(); 

note "drinks" concept unto itself, containing multiple properties , methods. concepts might "ui", "utils", "data" or whatever role of contained properties happens be.

for extend point made, there's not code needed there either

// "utilities.js" var myobj = {   // bunch of properties and/or methods };  myobj.morestuff = "more stuff!"; 

and in file have 2 choices. either add object without overwriting (you need dot-notation this):

// "ui.js" var myobj = myobj || {};  // adds render object existing myobj myobj.render = {   header: function() {},   dialogbox: function() {} } 

the above works particularly if sub-divide concepts... because can still have monolithic objects not trample on rest of myobj. maybe want add directly myobj without trampling , without subdividing concerns:

// "ui.js" var myobj = myobj || {};  // ultimately, contents of object merged existing myobj var myobjsupplement = {   header: function() {},   dialogbox: function() {},   herobiscuit: "a yummy biscuit made heroes!" }  // using jquery here, it's not way extend object $.extend(myobj, myobjsupplement) 

i don't see many opportunities use above, since myobjsupplement in global namespace , defeats purpose of limiting additions global namespace, it's there if need it.

[edited add: ]

it might not go "without saying" thought-- dividing many different files works best if have build process in place can concatenate them 1 file suitable minifying. don't want have 100 or 6 separate files each requiring synchronous http call fetch.

there more modern , possibly 'better' approaches technologies amd/requirejs... if question is, "how divide object literal several files", above answer i've given 1 can stand behind.