js writing specifications

References: https://github.com/airbnb/javascript

1. const is let in place of var (const / let)

　　1.1, constants defined using the const, var avoid the use of definition: This ensures that can not be reallocated, which could lead to errors and difficult to understand the code.

// bath 
was a = 1 ;
where b = 2 ;

// good
const a = 1;
const b = 2;

　　1.2, let instead of using the variable var defined: let like such blocks var scope not function scope.

// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}

　　Note: let block scope and are const

2. Object (Object)

　　2.1 to create objects using literal form

// bad
const item = new Object();

// good
const item = {};

　　2.2 abbreviations, used in the method of the object

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

　　2.3, using shorthand properties: because of the brief descriptive

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

　　2.4 :, grouped shorthand property at the beginning of the object declaration.

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2 ,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// Good 
const obj = { 
　// shorthand unified front of or behind the discharge
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2 ,
  episodeThree: 3,
  mayTheFourth: 4,
};

　　2.5, citing only attribute is invalid identifiers: easier to read, because he improved syntax highlighting functionality, and is also easy to be optimized by many JS engine.

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};

3. arrays (Arrays)

　　3.1, should try to create an array using a literal syntax (if necessary, except for special circumstances, such as: new Array (10) .fill (true))

// bad
const items = new Array();

// good
const items = [];

　　3.2, using spread ( '...') operator array copy

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

　　3.3, using spreads ( '...') operator will iteration object into an array, instead of using Array.from ([])

const foo = document.querySelectorAll('.foo');

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];

　　3.4, Array.from for converting an array of array-like objects

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrLike);

// good
const arr = Array.from(arrLike);

　　3.5, instead of using Array.from spread ... to map iterables, because it avoids creating an intermediate array.

// bad
const baz = [...foo].map(bar);

// good
const baz = Array.from(foo, bar);

　　3.6, if more than one line array, use the array before you open and close parentheses newline (because the width of the line is limited, the number of columns and the height is infinite, it is a good read code)

// bad
const arr = [
  [0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}];

const numberInArray = [
  1, 2,
];

// good
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [
  1,
  2,
];

To be continued ....

js writing specifications

Guess you like