Airbnb Javascript 代码规范重要点总结es6
中文原地址
1.对所有的引用使用 const 而非 var。这能确保你无法对引用重复赋值。
当需要变动引用时,使用let。
const和let都是块级作用域。
2.创建对象的方式:
const item = {};
使用对象属性的简写,且为简写的属性分组。
3.创建数组的方式:
const arr = [ ];
使用arr.push()去替代直接赋值。
使用拓展运算符去赋值数组: arrCopy = [...arr];
使用Array.from()把一个类数组对象转换成数组:
const foo = document.querySelectorAll('.foo');
const nodes = Aarry.from(foo);
4.解构:
使用解构存取和使用多属性对象:
function getFullName({ firstName, lastName }) { return `${firstName} ${lastName}`; }
对数组也使用解构赋值:
const arr = [1, 2, 3, 4]; const [first, second] = arr; // 等同于first = arr[0],second = arr[1]
返回多个值时使用对象解构:这样不用在意属性的顺序
function returnInput (input) { ... return { left, right, top, bottom }; } const { left, right } = processInput(input);
5.Strings
程序化生成字符串时,使用模板字符串代替字符串链接
function sayHi(name) { return `How are you, ${name}?`; }
6.函数
使用函数声明代替函数表达式
function foo() { }
立即调用的函数表达式:
(()=> { console.log('Welcome to the Internet. Please follow me.'); })();
永远不要在非函数代码块(if,while)中声明一个函数,把那个函数赋给一个变量。
let test; if (current) { test = () => { ... }; }
不要使用arguments,可以选择rest语法...替代。rest是一个真正的数组,且能明确你要传入的参数
function cont(...args) { return args.join(''); }
直接给函数的参数指定默认值,不要使用一个变化的函数参数
function fn(opts = {}) {...}
7.构造器
总是使用class,避免直接操作prototype。
使用extends继承。
方法可以返回this来帮助链式调用。
8.模块
总是使用模组(import/export)而非其他非标模块系统。
import { es6 } from './AirbnbStyleGuide'; export default es6;
不要使用通配符import以确保只有一个默认export
不要从import中直接export
9.迭代器
使用高阶函数如map()/reduce()去替代for-of
const number = [1, 2, 3, 4, 5]; const sum = numbers.reduce((total, num) => total + num, 0); sum === 15; ...
10.属性
使用 . 访问对象的属性。
当通过变量访问属性时使用中括号[]
11.变量
一直使用const来声明变量以防止全局污染,且用const为每一个变量声明。
将所有的const和let分组。
12.提升
使用let和const不会被提升,所以必须声明在前面。
匿名函数的表达式的变量名会被提升但是函数内容不会
命名的函数表达式的变量名会被提升,但是函数名和函数内容不会
函数声明的名称和哈你数体都会被提升。
以上和js的解析机制有关。
13.
优先使用 === 和 !== 而非 == / !=
条件表达式中:
对象被计算为true
undefined / null 都为false
数字除 +0 / -0 / NaN 外 都为true
字符串除‘ ’外都为true
14.代码块
使用大括号包裹所有的多行代码块,单行不必。
15.注释
使用/**...*/作为多行注释
使用//作为单行注释,在评论对象上另起一行,且在注释前插入空行
使用 // FIXME 标注问题
使用 // TODO 标注问题的解决方式
16.空格
在块末和新语句前插入空行
17.类型转换
字符串:不要使用 + ‘ ’
// => this.reviewScore = 9; const totalScore = String(this.reviewScore);
数字:使用parseInt,并带上转换类型的基数
const inputValue = '4'; const val = Number(inputValue); // 或者 const val = parseInt(inputValue, 10);
布尔:
const age = 0; const hasAge = Boolean(age); // 或者 const hasAge = !!age;
18.命名规则
使用帕斯卡式命名构造函数或类
不要使用下划线结尾或开头来命名属性和方法
不要保存this的引用。使用箭头函数或Function#bind
如果文件只输出一个类,那你的文件名必须和类名完全保持一致(帕斯卡式)
如果文件导出默认的函数,文件名与该函数名一致。(驼峰式)
19.存取器
属性的存取函数不是必须的
使用getValue()和setValue('...')
如果属性是布尔值,使用isVal() 或 hasVal()
posted on 2017-11-09 20:45 holajulie 阅读(1227) 评论(0) 编辑 收藏 举报