JavaScript messy code in large projects with jquery etc?

Question

The javascript guru call there. Basically, my question is how you structure your code, both visually and for functionality, for example, you wrap all objects with this structure:

var myapp={ binds:function(){ //put some event listeners for jquery etc... }, otherfunc:function(){ //do some other thing }, init:function(){ //call myapp.binds and other functions and other stuff to intialize your app. } }; 

Then finally

 $(document).ready(myapp.init); 

The point is this structure, I think JSLint is complaining, right? What are the pros and cons of using such a structure, or is there a better way to structure your code? You follow a specific pattern from $(document).ready(call) to accommodate all event listeners and to “initialize” your application, do you use separate objects for methods and variables?

I also think “visually” if you have a very big webapp, this structure in the end looks very dirty, but maybe it's just me, I don’t know, any input is welcome.

Answer 1

 Using Inheritance Patterns to Organize Large jQuery Applications 

explain in detail and with best practice Alex

http://alexsexton.com/?p=51

explain it very well, must see

other links

• How to manage large jQuery applications 5 months ago

Answer 2

It doesn't matter how you structure your code if you follow the basic programming rules that your teacher considered for you:

• Do not write duplicate code
• A function should do 1 and only 1 thing
• Document your code
• Some other little things, but mostly higher ... oh and apply a lot of common sense.

Answer 3

The only mistake you get from this is "implied global." You can get rid of the warning for the document using this.document (since the window is context). The implied global for $ will remain if you do not paste jQuery into the source (then gl with all the errors in that).

I trust JSLint - a lot. In large projects, I try to make object literals, as you did above, but I use a module template to protect objects:

 var myapp = (function () { var secret_stuff, public_stuff; return { stuff: public_stuff } }());