jquery - Organizing large javascript files -

i've started accumulate quite few lines of javascript code website. has been in 1 file far , file becoming impossible maintain. if there error in 1 line, entire file breaks.

i've tried splitting code multiple files there shared methods across objects like: validateemail(address).

right now, have code organized objects, so:

var productpage = {     addtocartbtn: "#add-to-cart",      init: function() {         productpage.initaddtocartpopup();         productpage.initsidebar();         ...     },     ... }; 

then, call productpage.init() on $(document).ready.

my issue is: when splitting productpage separate file contactpage, example cannot access contactpage.validateemail(). believe because code wrapped in jquery's:

(function ($) {     ... })(jquery); 

does have insight on how have organized large systems of javascript? also, plan on doing optimization putting of 1 file , compressing it. so, method benefit both maintainability , ease of optimization awesome.

validateemail methods functional in opinion. functional mean, y = f(x). these functions not changing state returning output being computed on passed input.

you might want keep utility functional methods in separate module , tag global namespace. make sure load this(these) utility module(s) before utilizing them.

you can use require.js dependency management.