- jQuery Filesa) Try to use Jquery CDN where possible.Implement a fallback to locally hosted jQuery file of same version in-case CDN is not working.(as above)b) DO NOT use jQuery version 2.x if you support Internet Explorer 6/7/8.
c) If you are using other libraries like Prototype, MooTools, Zepto etc. that uses `$` sign as well, try not to use `$` for calling jQuery functions and instead use `jQuery` simply or use `$.noConflict()`.
- jQuery Variablea) Better to start with `$` while naming jQuery variable so it will be easy to understand and later on manipulate.b) Always cache jQuery selectors object to a variable for reuse.c) It is recommended to use Camel Case for naming Variable.
b) Don't use the element type in your selector when using class selector. (for performance comparison click on : http://jsperf.com/jqeury-selector-test)c) Use `.find()` selector. The `.find()` approach is faster because the first selection is handled without going through the Sizzle selector engine.d) Be specific on the right-hand side of your selector, and less specific on the left.e) Avoid Excessive Specificity. (for performance comparison click on : http://jsperf.com/avoid-excessive-specificity)f) Give your Selectors a Context.g) Avoid Universal Selectors. More Infoh) Avoid Implied Universal Selectors. When you leave off the selector, the universal selector (*) is still implied.i) Don’t Descend Multiple IDs or nest when selecting an ID. ID-only selections are handled using document.getElementById() so don't mix them with other selectors.
- DOM Manipulationa) Always detach any existing element before manipulation and attach it back after manipulating it. This is reduce the Reflow and Repaint of browser and increase performance drastically or use `documentfragment`.b) Use string concatenation or `array.join()` over `.append()`. (for performance comparison click on : http://jsperf.com/jquery-append-vs-string-concat)c) Make sure you check for the element in DOM before manipulating it if you are not sure about that element.
- Eventsa) Use only one `document.ready` handler per page. It makes it easier to debug and keep track of the behavior flow.b) DO NOT use anonymous functions to attach events. Anonymous functions are difficult to debug, maintain, test, or reuse.
a) DO NOT use http requests on https sites. Prefer schemaless URLs (leave the protocol http/https out of your URL)
b) DO NOT put request parameters in the URL, send them using data object setting.
c) Try to specify the dataType setting so it's easier to know what kind of data you are working with.
d) Use Delegated event handlers for attaching events to content loaded using Ajax. Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time (example Ajax).e) Use Promise interface:
Sample Ajax Template:
- Effects and Animations
a) Adopt a restrained and consistent approach to implementing animation functionality.
b) DO NOT over-do the animation effects until driven by the UX requirements.
c) Try to use simple `show/hide`, `toggle and slideUp/slideDown` functionality to toggle elements.
d) Try to use predefined animations durations of "slow", "fast" or 400 (for medium).
a) Always choose a plugin with good support, documentation, testing and community support.
b) Check the compatibility of plugin with the version of jQuery that you are using.
c) Any common reusable component should be implemented as a jQuery plugin. link to http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ jQuery Plugin Boilerplate code.
a) Use chaining as an alternative to variable caching and multiple selector calls.b) Whenever the chain grows over 3 links or gets complicated because of event assignment, use appropriate line breaks and indentation to make the code readable.For long chains it is acceptable to cache intermediate objects in a variable.
jQuery Performance: http://learn.jquery.com/performance/
jQuery Learn: http://learn.jquery.com
jQuery API Docs: http://api.jquery.com/
jQuery Coding Standards and Best Practice: http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/
jQuery Cheatsheet: http://lab.abhinayrathore.com/jquery-cheatsheet/
jQuery Plugin Boilerplate: http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/Stackoverflow question: http://stackoverflow.com/questions/tagged/jquery