[JavaScript知识库]2022最新前端规范

从这里开始：

一、 引用

1. 使用 const 定义你的所有引用；避免使用 var。

为什么? 这样能够确保你不能重新赋值你的引用，否则可能导致错误或者产生难以理解的代码

// bad
var a = 1;

// good
const a = 1;

2. 如果你必须重新赋值你的引用， 使用 let 代替 var。

为什么? let 是块级作用域，而不像 var 是函数作用域.

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

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

二、对象

1. 使用字面语法来创建对象

为什么？更简洁且效率更高

// bad
const item = new Object();

// good
const item = {};

2. 在对象声明的时候将简写的属性进行分组

为什么? 这样更容易的判断哪些属性使用的简写。

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

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

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

3. 只使用引号标注无效标识符的属性

为什么? 总的来说，我们认为这样更容易阅读。 它提升了语法高亮显示，并且更容易通过许多 JS 引擎优化。

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

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

4. 不能直接调用 Object.prototype 的方法，如： hasOwnProperty 、 propertyIsEnumerable 和 isPrototypeOf。

为什么?
1）
const obj = Object.create(null)
const text1 = obj.hasOwnProperty(‘a’)
const text2 = Object.prototype.hasOwnProperty.call(obj, ‘a’)
console.log(text1) // 报错
console.log(text2) // false
2）
可能导致意外行为或服务安全漏洞。例如，web 客户端解析来自远程服务器的 JSON 输入并直接在结果对象上调用 hasOwnProperty 是不安全的，因为恶意服务器可能发送一个JSON值，如 {“hasOwnProperty”: 1}，扰乱业务和安全。

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

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

// best
const has = Object.prototype.hasOwnProperty; // 在模块范围内的缓存中查找一次
// ...
console.log(has.call(object, key));

5. 更倾向于用对象扩展操作符，而不是用 Object.assign 浅拷贝一个对象。 使用对象的 rest 操作符来获得一个具有某些属性的新对象。

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // 变异的 `original` ?_?
delete copy.a; // 这....

// 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 }

三、数组

1. 使用字面语法创建数组

为什么？更简洁且效率更高

// bad
const items = new Array();

// good
const items = [];

2. 使用数组展开方法 … 来拷贝数组

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

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

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

四、解构

1. 在访问和使用对象的多个属性的时候使用对象的解构。

为什么? 解构可以避免为这些属性创建临时引用。

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

2. 使用数组解构

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

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

3. 对于多个返回值使用对象解构，而不是数组解构。

为什么? 你可以随时添加新的属性或者改变属性的顺序，而不用修改调用方。

// bad
function processInput(input) {
  // 处理代码...
  return [left, right, top, bottom];
}

// 调用者需要考虑返回数据的顺序。
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // 处理代码...
  return { left, right, top, bottom };
}

// 调用者只选择他们需要的数据。
const { left, top } = processInput(input);

五、字符

1. 使用单引号 ‘’ 定义字符串

// bad
const name = "Capt. Janeway";

// bad - 模板文字应该包含插值或换行。
const name = `Capt. Janeway`;

// good
const name = 'Capt. Janeway';

2. 当以编程模式构建字符串时，使用字符串模板代替字符串拼接

为什么? 字符串模板为您提供了一种可读的、简洁的语法，具有正确的换行和字符串插值特性。

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

3. 不要在字符串上使用 eval() ，它打开了太多漏洞
4. 永远不要定义一个参数为 arguments

为什么？因为arguments为每个函数的隐式参数

// bad
function foo(name, options, arguments) {
  // ...
}

// good
function foo(name, options, args) {
  // ...
}

5.不要使用 arguments, 选择使用 rest 语法 … 代替

为什么？… 明确了你想要拉取什么参数。 更甚, rest 参数是一个真正的数组，而不仅仅是类数组的 arguments 。

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

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

6. 使用默认的参数语法，而不是改变函数参数。

// really bad
function handleThings(opts) {
  // No! We shouldn’t mutate function arguments.
  // Double bad: if opts is falsy it'll be set to an object which may
  // be what you want but it can introduce subtle bugs.
  opts = opts || {};
  // ...
}

