本文共 11983 字,大约阅读时间需要 39 分钟。
由于原文太长,担心一次看不完,所以我把文章拆分成两次或者三次来看,避免太长了没心情看,本篇是第一篇。
标准变量采用驼峰式命名
ID
在变量名中全大写
常量全大写,用下划线连接构造函数,大写第一个字母
jquery 对象必须以 $ 开头命名
let thisIsMyName;let goodID;let reportURL;let AndroidVersion;let iOSVersion;let MAX_COUNT = 10;function Person(name) { this.name = name;}// not goodlet body = $('body');// goodlet $body = $('body');
小驼峰命名法,可使用常见动词约定:
can 判断是否可执行某个动作,函数返回一个布尔值。true:可执行;false:不可执行
has 判断是否含有某个值, 函数返回一个布尔值。- true:含有此值;false:不含有此值
is: 判断是否为某个值,函数返回一个布尔值。true:为某个值;false:不为某个值
get: 获取某个之,函数返回一个非布尔值
set: 设置某个值,无返回值、返回是否设置成功或者返回链式对象 load 加载某些数据,无返回值或者返回是否加载完成的结果
// 是否可阅读function canRead() { return true;}// 获取名称function getName() { return this.name;}
1. 对所有的引用使用 const ;不要使用 var。
eslint: prefer-const, no-const-assign
这可以确保你无法对引用重新分配,重新分配可能会导致 bug 和难以理解的代码。
// badvar a = 1;var b = 2;// goodconst a = 1;const b = 2;
2. 如果你一定需要可变动的引用,使用 let 代替 var 。
eslint: no-var jscs: disallowVar
// badvar count = 1;if (true) { count += 1;}// good, 使用 let.let count = 1;if (true) { count += 1;}
1. 使用字面量语法创建对象。
eslint: no-new-object
// badconst item = new Object();// goodconst item = {};
2. 当创建带有动态属性名称的对象时使用计算的属性名称。
它们允许你在一个地方定义一个对象的所有属性。
function getKey(k) { return `a key named k`;}// badconst obj = { id: 5, name: 'San Francisco',};obj[getKey('enabled')] = true;// goodconst obj = { id: 5, name: 'San Francisco', [getKey('enabled')]: true,};
3. 使用对象方法速记语法。
eslint: object-shorthand jscs: requireEnhancedObjectLiterals
// badconst atom = { value: 1, addValue: function (value) { return atom.value + value; },};// goodconst atom = { value: 1, addValue(value) { return atom.value + value; },};
4. 使用对象属性速记语法。
eslint: object-shorthand jscs: requireEnhancedObjectLiterals
const lukeSkywalker = 'Luke Skywalker';// badconst obj = { lukeSkywalker: lukeSkywalker,};// goodconst obj = { lukeSkywalker,};
5. 将速记属性分组写在对象声明的开始处
更容易看出哪些属性在使用速记语法
const anakinSkywalker = 'Anakin Skywalker';const lukeSkywalker = 'Luke Skywalker';// badconst obj = { episodeOne: 1, twoJediWalkIntoACantina: 2, lukeSkywalker, episodeThree: 3, mayTheFourth: 4, anakinSkywalker,};// goodconst obj = { lukeSkywalker, anakinSkywalker, episodeOne: 1, twoJediWalkIntoACantina: 2, episodeThree: 3, mayTheFourth: 4,};
6. 只用引号引无效标识符的属性。
eslint: quote-props jscs: disallowQuotedKeysInObjects
一般来说,我们认为比较容易阅读。它改进了语法高亮显示,并且更容易被许多JS引擎优化。
// badconst bad = { 'foo': 3, 'bar': 4, 'data-blah': 5,};// goodconst good = { foo: 3, bar: 4, 'data-blah': 5,};
7. 用对象展开操作符浅复制对象,优先于Object.assign 。使用对象剩余操作符来获得一个省略某些属性的新对象。
// very badconst original = { a: 1, b: 2 };const copy = Object.assign(original, { c: 3 }); // `original` 是可变的 ಠ_ಠdelete copy.a; // so does this// badconst original = { a: 1, b: 2 };const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }// goodconst 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. 使用字面量创建数组。
eslint: no-array-constructor
// badconst items = new Array();// goodconst items = [];
2. 使用数组展开操作符 … 复制数组。
// badconst len = items.length;const itemsCopy = [];let i;for (i = 0; i < len; i += 1) { itemsCopy[i] = items[i];}// goodconst itemsCopy = [...items];
3. 使用展开操作符 … 代替 Array.from,来将一个类数组(array-like) 对象转换成数组。
const foo = document.querySelectorAll('.foo');// goodconst nodes = Array.from(foo);// bestconst nodes = [...foo];
4. 实用 Array.from 代替展开操作符 … 来映射迭代,因为它避免了创建媒介数组。
// badconst baz = [...foo].map(bar);// goodconst baz = Array.from(foo, bar);
1. 当访问和使用对象的多个属性时,请使用对象解构。
eslint: prefer-destructuring jscs: requireObjectDestructuring
// badfunction getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return `firstName lastName`;}// goodfunction getFullName(user) { const { firstName, lastName } = user; return `firstName lastName`;}// bestfunction getFullName({ firstName, lastName }) { return `firstName lastName`;}
2. 使用数组解构。
eslint: prefer-destructuring jscs: requireArrayDestructuring
const arr = [1, 2, 3, 4];// badconst first = arr[0];const second = arr[1];// goodconst [first, second] = arr;
3. 使用对象解构来实现多个返回值,而不是数组解构。
您可以随着时间的推移添加新的属性或更改排序,而不会改变调用时的位置。
// badfunction processInput(input) { return [left, right, top, bottom];}// 调用者需要考虑返回数据的顺序const [left, __, top] = processInput(input);// goodfunction processInput(input) { return { left, right, top, bottom };}// 调用者只选择他们需要的数据const { left, top } = processInput(input);
1. 字符串使用单引号 ''。
eslint: quotes jscs: validateQuoteMarks
// badconst name = "Capt. Janeway";// bad - 模板字面量应该包含插值或换行符const name = `Capt. Janeway`;// goodconst name = 'Capt. Janeway';
2. 以编程方式构建字符串时,请使用模板字符串而不是字符串连接。
eslint: prefer-template template-curly-spacing jscs: requireTemplateStrings
// badfunction sayHi(name) { return 'How are you, ' + name + '?';}// badfunction sayHi(name) { return ['How are you, ', name, '?'].join();}// badfunction sayHi(name) { return `How are you, ${ name }?`;}// goodfunction sayHi(name) { return `How are you, ${name}?`;}
3. 永远不要在字符串上使用 eval() ,它会打开太多的漏洞。
eslint: no-eval
1. 使用命名函数表达式而不是函数声明。
eslint: func-style jscs: disallowFunctionDeclarations
函数声明很容易被提升(Hoisting),这对可读性和可维护性来说都是不利的;
/ badfunction foo() { // ...}// badconst foo = function () { // ...};// good // 用明显区别于变量引用调用的词汇命名const short = function longUniqueMoreDescriptiveLexicalFoo() { // ...};
2. 用圆括号包裹立即调用函数表达式 (IIFE)。
eslint: wrap-iife jscs: requireParenthesesAroundIIFE
一个立即调用函数表达式是一个单独的单元 – 将函数表达式包裹在括号中,后面再跟一个调用括号,这看上去很紧凑。
// 立即调用函数表达式 (IIFE)(function () {console.log('Welcome to the Internet. Please follow me.');}());
3. 不要使用 arguments。可以选择 rest 语法 … 替代。
使用 … 能明确你要传入的参数。另外 rest(剩余)参数是一个真正的数组,而 arguments 是一个类数组(Array-like)。
// badfunction concatenateAll() { const args = Array.prototype.slice.call(arguments); return args.join('');}// goodfunction concatenateAll(...args) { return args.join('');}
4. 使用默认参数语法,而不要使用一个变化的函数参数
// really badfunction handleThings(opts) { // 更加糟糕: 如果参数 opts 是 falsy(假值) 的话,它将被设置为一个对象, // 这可能是你想要的,但它可以引起一些小的错误。 opts = opts || {}; // ...}// still badfunction handleThings(opts) { if (opts === void 0) { opts = {};}// ...}// goodfunction handleThings(opts = {}) { // ...}
5. 始终将默认参数放在最后。
// badfunction handleThings(opts = {}, name) {// ...}// goodfunction handleThings(name, opts = {}) {// ...}
**6. 隔开函数签名,括号两边用空格隔开。
**// badconst f = function(){};const g = function (){};const h = function() {};// goodconst x = function () {};const y = function a() {};
7. 不要改变参数。
eslint: no-param-reassign
操作作为参数传入的对象,可能会在调用原始对象时造成不必要的变量副作用。(对象是引用类型)
// badfunction f1(obj) { obj.key = 1;}// goodfunction f2(obj) { const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;}
1. 当您必须使用匿名函数(如在传递一个内联回调时),请使用箭头函数表示法。
eslint: prefer-arrow-callback, arrow-spacing jscs: requireArrowFunctions
它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。
// bad[1, 2, 3].map(function (x) { const y = x + 1; return x * y;});// bad[1, 2, 3].map( _ => { return 0;});// good[1, 2, 3].map((x) => { const y = x + 1; return x * y;});// good[1, 2, 3].map(() => { return 0;});
2. 如果函数体由一个返回无副作用(side effect)的expression(表达式)的单行语句组成,那么可以省略大括号并使用隐式返回。否则,保留大括号并使用 return 语句
// bad[1, 2, 3].map(number => { const nextNumber = number + 1; return `A string containing the ${nextNumber}.`;});// good[1, 2, 3].map(number => `A string containing the ${number}.`);
3. 如果表达式跨多行,将其包裹在括号中,可以提高可读性。
// bad ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, ));// good['get', 'post', 'put'].map(httpMethod => ( Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, )));
4. 如果你的函数只有一个参数并且不使用大括号,则可以省略参数括号。否则,为了清晰和一致性,总是给参数加上括号。
// bad[1, 2, 3].map((x) => x * x);// good[1, 2, 3].map(x => x * x);// good[1, 2, 3].map(number => (`A long string with the number. It’s so long that we don’t want it to take up space on the .map line!`));// 总是添加()// bad[1, 2, 3].map(x => { const y = x + 1; return x * y;});// good[1, 2, 3].map((x) => { const y = x + 1; return x * y;});
5. 免使用比较运算符(< =, >=)时,混淆箭头函数语法(=>)。
// badconst itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;// badconst itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;// goodconst itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);// goodconst itemHeight = (item) => { const { height, largeSize, smallSize } = item; return height > 256 ? largeSize : smallSize;};
1. 总是使用 class。避免直接操作 prototype 。
// badfunction Queue(contents = []) { this.queue = [...contents];}Queue.prototype.pop = function () { const value = this.queue[0]; this.queue.splice(0, 1); return value;};// goodclass Queue { constructor(contents = []) { this.queue = [...contents]; } pop() { const value = this.queue[0]; this.queue.splice(0, 1); return value; }}
2. 使用 extends 继承。
因为 extends 是一个内置的原型继承方法并且不会破坏 instanceof。
// badconst inherits = require('inherits'); function PeekableQueue(contents) { Queue.apply(this, contents);}inherits(PeekableQueue, Queue);PeekableQueue.prototype.peek = function () { return this.queue[0];};// goodclass PeekableQueue extends Queue { peek() { return this.queue[0]; }}
3. 如果没有指定,类有一个默认的构造函数。一个空的构造函数或者只是委托给父类则不是必须的。
eslint: no-useless-constructor
// badclass Jedi { constructor() {} getName() { return this.name; }}// badclass Rey extends Jedi { constructor(...args) { super(...args); }}// goodclass Rey extends Jedi { constructor(...args) { super(...args); this.name = 'Rey'; }}
4. 避免重复类成员。
eslint: no-dupe-class-members
// badclass Foo { bar() { return 1; } bar() { return 2; }}// goodclass Foo { bar() { return 1; }}// goodclass Foo { bar() { return 2; }}
1. 总是使用模块 (import/export) 而不是其他非标准模块系统。
// badconst AirbnbStyleGuide = require('./AirbnbStyleGuide');module.exports = AirbnbStyleGuide.es6;// okimport AirbnbStyleGuide from './AirbnbStyleGuide';export default AirbnbStyleGuide.es6;// bestimport { es6 } from './AirbnbStyleGuide';export default es6;
2. 不要使用通配符 import(导入)。
这样能确保你只有一个默认 export(导出)。
// badimport * as AirbnbStyleGuide from './AirbnbStyleGuide';// goodimport AirbnbStyleGuide from './AirbnbStyleGuide';
3. 不要从 import(导入) 中直接 export(导出)。
虽然一行代码简洁明了,但有一个明确的 import(导入) 方法和一个明确的 export(导出) 方法,使事情能保持一致。
// bad// filename es6.jsexport { es6 as default } from './AirbnbStyleGuide';// good// filename es6.jsimport { es6 } from './AirbnbStyleGuide';export default es6;
4. 一个地方只在一个路径中 import(导入) 。
// badimport foo from 'foo';// … 其他一些 imports … //import { named1, named2 } from 'foo';// goodimport foo, { named1, named2 } from 'foo';// goodimport foo, { named1, named2,} from 'foo';
5. 不要 export(导出) 可变绑定。
eslint: import/no-mutable-exports
一般应该避免可变性,特别是在导出可变绑定时。虽然一些特殊情况下,可能需要这种技术,但是一般而言,只应该导出常量引用。
// badlet foo = 3;export { foo };// goodconst foo = 3;export { foo };
6. 在只有单个导出的模块中,默认 export(导出) 优于命名 export(导出)。
eslint: import/prefer-default-export
为了鼓励更多的文件只有一个 export(导出),这有利于模块的可读性和可维护性。
// badexport function foo() {}// goodexport default function foo() {}
7. 将所有 import 导入放在非导入语句的上面。
eslint: import/first
由于 import 被提升,保持他们在顶部,防止意外的行为。
// badimport foo from 'foo';foo.init();import bar from 'bar';// goodimport foo from 'foo';import bar from 'bar';foo.init();
8. 多行导入应该像多行数组和对象字面量一样进行缩进。
// badimport {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';// goodimport { longNameA, longNameB, longNameC, longNameD, longNameE,} from 'path';
对于这里面的规范很多都是由于引入了一些 ES6 的新特性,使我们的代码看起来更优雅,我们不仅要知道要这么规范,除了好看,我们还应该去了解为什么这么就更规范,这就你需要深入的了解每种语法的特性。
文章原文来自陌上寒的 sf:https://segmentfault.com/a/1190000018316400#articleHeader55
转载地址:http://upwii.baihongyu.com/