JavaScript / jQuery Style Guide
, : , , . ( , ) . , . , .
l .
l .
l 80 , 100 ( 4 ).
l , 2, , , , .
l if / else / for / while / try .
l ( ..!, ++) .
l, ; .
l; .
l: .
l ? : .
l ( .., {}, [], fn())
l .
l
for (i = 0; i < length; i++) {
// Bad
if (condition) doSomething();
while (!condition) iterating++;
for (var i=0;i<100 data-blogger-escaped-array="" data-blogger-escaped-code="" data-blogger-escaped-i="" data-blogger-escaped-object="" data-blogger-escaped-somefn="">
var i = 0;
if (condition) {
doSomething();
} else if (otherCondition) {
somethingElse();
} else {
otherThing();
}
while (!condition) {
iterating++;
}
for (; i < 100; i++) {
object[ array[ i ] ] = someFn(i);
}
try {
// Expressions
} catch (e) {
// Expressions
}
. ASI (Automatic SemicolonInsertion).
, . .
// :
// We need an explicit "bar", because later in the code foo is checked.
var foo = "bar";
// :
/*
Four score and sevenpauseminutes ago...
*/
// :
function foo (types, selector, data, fn, /* INTERNAL */ one) {
|
|
|
// Do stuff
}
API . API .
:
var double = "I am wrapped in double quotes";
html , :
var html = "<div id='my-id'></div>";
:
function thisIsBlock () {
, , .
. , .
// Bad
var foo = true;
var bar = false;
var a;
var b;
var c;
// Good
var a, b, c,
foo = true,
bar = false;
.
, , .
(camelCase), . . , , i. .
, :
var foo = "";
var fooName = "";
, :
// Bad
var html = "The sum of " + a + " and " + b + " plus " + c
+ " is " + (a + b + c);
// Good
var html = "The sum of " + a + " and " + b + " plus " + c +
" is " + (a + b + c);
, . :
var firstCondition(foo) && secondCondition(bar)?
doStuff(foo, bar):
doOtherStuff(foo, bar);
, :
if (fistCondition() && secondCondition() &&
thirdCondition()) {
doStuff();
}
:
array = [ "*" ];
array = [ a, b ];
foo(arg);
foo("string", object);
foo(options, object[ property ]);
foo(node, "property", 2);
// Function with a callback, object, or array as the sole argument:
// No space on either side of the argument
foo({
a: "alpha",
b: "beta"
});
// Function with a callback, object, or array as the first argument:
// No space before the first argument
foo(function () {
// Do stuff
}, options);
// Function with a callback, object, or array as the last argument:
// No space after after the last argument
foo(data, function () {
// Do stuff
});
, . - :
|
|
|
elements
.addClass("foo")
.children()
.html("hello")
.end()
.appendTo("body");
, ( ). , . , :
// Bad
var map = { ready: 9,
when: 4, "you are": 15 };
// Good
var map = { ready: 9, when: 4, "you are": 15 };
// Good as well
var map = {
ready: 9,
when: 4,
"you are": 15
};
JSHint
JSHint , . . . . .jshintrc , . , JSHint , .
{
"camelcase": true,
"indent": 2,
"undef": true,
"quotmark": "single",
"maxlen": 80,
"trailing": true,
"curly": true
}
, :
/* jshint browser:true, jquery:true */
JS , :
"use strict";
JSHint JavaScript , , .
DOM Node
.nodeName .tagName.
.nodeType node (.nodeName).
(===) (==). undefined null.
// Check for both undefined and null values, for some important reason.
undefOrNull == null;
lString: typeof object === "string"
lNumber: typeof object === "number"
lBoolean: typeof object === "boolean"
lObject: typeof object === "object"
lPlain Object: jQuery.isPlainObject(object)
lFunction: jQuery.isFunction(object)
lArray: jQuery.isArray(object)
lElement: object.nodeType
lnull: object === null
lnull undefined: object == null
lundefined:
m : typeof variable === "undefined"
m : variable === undefined
m: object.prop === undefined
