Airbnb JavaScript编程规范

最新推荐文章于 2024-05-25 09:43:00 发布

skybiut

最新推荐文章于 2024-05-25 09:43:00 发布

阅读量412

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/skybiut/article/details/96324546

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Airbnb JavaScript编程规范

摘出最常使用以及最容易出现的错误?，做一点点ECMAScript 6 编码总结，正如该规范所说，为了用更合理的方式写 JavaScript。

1、所有不变动引用使用const，确保无法对引用重新赋值，也不会导致重复引用会导致bug和代码难以理解。若一定需要对参数重新赋值，使用块级作用域let。

2、使用字面值创建数组、对象、函数；切记不要使用函数构造器创建函数，会打开漏洞。

 e.g
  const item = {};
  const items = [];
  const y = function a() {};

3、使用对象方法简写。

e.g
// bad
const atom = {
  value: 1,
  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,
  // 对象的方法
  addValue(value) {
    return atom.value + value;
  },
};

4、使用同义词替换需要使用的保留字，避免产生冲突。

5、使用对象属性值的简写，并把所有简写的属性分组放在声明前半部分。

e.g.
  const lukeSkywalker = 'Luke Skywalker';
// bad
  const obj = {
    lukeSkywalker: lukeSkywalker,
  };
// good
  const obj = {
    lukeSkywalker,
  };

6、只对无效的标示使用引号’’，增加代码易读性并更容易被JS引擎压缩。

e.g 
  const test = {
    a: 12,
    'a-zh': 13,
  };

7、数组或对象浅拷贝时推荐使用扩展运算符[…]，获取对象指定的属性时，也推荐使用解构赋值运算符[…]。

e.g.
  const test = { a: 1, b: 2 };
// 扩展运算符
  const copy = { ...test, c: 3 }; //  { a: 1, b: 2, c: 3 }
// 解构赋值运算符
  const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

8、用push代替直接向数组中添加一个值，即不能直接使用类似arr[4] = ‘xxx’。

9、使用 Array#from或是[…]运算符把一个类数组对象转换成数组，当然map遍历时更推荐使用Array#from，可以避免创建临时数组。

10、使用解构存取和使用多属性对象，解构能减少临时引用属性。

e.g.
// bad
  function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;
    return `${firstName} ${lastName}`;
  }

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

11、使用 . 来访问对象的属性，但当通过变量访问属性时使用中括号 []。

12、直接给函数的参数指定默认值，不要使用一个变化的函数参数,使用参数默认值替代使用条件语句进行赋值;

e.g.
// bad
  function handleThings(opts) {
    opts = opts || {};
    // ...
  }
// good
  function handleThings(opts = {}) {
    // ...
  }

13、默认参数赋值需要放在参数列最后，不要对参数重新赋值。

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

14、默认参数要避免副作用使人迷惑。

15、不要在非函数块（if、while等等）内声明函数。把这个函数分配给一个变量。浏览器会允许这样做，但浏览器解析方式不同。

16、不使用arguments命名参数，优先级高于每个函数作用域自带的arguments对象，会导致函数自带arguments被覆盖。

17、不在字符串中使用eval()以及不使用不必要的转义字符。

18、函数签名部分要留空格，使得添加/删除名字时比较方便且具有统一性。

e.g.
  const y = function a() {};

19、总是使用模组 (import/export) 而不是其他非标准模块系统；import放在其他所有语句之前；多行import要缩进。

e.g.
// 标准模块系统
  import { es6 } from './AirbnbStyleGuide';
  export default es6;
// 多行import
  import {
    longNameA,
    longNameB,
    longNameC,
    longNameD,
    longNameE,
  } from 'path';

20、不要从 import 中直接 export。
虽然一行代码（export { es6 as default } from './AirbnbStyleGuide';
）简洁明了，但让 import 和 export 各司其职让事情能保持一致。

21、在import语句里不允许Webpack loader语法。

22、不要使用 iterators。使用高阶函数例如 map() 和 reduce() 替代 for-of。
加强了不变的规则。处理纯函数的回调值更易读，这比它带来的副作用更重要。

23、优先使用 === 和 !== 而不是 == 和 !=。

24、string使用单引号’’，超过100个字符的字符串不应该用string串联成多行，会使得代码不美观且不容易被检索。

25、程序化生成字符串时，使用模板字符串代替字符串连接，更为简洁并且更具有可读性。

e.g.
  function sayHi(name) {
    return `How are you, ${name}?`;
  }

26、条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则：

* 对象 被计算为 true
* Undefined 被计算为 false
* Null 被计算为 false
* 布尔值 被计算为 布尔的值
* 数字 如果是 +0、-0、或 NaN 被计算为 false, 否则为 true
* 字符串 如果是空字符串 '' 被计算为 false，否则为 true

27、使用 2 个空格作为缩进，而非Tab键（大型提示报错现场️）。

28、每次记得增加结尾的逗号（养成良好编程习惯，该加的就加上）。会让 git diffs 更干净。另外，像 babel这样的转译器会移除结尾多余的逗号，也就是说不必担心老旧浏览器的尾逗号问题。

29、别保存 this 的引用，使用箭头函数或 Function#bind。

30、使用驼峰式命名对象、函数和实例。如果文件只输出一个类，那该文件名必须和类名完全保持一致。

31、当需要将浮点数转换成整型时，应该使用Math.floor()或者Math.round()，而不是使用parseInt()将字符串转换成数字。Math 是内部对象，所以Math.floor()其实并没有多少查询方法和调用时间，速度是最快的。

32、使用对象的spread操作符而不是Object.assign方法来浅拷贝对象。

e.g
// 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 }