Edit Question - KnowledgeHub

Title Body

My javascript file is getting pretty big (3000+ lines) and I'm getting confused as to how to layout my file and delare functions so that they can called anywhere in the file. To summarise my JS file looks a little like this at the moment: //ALL GLOBAL VARIABLES FIRST DECLARED HERE var var1 , var2 ,var3 $(document).ready(function(){ //JQUERY STUFF }); //ALL FUNCTIONS THAT NEED TO BE GLOBAL DECLARED HERE function myFunction(){ //do some stuff here } I am running into problems with this as some functions I call in places don't seem to be declared at the time of calling or aren't available globaly. It's all very confusing now! Could someone suggest the best way to layout a big js/jquery file with certain JS Functions, Objects and Variables available to be referenced anywhere in the file. UPDATE: So to simplify it this correct (see my comments)? window.MainModule = (function($, win, doc, undefined) {//WHAT IS BEING PASSED IN HERE? var foo, bar, modules; //VARIABLES ACCESSIBLE ANYWHERE var modules["foobar"] = (function() {//WHAT IS A MODULE? WHEN WOULD I USE A SEPERATE MODULE? var someFunction = function() { ... };//DECLARING MY FUNCTIONS? ... return { init: someFunction,//IS THIS WHERE I USE/BIND MY FUNCTIONS TO EVENTS AND ELEMENTS? ... }; }()); // hoist a variable into global scope window.Global = someLocal; return { init: function() {//FUNCTION TO INIT ALL MODULES? for (var key in modules) { modules[key].init(); } } }; }(jQuery, this, document));

Tags (comma-separated) Cancel