What are jQuery's most important challenges, and what as a developer can I do about them?

Question

I have a project coming up to build an interface which allows a user to construct content with pre-defined templates and code snippets.

We've already decided to use the jQuery and jQuery UI frameworks to help us with the dragging/dropping/sorting parts. There also needs to be some edit-in-place, and I'm going to use contenteditable combined with jQuery's CSS functions.

I already have quite a bit of experience with both frameworks (and love them), but my typical project so far has run to about 50 lines whereas this one will run to a lot more than that, using more of the functions and writing my own plugins.

Before I start work on the project I'm wondering if there are any common pitfalls with jQuery - kind of like 'jQuery - the Bad Parts'. Are there functions that are just best avoided? Are there functions which need working around?

I read this link but it's now 2 years old and a lot has changed in jQuery (and browsers) since then.

_{Any 'Use this framework instead' or 'Don't use a framework' answers will be ignored - I have to use jQuery. Any 'jQuery is rubbish' rants that don't provide solutions will also be ignored. Constructive comments only please. If I knew how to do better in JavaScript what jQuery does, I wouldn't be using jQuery.}

Answer 1

I'll answer half of your question. Here's a laundry list of pitfalls based on painful experience, not all of which I have solutions to.

• The temptation to make heavy use of long chains of selectors ("ul#leftnav li p a.current ") makes your code brittle. It may FEEL clever ("Hey, I'm teh CSS master!"), but it breaks easily when layout changes in any non-trivial way.
• Using the DOM as the database. It seems like a neat idea to use .data() to attach data to your DOM elements, to track your page state, and to link DOM elements together, but if you go overboard, you start to lose track of what's where.
• Putting way too much stuff in $(document).ready(). Once again, it's natural to initialize all your events and data here, but you soon run into organizational and ordering problems. Look into MVC-like solutions to keep things organized.
• Not quite cross-browser. Test in all targeted browsers early and often! jQuery, although a wonderful abstraction, is still a leaky one. Events and attributes don't always behave exactly the same in different JS engines.