How to organize complex jquery application?

So I have a problem with my jquery applications entirely. When the application is small it's cool. But when it is quite large it is such a mess.. Nested functions, ajax calls, selectors, dom manipulations. Seems like it's non-containable at all, especially when it has a complex logic.

The functional approach does not help me out much. And I don't see how to use classes and inheritance here in practice. How to organize the code? I have read a lot of articles about prot开发者_开发问答otypical and pseudo classical inheritance but they just explain how things works, like how you can inherit 'Person' from 'Human' or something like this. How can I actually use it in real life?

I find two things that really help organize javascript. One use objects for encapsulation ( http://www.dustindiaz.com/namespace-your-javascript ), and two, write a library for common tasks. The normal refactoring strategies work for javascript, extract functions, commonize, if you have 4 functions doing nearly the same thing, change them to a single function which can handle all four cases.

When planning a large jQuery application that I'm currently working on, I found this post by Addy Osmani very useful.

Full disclosure, though: we ended up hanging most of our application backbone off of a YUI3 core. All our "controller" code is written in jQuery, but the frontend data model is YUI3.