Daily js development specifications

In this article, we will talk about the daily development specifications of JavaScript, so that the js code written by everyone in the daily development of JavaScript in the future will be more standardized. Interested students can take a look at this article! Daily development standards are still very important!

The front-end dependency has been written on several projects. When using JavaScript to write interactive logic, more or less some junk code was written, such as global variable pollution, poor code reusability, and simplicity. Not advanced directly causes some confusion for the later maintenance of the code. Below are some areas that need to be improved in JS coding, which can be directly applied in development and committed to writing more elegant code.

Speaking of code specifications, we may think of ESLint rules. The following specifications have related explanations related to ESLint rules. Maybe you can get some help from relevant error prompts when you use ESLint. .

1. Variable declaration

1.1 Do not use var to declare variables, try to use const

eslint: prefer-const, no-const -assign

Avoiding the use of var can reduce global variable pollution problems, and using const ensures that the declared variable is unique and cannot be reassigned.

//bad
var a = 1;
//best
const a = 1;

1.2 If you need to declare a mutable reference, use let instead of var

eslint: no-var jscs: disallowVar

let belongs to a block-level scope in the current {}, and var belongs to the function scope

//bad
var count = 1;
if (true) {
	var count = 2;
}
console.log(count)


//best
let count = 1;
if (true) {
	let count = 2;
}
console.log(count)

1.3 Group the declared let and const

Can improve code readability.

//bad
let a = 1;
const obj = {};
let num = 0;
const page = 10;

//best
let a = 1;
let num = 0;
const obj = {};
const page = 10;

1.4 Place the variables declared by let and const in the appropriate location

Because let and const are given a type of property called [Temporal Dead Zones, TDZ )] concept also determines that the variables they declare will not be subject to variable promotion. Variables declared with var will be promoted to the top of the scope.

2. Use objects

2.1 Use literals

Create objects

##eslint: no-new-object

//bad
const obj = new Object();

//good
const obj = {};

2.2 The method of the object is in the abbreviated form

// 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 The properties of the object are also in the abbreviated form

eslint: object-shorthand jscs: requireEnhancedObjectLiterals

const hello = "你好";

//bad
const obj = {
	hello:hello
};

//best
const obj = {
	hello,
};

2.4 Do not use Object.prototype methods directly, such as: hasOwnProperty, propertyIsEnumerable, isPrototypeOf, etc.

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
const has = require('has');
…
console.log(has.call(object, key));

2.5 It is best to use shallow copies of objects... instead of Object.assign()

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original`
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

Using Object.assign() will cause some unexpected problems.

3. Using arrays

3.1 Use literals to create arrays

eslint: no-array-constructor

// bad
const arr= new Array();

// good
const arr= [];

3.2 Use the spread operator... Copy array

// bad
const arr= new Array();

// good
const arr= [];

// bad
const len = arr.length;
const arrCopy = [];
let i;

for (i = 0; i < len; i++) {
  arrCopy[i] = arr[i];
}

// good
const arrCopy = [...arr];

3.3 Use Array.from to convert a class array into an array

const list = document.getElementsByTagName("li");
const liNodes = Array.from(list);

4. Function

4.1 Use function declaration instead of

function expression

Why? Because the function declared by the function will be recognized first and the variable will be hoisted (hoisted), while the function expression will only hoist the reference variable name of the function (i.e. variable hoisting).

// bad
  const fn= function () {
  };

  // good
  function fn() {
  }

4.2 Do not declare a function in a non-function code block (if, else, while, etc.), but assign that function to a variable. Even though the former will not report an error, the browser's parsing method is different.

// bad
if (ifLogin) {
  function test() {
    console.log(' logged');
  }
}

// good
let test;
if (ifLogin) {
  test = () => {
    console.log(' logged');
  };
}

4.3 Avoid using arguments, but use rest syntax... Replacement

The reason is that arguments is a class array, there are no array-specific methods, and... can be clear The parameters you pass in are real arrays.

// bad
  function myconcat() {
    const args = Array.prototype.slice.call(arguments);
    return args.join('');
  }

  // good
  function myconcat(...args) {
    return args.join('');
  }

5. Arrow function

5.1 When you must use a function expression (or need to pass an anonymous function), you can use an arrow function instead.

The reason is that using a new function will create a new function scope, which will change the current point of this, and the arrow function will create a new this execution environment, which can continue to pass the this of the current environment. Go on; and the writing method is also more concise.

When your function is more complex, it is easy to cause problems when using arrow functions. You can use function declarations instead.

// bad
  [1, 3, 5].map(function (x) {
    return x * x;
  });

  // good
  [1, 3, 5].map((x) => {
    return x * x;
  });

5.2

If a function fits on one line and has only one parameter, omit the curly braces, parentheses, and return. If not, then don't omit it.

 // good
  [1, 2, 3].map(x => x * x);

  // good
  [1, 2, 3].reduce((total, n) => {
    return total + n;
  }, 0);

6. Constructor

6.1 Always use class to avoid directly operating the prototype attribute

This way it is more concise to write.

// bad
  function Queue(contents = []) {
    this._queue = [...contents];
  }
  Queue.prototype.pop = function() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }


  // good
  class Queue {
    constructor(contents = []) {
      this._queue = [...contents];
    }
    pop() {
      const value = this._queue[0];
      this._queue.splice(0, 1);
      return value;
    }
  }

7. Module development

7.1 Use the idea of ​​modules to write business.

Using modules to write logical business can make your code more integrated and scalable. Similar libraries include seaJS and requireJS

7.2少使用通配符import

这样更能够确保你只有一个模块被你import，而那些不必要的模块不会被import，减少代码体积。

  // bad
  import * as webUI from './WEB';

  // good
  import webUI from './WEB';

8.使用高阶函数如map()和reduce()代替for~of

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

  // bad
  let sum = 0;
  for (let num of arr) {
    sum += num;
  }

  sum === 15;

  // good
  let sum = 0;
  arr.forEach((num) => sum += num);
  sum === 15;

  // best (use the functional force)
  const sum = arr.reduce((total, num) => total + num, 0);
  sum === 15;

9.比较运算符

9.1优先使用===和！==而不是==和！=

===和！==不会进行强制类型转换，后者则会

9.2在做if条件判断时强制类型转换规则

• 对象都会被转为true

• null、undefined、NaN被转为false

• 布尔值转为对应的布尔值

• 数字中+0 -0 0都被计算为false，否则为true

• 字符串   如果是“”空字符串，被计算为fasle，否则为true

相关推荐：

Web 前端代码规范

JavaScript代码规范和性能整理

HTML(5) 代码规范

The above is the detailed content of Daily js development specifications. For more information, please follow other related articles on the PHP Chinese website!