JavaScript messy code in large projects with jquery etc?

Question

Calling the javascript gurus out there. Basically my question is regarding how you structure your code, both visually and for functionality for example do you wrap everything in objects using 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 thing is with a structure like this I think JSLint complains doesn't it? Whats the pros and cons using a structure like this or is there a generally better way to structure your code? Do you follow a certain pattern from $(document).ready(call) to putting all your event listeners and "initializing" your app, do you use separate objects for methods and variables?

I also think "visually" if you have a very large webapp this structure eventually looks very messy, but maybe it's just me I don't know, any input is appreciated thanks.

Answer 1

Using Inheritance Patterns to Organize Large jQuery Applications

explain in detail and with better practice by Alex

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

its very very well explain, must see

other links

• How To Manage Large jQuery Apps 5 months ago

Answer 2

It doesn't matter much how you structure your code as long as you follow the essentials rules of programming that your teacher thought you:

1. Don't write repetitive code
2. A function must do 1 and only 1 thing
3. Document your code
4. Some other small things but mostly the above... oh and apply lots of common sense

Answer 3

The only error you get from that is "implied global." You can get rid of the warning for document by using this.document instead (since window is the context). The implied global for $ will stay unless you paste in the jQuery source (then gl with all the errors in that).

I trust JSLint--a lot. On big projects I tend to make object literals as you did above but I use a module pattern for object security:

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