// still bad
function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
  // ...
}

// good
function handleThings(opts = {}) {
  // ...
}

7. 总是把默认参数放在最后。

// bad
function handleThings(opts = {}, name) {
  // ...
}

// good
function handleThings(name, opts = {}) {
  // ...
}

8. 永远不要使用函数构造器来创建一个新函数。

为什么? 以这种方式创建一个函数将对一个类似于 eval() 的字符串进行计算，这将打开漏洞。

// bad
var add = new Function('a', 'b', 'return a + b');

// still bad
var subtract = Function('a', 'b', 'return a - b');

9. 不要再赋值函数已有的参数。

为什么? 重新赋值参数会导致意外的行为，尤其是在访问 arguments 对象的时候。 它还可能导致性能优化问题，尤其是在 V8 中。

// bad
function f1(a) {
  a = 1;
  // ...
}

function f2(a) {
  if (!a) { a = 1; }
  // ...
}

// good
function f3(a) {
  const b = a || 1;
  // ...
}

function f4(a = 1) {
  // ...
}

六、循环（迭代器）

1. 你应该使用 JavaScript 的高阶函数代替 for-in 或者 for-of。

使用 map() / every() / filter() / find() / findIndex() / reduce() / some() / … 遍历数组， 和使用 Object.keys() / Object.values() / Object.entries() 迭代你的对象生成数组。
为什么? 因为它们返回纯函数。

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

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

// good
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
sum === 15;

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

// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
}

// good
const increasedByOne = [];
numbers.forEach((num) => {
  increasedByOne.push(num + 1);
});

// best (keeping it functional)
const increasedByOne = numbers.map(num => num + 1);

七、属性

1. 访问属性时，使用点符号，使用变量访问属性时，使用 [ ] 表示法。

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;

八、变量

1. 使用 const 或者 let 声明每一个变量，并把 const 声明的放在一起，把 let 声明的放在一起。

为什么？
1） 这样更容易添加新的变量声明，而且你不必担心是使用 ; 还是使用 , 或引入标点符号的差别。 你可以通过 debugger 逐步查看每个声明，而不是立即跳过所有声明。
2）这在后边如果需要根据前边的赋值变量指定一个变量时很有用。

// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

2. 不要链式变量赋值。

为什么? 链式变量赋值会创建隐式全局变量。

// bad
(function example() {
  // JavaScript 把它解释为
  // let a = ( b = ( c = 1 ) );
  // let 关键词只适用于变量 a ；变量 b 和变量 c 则变成了全局变量。
  let a = b = c = 1;
}());

console.log(a); // throws ReferenceError
console.log(b); // 1
console.log(c); // 1

// good
(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError

// 对于 `const` 也一样

九、比较运算符和等号

1. 使用 === 和 !== 而不是 == 和 !=
2. 对于布尔值使用简写，但是对于字符串和数字进行显式比较。

// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

// bad
if (name) {
  // ...
}

// good
if (name !== '') {
  // ...
}

// bad
if (collection.length) {
  // ...
}

// good
if (collection.length > 0) {
  // ...
}

3. 在 case 和 default 的子句中，如果存在声明 (例如. let, const, function, 和 class)，使用大括号来创建块 。

为什么? 语法声明在整个 switch 块中都是可见的，但是只有在赋值的时候才会被初始化，这种情况只有在 case 条件达到才会发生。 当多个 case 语句定义相同的东西是，这会导致问题问题。

// bad
switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
}

// good
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}

4. 三目表达式不应该嵌套，通常是单行表达式。太多了应该采用分离的办法。

// bad
const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;

// 分离为两个三目表达式
const maybeNull = value1 > value2 ? 'baz' : null;

// better
const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;

// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

5. 使用该混合运算符时，使用括号括起来。 唯一例外的是标准算数运算符 (+, -, *, & /) 因为他们的优先级被广泛理解。

为什么? 这能提高可读性并且表明开发人员的意图。

十、控制语句

1. 如果你的控制语句 (if, while 等) 太长或者超过了一行最大长度的限制，则可以将每个条件（或组）放入一个新的行。 逻辑运算符应该在行的开始。

