##Indentation
4 spaces for indent
##"Classes" and Variable names
For "classes" and constructors, use UpperCaseClassNames
.
var Animal = function() {};
For variables, use lowerCamelCase
var appOutput = "hello world";
Use parentheses when using the new
keyword
new Animal();
Variables that should return a boolean
value should be prefixed
var isAwesome = true;
var hasPotatoes = false;
##Language Quirks
Always use curly braces for if
statements
if (isJavaScript) {
// do stuff
}
Always use ===
and !==
. If types need to be coerced, do so explicitly.
##Style
###Globals and namespacing Stop leaking into the global namespace: use the module pattern http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
(function(){
var useModulePattern = "http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth";
})();
##Whitespace Use whitespace liberally
Use empty lines between functions and between the return Spaces between operators
Use spaces between the statement, opening parens, and opening brace. Don't cram them together.
Good:
function example() {
var thisFunction = "this function";
var canBe = "can be";
var reallyLong = "really long"
return thisFunction + canBe + reallyLong;
}
if (what) {
// breather
}
Bad:
function aBadExample() {
var thisFunction="this function";
var canBe="can be";
var reallyLong="really long";
var andUnreadable="and unreadable";
return thisFunction&&canBe&&reallyLong&&andUnreadable?thisFunction+canBe+reallyLong+andUnreadable:'';
}
if(what){
//y u no spaces?
}
####Braces
Opening braces should be on the same line, else
should be on the closing braces of the if
if (condition) {
console.log('we have a condition');
}
if (condition) {
console.log('hi');
} else {
console.log('bye');
}
##Random Stuff
Limit lines to 80 characters
don't use href="javascript:methodCall()" (why are you using globals anyway?)
don't declare your variables all over the place, put them at the top to be clearer
cache array lengths for use in loops
Bad:
for(var i=0; i< myArray.length;i++){
/*do stuff*/
}
Good:
var len = myArray.length;
for (var i = 0; i < len; i++) {
}
/*cached inside loop*/
for (var i = 0, len = myArray.length; i < len; i++) {
}
/*cached outside loop using while*/
var len = myArray.length;
while (len--) {
}
##Require.js stuff
###Filenames
modules that can be called with the new
keyword can be considered
"classes". Filenames should be UpperCamelCase if they are "classes"
/app/models/Animal.js
This allows for consistency in the consumption of these modules
// filename `Animal` is the same as the function parameter `Animal`
define(['backbone', 'models/Animal'], function (Backbone, Animal) {
var AnimalCollection = Backbone.Collection.extend({
model: Animal
});
return AnimalCollection;
});
###Module Naming
Set the module's name
as a variable up top to be returned for clarity,
rather than returning immediately
// `Animal` module, at the path /app/models/Animal.js
define(['backbone'],function(Backbone) {
// set the module to be returned as `Animal`
// the name of the module
var Animal = Backbone.Model.extend({
initialize: function() {
//
}
});
// return the `Animal` module
return Animal;
});
##Useful Tools http://jshint.com/
##Examples of Style Guides: http://docs.jquery.com/JQuery_Core_Style_Guidelines
http://guides.sproutcore.com/style_guide.html
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml