Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Joomla JS Styleguide
// We hesitate to use the words 'good' or 'bad', since this is a contributor's guide for our code base and not a critique of techniques. We've replaced them with:
// No (as in, not our way) and Yes (this is what we expect from contributions)
/* Reserved Words */
// Do not use reserved words for anything other than the language intended use. A list of these words can be found at: http://es5.github.io/#x7.6.1
/* Variables */
// Avoid Global Variables
// No.
foo = 'bar';
// or
// No: implied global
function() {
foo = 'bar';
}
// Yes
var foo = 'bar';
// Multiple Variable Declarations
// Use one var declaration and separate each variable on a newline ending with a comma
// No.
var foo = 'bar';
var bar = 'baz';
var baz = 'qux';
// Yes.
var foo = 'bar',
bar = 'baz',
baz = 'qux';
/* Primitive Types */
// String
// Number
// Use parseInt() or parseFloat() instead of unary plus, for readability
// Boolean
// Type Checks
// String: typeof object === 'string'
// Number: typeof object === 'number'
// Boolean: typeof object === 'boolean'
// Object: typeof object === 'object'
// Plain Object: jQuery.isPlainObject( object )
// Function: jQuery.isFunction( object )
// Array: jQuery.isArray( object )
// Element: object.nodeType
// null: object === null
// null or undefined: object == null
// undefined:
// Global Variables: typeof variable === 'undefined'
// Local Variables: variable === undefined
// Properties: object.prop === undefined
/* Objects */
// Use the literal, not constructor, syntax.
// No.
var myObj = new Object();
// Yes.
var myObj = {};
Arrays
Use the literal, not constructor, syntax
// No.
var myArr = new Array();
// Yes.
var myArr = [];
// If you don't know array length use push method. This will replace the current array.
var myArr = [];
myArr.push('foo');
/* Functions */
// Properties
// Hoisting
// Chaining Method Calls
/* Blocks & Multi-line Statements */
// Use curly braces on blocks that have more than one statement.
// Block with one statement
if ( test ) return false;
// Block with more than one statement
if ( test ) {
var foo = 'some string';
return foo;
}
/* Conditional Expressions */
// Use ternary operator?
//Cache length in variable for performance.
var i,
j = myArr.length;
for ( i = 0; i < j; i++ ) {
// statements
}
//Switch Statements
//Equality
/* Events */
// Spacing
// *Don't mix tabs and spaces.
// *Indentation — use Joomla's standard
// *No whitespace at the end of line or on blank lines.
// *if/else/for/while/try always have braces and always go on multiple lines.
// *Unary special-character operators (e.g., !, ++) must not have space next to their operand.
// *Any , and ; must not have preceding space.
// *Any ; used as a statement terminator must be at the end of the line.
// *Any : after a property name in an object definition must not have preceding space.
// *The ? and : in a ternary conditional must have space on both sides.
// *No filler spaces in empty constructs (e.g., {}, [], fn())
// *New line at the end of each file.
array = [ 'foo', 'bar' ];
foo( arg );
foo( 'string', object );
if ( true ) {
// statements
} else {
// statements
}
while ( condition ) {
// statements
}
for ( prop in object ) {
// statements
}
// The exceptions
// first or only argument is an object, array or callback function
// No space before the first argument
foo({
a: 'bar',
b: 'baz'
});
foo(function() {
// statements
}, options ); // space after options argument
// Function with a callback, object, or array as the last argument:
// No space after the last argument
foo( data, function() {
// statements
}); // space before data argument
/* Naming Conventions */
/* Commas */
// Arrays
// Do not include a trailing comma, this will add 1 to your array's length.
// No.
array = [ 'foo', 'bar', ];
// Yes.
array = [ 'foo', 'bar' ];
/* Semicolons */
// Use them where expected.
// Semicolons should be included at the end of function expressions, but not at the end of function declarations.
// Function Expression
var foo = function() {
return true;
};
// Function Declaration
function foo() {
return true;
}
/* Quotes */
// Strings
// Use single quotes '' for strings
var foo = 'bar';
/* Comments */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.