为什么? 要求操作符在行的开始保持对齐并遵循类似方法衔接的模式。 这提高了可读性，并且使更复杂的逻辑更容易直观的被理解。

// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
  thing1();
}

// bad
if (foo === 123 &&
  bar === 'abc') {
  thing1();
}

// bad
if (foo === 123
  && bar === 'abc') {
  thing1();
}

// bad
if (
  foo === 123 &&
  bar === 'abc'
) {
  thing1();
}

// good
if (
  foo === 123
  && bar === 'abc'
) {
  thing1();
}

// good
if (
  (foo === 123 || bar === 'abc')
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}

十一、注释

1. 使用 /** … */ 来进行多行注释，而不是 // 。

2. 使用 // 进行单行注释。 将单行注释放在需要注释的行的上方新行。 在注释之前放一个空行，除非它在块的第一行。用一个空格开始所有的注释，使它更容易阅读。

// bad
const active = true;  //is current tab

// good
// is current tab
const active = true;

// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

// good
function getType() {
  console.log('fetching type...');

  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

// also good
function getType() {
  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

十二、类型转换和强制类型转换

1. 转换为字符串，首推String()

为什么？其他方法都有它的问题，或者会出现执行出错的可能；

let reviewScore = 9;

// bad
const totalScore = new String(reviewScore); // typeof totalScore is "object" not "string"

// bad
const totalScore = reviewScore + ''; // Symbol('123') + ‘’报错

// bad
const totalScore = reviewScore.toString(); // 值为null 或者undefined就会报错

// good
const totalScore = String(reviewScore);

2. 转为数字类型，首推Number或者parseInt指定10为基数。

const inputValue = '4';

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);

3. 如果你要用位运算且这样最好的情况下，请写下注释，说明为什么这样做和你做了什么。
4. 转换为布尔类型

const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// best
const hasAge = !!age;

十三、命名规范

1. 在命名对象、函数和实例时使用驼峰命名法（camelCase）.且避免单字母或者拼音命名。用你命名来描述功能。

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

2. 文件名应该和默认导出的名称完全匹配。也就是export/import/filename 的命名规范要相同，是PascalCase 就都是PascalCase ，是camelCase 都是camelCase 。
3. 关于缩略词和缩写，必须全部是大写或者全部是小写。

为什么? 名字是为了可读性，不是为了满足计算机算法。

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [
  // ...
];

// also good
const httpRequests = [
  // ...
];

十四、VUE相关规范

1. 组件应该命名为多个单词的，且格式为单词大写开头（PascalCase）如’TodoItem’。

2. 基础组件（也就是展示类的、无逻辑的或无状态的组件）命名应该全部以一个特定的前缀开头，比如 Base、App 或 V。

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

3. 单列组件（每个页面只用一次）命名应该以The前缀命名，以示其唯一性。

components/
|- TheHeading.vue
|- TheSidebar.vue

4. 紧密耦合的组件（父组件和子组件），其中子组件应该以父组件名作为前缀命名，
5. 组件名的单词顺序，应该以表属性名词开头，由描述性的修饰词结尾。

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

6. 在DOM模板中不能有自闭和标签的组件。

为什么呢？HTML 并不支持自闭合的自定义元素

7. DOM模板中的组件名，应该以kebab-case格式；

为什么呢？HTML是大小写不敏感的，在DOM模板中必须仍使用kebab-case。

<!-- 在 DOM 模板中 -->
<my-component></my-component>

8. Prop 的定义要详细。提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。

反例
// 这样做只有开发原型系统时可以接受
props: ['status']

9. 为你写的一般页面和组件样式设置作用域（scoped）

为什么？ 组件和布局组件中的样式可以是全局的

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` attribute -->
<style scoped>
.button-close {
  background-color: red;
}
</style>

10. 如果在函数内部中需要用到函数外部变量的值，需要把该变量以参数的方式传入函数，让外部参数以函数内部参数的身份去使用。

为什么？会使得数据逻辑脉络更清楚，更易追踪。

<button @click="onSendOut(params, info.orderId)">发 货</button>