Modern JavaScript development programming style Idiomatic.js guide Chinese version_javascript skills

// 2.A.1.1
// Examples of crapped syntax

if(condition) doSomething();

while(condition) iterating ;

for(var i=0;i<100;i ) someIterativeFn();

// 2.A.1.1
// Use spaces to improve readability

if ( condition ) {
// Statement
}

while ( condition ) {
// Statement
}

for ( var i = 0; i < 100; i ) {
// Statement
}

// Better approach:

var i,
length = 100;

for ( i = 0; i < length; i ) {
// statement
}

// Or...

var i = 0,
length = 100;

for ( ; i < length; i ) {
// statement
}

var prop;

for ( prop in object ) {
// Statement
}

if ( true ) {
// Statement
} else {
// Statement
}

//Literal identifier:
var array = [],
object = {};

// 2.B.1.2
// Using only one `var` within a scope (function) helps improve readability
// and keeps your declaration list organized (Also saves you a few keystrokes)

// Bad
var foo = "";
var bar = "";
var qux;

// OK
var foo = "",
bar = "",
quux;

// Or..
var // Comments on these variables
foo = "",
bar = "",
quux;

// 2.B.1.3
// `var` statements must always be at the top of their respective scopes (functions)
// Also works with constants from ECMAScript 6

// Bad
function foo() {

// There is a statement before the variable

var bar = "",
qux;
}

// OK
function foo() {
var bar = "",
qux;

// All statements are after variables
}
// 2.B.2.1
// Named function declaration
function foo( arg1, argN ) {

}

// Usage
foo( arg1, argN );

// 2.B.2.2
// Named function declaration
function square( number) {
return number * number;
}

// How to use
square( 10 );

// Very unnatural continuation passing style
function square( number, callback) {
callback( number * number );
}

square( 10, function( square ) {
// callback content
});

// 2.B.2.3
// Function expression
var square = function( number) {
// Return valuable and relevant content
return number * number;
};

// Function expression with identifier
// This preferred form has additional functionality that allows it to call itself
// and has the identifier on the stack
var factorial = function factorial ( number ) {
if ( number < 2 ) {
return 1;
}

return number * factorial( number-1 );
};

// 2.B.2.4
// Constructor declaration
function FooBar( options) {

this.options = options;
}

// Usage
var fooBar = new FooBar({ a: "alpha" });

fooBar.options;
// { a: "alpha" }

// The function accepts `array` as parameter, no spaces
foo([ "alpha", "beta" ]);

// 2.C.1.2
// The function accepts `object` as a parameter, no spaces
foo({
a: "alpha",
b: "beta"
});

// The function accepts `string` literal as parameter, no spaces
foo("bar");

//There are no spaces inside the parentheses used for grouping
if ( !("foo" in obj) ) {

}

if (condition) {
// Statement
}

while (condition) {
// Statement
}

for (var i = 0; i < 100; i ) {
// Statement
}

if (true) {
// Statement
} else {
// Statement
}

// 3.B.1.1

// `foo` has been assigned the value `0` and the type is `number`
var foo = 0;

// typeof foo;
// "number"
...

// In subsequent code, you need to update `foo` to give the new value obtained in the input element

foo = document.getElementById("foo-input").value;

// If you now test `typeof foo`, the result will be `string`
// This means that your if statement to detect `foo` has logic similar to this:

if ( foo === 1 ) {

importantTask();

}

// `importantTask()` will never be executed even if `foo` has a value "1"

// 3.B.1.2

// You can cleverly use the / - unary operator to cast the type to solve the problem:

foo = document.getElementById("foo-input").value;
// ^ The unary operator converts the operand on its right side into `number`

// typeof foo;
// "number"

if ( foo === 1 ) {

importantTask();

}

// `importantTask()` will be called

var number = 1,
string = "1",
bool = false;

number;
// 1

number "";
// "1"

string;
// "1"

