JavaScript 编程规范(一)

由于原文太长,担心一次看不完,所以我把文章拆分成两次或者三次来看,避免太长了没心情看,本篇是第一篇。

命名规范

  • 标准变量采用驼峰式命名
  • ID 在变量名中全大写
  • 常量全大写,用下划线连接构造函数,大写第一个字母
  • jquery 对象必须以 $ 开头命名
let thisIsMyName;
let goodID;
let reportURL;
let AndroidVersion;
let iOSVersion;
let MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}
// not good
let body = $('body');
// good
let $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 和难以理解的代码。

// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2;

2. 如果你一定需要可变动的引用,使用 let 代替 var 。

eslint: no-var jscs: disallowVar

// bad
var count = 1;
if (true) {
    count += 1;
}
// good, 使用 let.
let count = 1;
if (true) {
    count += 1;
}

对象Objects

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

eslint: no-new-object

// bad
const item = new Object();
// good
const item = {};

2. 当创建带有动态属性名称的对象时使用计算的属性名称。

它们允许你在一个地方定义一个对象的所有属性。

function getKey(k) {
    return `a key named k`;
}
// bad
const obj = {
    id: 5,
    name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good
const obj = {
    id: 5,
    name: 'San Francisco',
    [getKey('enabled')]: true,
};

3. 使用对象方法速记语法。

eslint: object-shorthand jscs: requireEnhancedObjectLiterals

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

4. 使用对象属性速记语法。

eslint: object-shorthand jscs: requireEnhancedObjectLiterals

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

5. 将速记属性分组写在对象声明的开始处

更容易看出哪些属性在使用速记语法

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
    episodeOne: 1,
    twoJediWalkIntoACantina: 2,
    lukeSkywalker,
    episodeThree: 3,
    mayTheFourth: 4,
    anakinSkywalker,
};
// good
const obj = {
    lukeSkywalker,
    anakinSkywalker,
    episodeOne: 1,
    twoJediWalkIntoACantina: 2,
    episodeThree: 3,
    mayTheFourth: 4,
};

6. 只用引号引无效标识符的属性。

eslint: quote-props jscs: disallowQuotedKeysInObjects

一般来说,我们认为比较容易阅读。它改进了语法高亮显示,并且更容易被许多JS引擎优化。

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

7. 用对象展开操作符浅复制对象,优先于Object.assign 。使用对象剩余操作符来获得一个省略某些属性的新对象。

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); //  `original` 是可变的 ಠ_ಠ
delete copy.a; // so does this

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

数组 Arrays

1. 使用字面量创建数组。

eslint: no-array-constructor

// 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];

3. 使用展开操作符 … 代替 Array.from,来将一个类数组(array-like) 对象转换成数组。

const foo = document.querySelectorAll('.foo');
// good
const nodes = Array.from(foo);
// best
const nodes = [...foo];

4. 实用 Array.from 代替展开操作符 … 来映射迭代,因为它避免了创建媒介数组。

// bad
const baz = [...foo].map(bar);
// good
const baz = Array.from(foo, bar);

解构 Destructuring

1. 当访问和使用对象的多个属性时,请使用对象解构。

eslint: prefer-destructuring jscs: requireObjectDestructuring

// 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. 使用数组解构。

eslint: prefer-destructuring jscs: requireArrayDestructuring

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);

字符串 Strings

1. 字符串使用单引号 ''。

eslint: quotes jscs: validateQuoteMarks

// bad
const name = "Capt. Janeway";
// bad - 模板字面量应该包含插值或换行符
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';

2. 以编程方式构建字符串时,请使用模板字符串而不是字符串连接。

eslint: prefer-template template-curly-spacing jscs: requireTemplateStrings

// 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() ,它会打开太多的漏洞。

eslint: no-eval

函数 Functions

1. 使用命名函数表达式而不是函数声明。

eslint: func-style jscs: disallowFunctionDeclarations

函数声明很容易被提升(Hoisting),这对可读性和可维护性来说都是不利的;

/ bad
function foo() {
  // ...
}
// bad
const 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)。

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

4. 使用默认参数语法,而不要使用一个变化的函数参数

// really bad
function handleThings(opts) {
    // 更加糟糕: 如果参数 opts 是 falsy(假值) 的话,它将被设置为一个对象,
    // 这可能是你想要的,但它可以引起一些小的错误。
    opts = opts || {};
    // ...
}
// still bad
function handleThings(opts) {
    if (opts === void 0) {
    opts = {};
}
// ...
}
// good
function handleThings(opts = {}) {
    // ...
}

