Javascript编码规范（二）

　　命名规范标准变量采用驼峰式命名 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;}引用 References
　　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;}对象Objects
　　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 }数组 Arrays
　　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);解构 Destructuring
　　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);字符串 Strings
　　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 函数 Functions
　　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;}箭头函数 Arrow Functions
　　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;};类 Classes & 构造函数 Constructors
　　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; }}模块 Modules
　　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 的新特性，使我们的代码看起来更优雅，我们不仅要知道要这么规范，除了好看，我们还应该去了解为什么这么就更规范，这就你需要深入的了解每种语法的特性。