string;
// 1

string ;
// 1

string;
// 2

bool;
// false

bool;
// 0

bool "";
// "false"
// 3.B.2.2

var number = 1,
string = "1",
bool = true;

string === number;
// false

string === number "";
// true

string === number;
// true

bool === number;
// false

bool === number;
// true

bool === string;
// false

bool === !!string;
// true
// 3.B.2.3

var array = [ "a", "b", "c" ];

!!~array.indexOf("a");
// true

!!~array.indexOf("b");
// true

!!~array.indexOf("c");
// true

!!~array.indexOf("d");
// false

// It is worth noting that the above are "unnecessarily clever"
// Use a clear solution to compare the returned values ​​​​
// Such as indexOf:

if ( array.indexOf( "a" ) >= 0 ) {
// ...
}
// 3.B.2.3

var num = 2.5;

parseInt( num, 10 );

// Equivalent to...

~~num;

num >> 0;

num >>> 0;

//The result is always 2

// Always keep in mind that negative values ​​will be treated differently...

var neg = -2.5;

parseInt( neg, 10 );

// Equivalent to...

~~neg;

neg >> 0;

// The result is always -2
// But...

neg >>> 0;

//The result is 4294967294

// ...To determine authenticity, please use this:
if (array.length) ...

// 4.1.2
// When just judging whether an array is empty, use this instead:
if (array.length === 0) ...

// ...To determine authenticity, please use this:
if ( !array.length ) ...

// 4.1.3
// When just judging whether a string is empty, use this instead:
if ( string !== "" ) ...

// ...To determine authenticity, please use this:
if ( string ) ...

// 4.1.4
// When just judging whether a string is empty, use this instead:
if ( string === "" ) ...

// ...To determine authenticity, please use this:
if ( !string ) ...

// 4.1.5
// When just judging whether a reference is true, use this instead:
if ( foo === true ) ...

// ... judge just as you think and enjoy the benefits of built-in functions:
if ( foo ) ...

// 4.1.6
// When just judging whether a reference is false, use this instead:
if ( foo === false ) ...

// ...convert it to true using an exclamation mark
if ( !foo ) ...

// ...It should be noted that: this will match 0, "", null, undefined, NaN
// If you _must_ be false of Boolean type, please use it like this:
if ( foo === false ) ...

// 4.1.7
// If you want to calculate a reference, it may be null or undefined, but it is not false, "" or 0,
// Instead of using this:
if ( foo === null || foo === undefined ) ...

// ...enjoy the benefits of == type casting, like this:
if ( foo == null ) ...

// Remember, using == will make `null` match `null` and `undefined`
// but not `false`, "" or 0
null == undefined

// `===` first, `==` second (unless loosely typed comparison is required)

// `===` never does type conversion, which means:

"1" === 1;
// false

// `==` will convert the type, which means:

"1" == 1;
// true

// 4.2.2
// Boolean, True & False

// Boolean:
true, false

// True:
"foo", 1

// Pseudo:
"", 0, null, undefined, NaN, void 0

(function( global ) {
var Module = (function() {

var data = "secret";

return {
// This is a boolean value
bool: true,
bool: true,
// A string
string: "a string",
// An array
array: [ 1, 2, 3, 4 ],
// An object
object: {
lang: "en-Us"
},
getData: function() {
                                                                                                   . data = value );
}
};
})();

// Some others will appear here

// Turn your module into a global object

// 5.2.1

function Ctor( foo ) {

this.foo = foo;

return this;

return this.foo;
};

Ctor.prototype.setFoo = function( val ) {
return ( this.foo = val );
};

// Instead of using `new` to call the constructor, you might do this:
var ctor = function( foo ) {
return new Ctor( foo );

// Turn our constructor into a global object
global.ctor = ctor;

6. Naming

A. You are not a human compiler/compressor, so try to become one.

The following code is an example of extremely bad naming: