JavaScript Style and jQuery Best Practices
Table of Contents
- 1. Symbols
- 2. Documentation
- 3. Framework (jQuery)
- 4. Files
- 5. Naming conventions
- 6. Grammar
- 7. Operators
- 8. Objects
- 8.1. Variable Declarations  crockford
- 8.2. Function Declarations  crockford rashbrook
- 8.3. Names  crockford
- 8.4. Statements  crockford
- 8.5. Don't pollute the global namespace
- 8.6. Newlines follow anonymous functions with jQuery  style
- 8.7. jQuery variables  style
- 8.8. Disallow
= and ! jslint - 8.9. Cache function pointers  performance
- 8.10. Avoid Using the ‘with’ Keyword  style
- 9. Related
1. Symbols
1.2. Required blocks
http://jslint.com/lint.html This is a jslint recommendation to enclose
4. Files
4.4. Load scripts late  files crockford performance
Late in the body as possible
6. Grammar
6.1. Indentation: 4 spaces  style crockford
Crockford's published code conventions (crockford.com/code.html) state indentation increases by 4 spaces after an opening brace/bracket/paren.
Audit: untabify.
6.2. Line Length: 80 characters  style crockford
Crockford's current published code conventions (crockford.com/code.html) do not state a maximum line length; the 2013 version of the guide could not be checked (archive.org unreachable from this tool).
6.5. Required blocks: true  jslint
if (condition) { statements; }
8. Objects
8.2. Function Declarations  crockford rashbrook
rashbrook: Name inline functions This might not be a best practice, doesn't appear to be used: observe: function offlineObserve(aSubject, aTopic, aState)
8.3. Names  crockford
Disallow leading _ in identifiers
8.5. Don't pollute the global namespace
Play well with others (Namespacing, scope and patterns) in http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
recommends:
Use the var keyword. Any variable created without the var keyword is created at the global scope and is never eligible for garbage collection, presenting the opportunity for a memory leak.
Use a global array, global object, or namespace prefix. If you need global variables, use a global object that contains all of the global variables, like this
8.6. Newlines follow anonymous functions with jQuery  style
Split any method calls that invoke anonymous foundtions. This should be done to reduce the amount of extra whitespace but makes the scripts longer
8.7. jQuery variables  style
"$" does not violate ECMA-262 -- it is an explicitly valid identifier-start character in the ECMAScript grammar, as proven by jQuery's own global being named "$". The "$" prefix convention is widely used in practice (e.g. jQuery's own contributor style guide), not disallowed by the language spec.
If a jQuery object is returned should a "$" prefix be used?
http://dotnetslackers.com/articles/ajax/JQuery-Primer-Part-1.aspx
This is commonly used in practice; the claim that it violates ECMA 262 is incorrect – "\(" is an explicitly valid identifier character, as jQuery's own global "\)" demonstrates.
8.8. Disallow = and !  jslint
Confirmed against JSLint's own documentation (jslint.com/help.html): "== is not allowed. This avoids the false positives, and increases the visual distance between = and ===."
8.9. Cache function pointers  performance
For iterating through DOM elements initialize the variable:
styles = getElementsByClassName("script); for (var i = 0; i < styles.length; i++) { console.log(styles[i]); }
9. Related
- JavaScript Global Execution Context Pollution – the globals the style rules guard against
- JavaScript Security – where sloppy style becomes a hole