StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLearning jQuery + best practices in 24 hours
text
Body
copied!<p>This may sound impossible but read on. </p> <p>I need to learn jQuery a little bit to keep current and be able to convince an employer I can cope with it within less than 2 days. </p> <p>Now, I should mention that I actually know <code>javascript</code>. This is a bit ambiguous kind of a statement but--whereas I am no Doug Crockford--I certainly I don't mean I can just about toggle an element's visibility using inline code. I would go so far as to say that I am <em>VERY</em> familiar with <a href="http://mootools.net" rel="nofollow noreferrer">MooTools</a>, have read its source code on and off for the last 3 years as well that of countless MooTools plugins. </p> <p>Now, through helping out on SO the <a href="https://stackoverflow.com/questions/tagged/mootools">MooTools tag</a>, I have inadvertently picked up a lot of jQuery code as well. And there's the API doc page, that's fair enough--as long as I want to work with DOM, AJAX, events etc, I can find my way. This is not what the post is about.</p> <p>I am after very specific resources and guides / examples of well-organised and well written code for jQuery. For instance, things I am interested in (but not limited to):</p> <ul> <li>peculiarities to do with the API, eg. .bind != ECMA bind</li> <li>limitations, like element attributes (.attr?) + workarounds for properties and other pitfalls</li> <li>selector performance (if Sizzle differs from Slick) and...</li> <li>...caching selectors - does it work, how etc as jQuery returns itself. </li> <li>best practices on readability and writing easy to follow and understand spaghetti code</li> <li>best practices on writing plugins - how to structure, are there any common/accepted/preferred nomenclatures and so forth, i.e. the jQuery equivalent of <a href="http://ryanflorence.com/11-tips-for-creating-great-mootools-plugins/" rel="nofollow noreferrer">this mootools guide</a></li> <li>is there any better way to handle inheritance in the classic OOP sense? I know of <a href="http://moo4q.com" rel="nofollow noreferrer">moo4q</a> but let's assume I want to do this w/o the help of mootools for a moment. And yes, I know I can still use pure javascript for basic stuff.</li> <li>are there any specific differences in API (aside from ++ changelog) I need to be aware of between different jQuery versions?</li> <li>GC. do you do any, do you remove events, nodes etc?</li> <li>bits to avoid. eg, I have seen ppl complain on twitter that element storage is slow. </li> <li>advice on structuring a proper 'enterprise-level-or-near-enough' jQuery-based _application__ (I know, I know - Dojo, ExtJS, or even MooTools but it's possible with jQuery, right? so many people swear by it and claim to have done it...)</li> <li><em>whatever <strong>you</strong> think I need to read to get started</em></li> </ul> <p>With that in mind, I would like just links to either tutorials or articles or even posts here on SO that can cover on the areas mentioned and <strong>advanced jQuery development</strong>.</p> <p>Some <em>select</em> plugins that are written by respected / renowned authors will also be appreciated, particularly ones that differ in how they are organised and easy to extend. With so so many to choose from, the majority are probably little past the <code>hello spaghetti world</code> phase so I wouldn't want to use them as the examples upon which to base my own work. I am not after plugins that are upvoted by designers as they do a pretty effect, I want examples of pretty code. </p> <p>That's about it. Any help appreciated - will start reading on Sunday and need to be able to write an extendible plugin like this modal / lightbox class for mootools that I wrote in 2-3 hours a few days ago. I'd like to convert it to jQuery as an exercise w/o making it less modular / extendible: <a href="http://jsfiddle.net/dimitar/6creP/" rel="nofollow noreferrer">http://jsfiddle.net/dimitar/6creP/</a></p> <p>Thanks in advance, will try to answer everyone that replies as well </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload