How to organize a complex jquery application?

Question

So, I have a problem with my jquery applications completely. When the application is small, this is cool. But when it is quite large, it is such a mess. Nested functions, ajax calls, selector, dom manipulations. It seems that he does not hold back at all, especially when he has complex logic.

A functional approach does not help me much. And I don't see how to use classes and inheritance here in practice. How to organize the code? I read a lot of articles about prototype and pseudo-classical inheritance, but they just explain how everything works, for example, how you can inherit “Man” from “Man” or something like that. How can I really use it in real life?

Answer 1

I find two things that really help organize javascript. One uses objects for encapsulation ( http://www.dustindiaz.com/namespace-your-javascript ), and two write a library for general tasks. The usual refactoring strategies work on javascript, extract functions, generalize, if you have 4 functions that perform almost the same thing, change them to one function that can handle all four cases.

Answer 2

When I was planning the large jQuery application that I am currently working on, I found this post by Addy Osmani very useful.

Full disclosure, though: we ended up hanging most of our application from the YUI3 kernel. All our control code is written in jQuery, but the interface data model is YUI3.