5. 始终将默认参数放在最后。

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

**6. 隔开函数签名,括号两边用空格隔开。 **

// bad
const f = function(){};
const g = function (){};
const h = function() {};
// good
const x = function () {};
const y = function a() {};

7. 不要改变参数。

eslint: no-param-reassign

操作作为参数传入的对象,可能会在调用原始对象时造成不必要的变量副作用。(对象是引用类型)

// bad
function f1(obj) {
    obj.key = 1;
}
// good
function 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. 免使用比较运算符(< =, >=)时,混淆箭头函数语法(=>)。

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

类 Classes & 构造函数 Constructors

1. 总是使用 class。避免直接操作 prototype 。

// bad
function Queue(contents = []) {
    this.queue = [...contents];
}
Queue.prototype.pop = function () {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
};
// good
class Queue {
    constructor(contents = []) {
        this.queue = [...contents];
    }
    pop() {
        const value = this.queue[0];
        this.queue.splice(0, 1);
        return value;
    }
}

2. 使用 extends 继承。

因为 extends 是一个内置的原型继承方法并且不会破坏 instanceof。

// bad
const inherits = require('inherits');
    function PeekableQueue(contents) {
    Queue.apply(this, contents);
}

inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
    return this.queue[0];
};

// good
class PeekableQueue extends Queue {
    peek() {
        return this.queue[0];
    }
}

3. 如果没有指定,类有一个默认的构造函数。一个空的构造函数或者只是委托给父类则不是必须的。

eslint: no-useless-constructor

// bad
class Jedi {
    constructor() {}
        getName() {
        return this.name;
    }
}
// bad
class Rey extends Jedi {
    constructor(...args) {
        super(...args);
    }
}
// good
class Rey extends Jedi {
    constructor(...args) {
        super(...args);
        this.name = 'Rey';
    }
}

4. 避免重复类成员。

eslint: no-dupe-class-members

// bad
class Foo {
  bar() { return 1; }
  bar() { return 2; }
}
// good
class Foo {
  bar() { return 1; }
}
// good
class Foo {
  bar() { return 2; }
}

模块 Modules

1. 总是使用模块 (import/export) 而不是其他非标准模块系统。

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;
// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;
// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

2. 不要使用通配符 import(导入)。

这样能确保你只有一个默认 export(导出)。

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

3. 不要从 import(导入) 中直接 export(导出)。

虽然一行代码简洁明了,但有一个明确的 import(导入) 方法和一个明确的 export(导出) 方法,使事情能保持一致。

// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';
// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

4. 一个地方只在一个路径中 import(导入) 。

// bad
import foo from 'foo';
// … 其他一些 imports … //
import { named1, named2 } from 'foo';
// good
import foo, { named1, named2 } from 'foo';
// good
import foo, {
  named1,
  named2,
} from 'foo';

5. 不要 export(导出) 可变绑定。

eslint: import/no-mutable-exports

一般应该避免可变性,特别是在导出可变绑定时。虽然一些特殊情况下,可能需要这种技术,但是一般而言,只应该导出常量引用。

// bad
let foo = 3;
export { foo };
// good
const foo = 3;
export { foo };

6. 在只有单个导出的模块中,默认 export(导出) 优于命名 export(导出)。

eslint: import/prefer-default-export

为了鼓励更多的文件只有一个 export(导出),这有利于模块的可读性和可维护性。

// bad
export function foo() {}
// good
export default function foo() {}

7. 将所有 import 导入放在非导入语句的上面。

eslint: import/first

由于 import 被提升,保持他们在顶部,防止意外的行为。

// bad
import foo from 'foo';
foo.init();
import bar from 'bar';
// good
import foo from 'foo';
import bar from 'bar';
foo.init();

8. 多行导入应该像多行数组和对象字面量一样进行缩进。

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';
// good
import {
    longNameA,
    longNameB,
    longNameC,
    longNameD,
    longNameE,
} from 'path';

另外

对于这里面的规范很多都是由于引入了一些 ES6 的新特性,使我们的代码看起来更优雅,我们不仅要知道要这么规范,除了好看,我们还应该去了解为什么这么就更规范,这就你需要深入的了解每种语法的特性。

文章原文来自陌上寒的 sf:https://segmentfault.com/a/1190000018316400#articleHeader55

原文发布于微信公众号 - 前端桃园(betaoyuan)

原文发表时间:2019-03-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券