sophiehui

导航

 
eslint推荐编码规范和airbnb推荐编码规范

Eslint规范

  1. for 循环禁止使用无限循环（这个非默认推荐）

    // bad
for (var i = 0; i < 10; i--) {
}
for (var i = 10; i >= 0; i++) {
}

// good
for (var i = 0; i < 10; i++) {
}

  2. 不允许和负0比较

    // bad
if (x === -0) {
    // doSomething()...
}

// good
if (x === 0) {
    // doSomething()...
}
if (Object.is(x, -0)) {
    // doSomething()...
}

  3. 禁止在条件语句(if,while,do...while )中出现赋值操作

    // bad
if (user.jobTitle = "manager") {
    // user.jobTitle is now incorrect
}

// good
if (user.jobTitle == "manager") {
    // doSomething()...
}

    注意：该规则有个字符串选项，默认是“except-parens”，允许出现赋值操作，但必须是被圆括号括起来的；设置为“always”表示禁止在条件语句中出现赋值语句

    // bad 设置为except-parens
 var x;
 if (x = 0) {
     var b = 1;
 }
 
 function setHeight(someNode) {
     "use strict";
     do {
         someNode.height = "100px";
     } while (someNode = someNode.parentNode);
 }

// good 设置为except-parens
 var x;
 if (x === 0) {
     var b = 1;
 }
 
 function setHeight(someNode) {
     "use strict";
     do {
         someNode.height = "100px";
     } while ((someNode = someNode.parentNode));
 }

  4. 禁止在代码中使用console（在产品发布之前，剔除console的调用）

    // bad
console.log("Log a debug level message.");
console.warn("Log a warn level message.");
console.error("Log an error level message.")

// good
//自定义的Console
Console.log("Log a debug level message.");

    注意：可以设置allow参数允许console 对象方法

  1. 禁止在条件语句（for,if,while,do...while）和三元表达式（?:）中使用常量表达式

    // bad
 if (false) {
     doSomething();
 }

 if (2) {
     doSomething();
 }

 for (;-2;) {
     doSomething();
 }

 while (typeof x) {
     doSomething();
 }

 do{
     doSomething();
 } while (x = -1);

 var result = 0 ? a : b;

// good
 if (x === 0) {
     doSomething();
 }

 for (;;) {
     doSomething();
 }

 while (typeof x === "undefined") {
     doSomething();
 }

 do{
     doSomething();
 } while (x);

 var result = x !== 0 ? a : b;

    注意：可以通过设置checkLoops参数来表示是否允许使用常量表达式

  2. 禁用debugger，采用断点的方式进行调试

    // bad
function isTruthy(x) {
    debugger;
    return Boolean(x);
}

// good
function isTruthy(x) {
    return Boolean(x); // set a breakpoint at this line
}

  3. 不允许在函数（function）定义里面出现重复的参数(箭头函数和类方法设置重复参数会报错，但跟该规则无关)

    // bad
function foo(a, b, a) {
    console.log("value of the second a:", a);
}
var bar = function (a, b, a) {
    console.log("value of the second a:", a);
};

// good
function foo(a, b, c) {
    console.log(a, b, c);
}
var bar = function (a, b, c) {
    console.log(a, b, c);
};

// 箭头函数报错
function foo(x, x, y = 1) {
    //doSomething();
}
// SyntaxError: Duplicate parameter name not allowed in this context

  4. 不允许对象字面量出现重复的key

    // bad
var foo = {
    bar: "baz",
    bar: "qux"
};

var foo = {
    "bar": "baz",
    bar: "qux"
};

var foo = {
    0x1: "baz",
    1: "qux"
};

// good
var foo = {
    bar: "baz",
    foo: "foo"
};

  5. 不允许使用重复的case值

    // bad
var a = 1;
var b = 1;

switch (a) {
    case 1:
        break;
    case 2:
        break;
    case 1:         // duplicate test expression
        break;
    default:
        break;
}

switch (a) {
    case b:
        break;
    case 2:
        break;
    case b:         // duplicate test expression
        break;
    default:
        break;
}

switch (a) {
    case '1':
        break;
    case 2:
        break;
    case '1':         // duplicate test expression
        break;
    default:
        break;
}

//good

var a = 1;

switch (a) {
    case 1:
        break;
    case 2:
        break;
    case 3:         // duplicate test expression
        break;
    default:
        break;
}

  6. 不允许出现空块语句

    // bad
if (foo) {
}

try {
    doSomething();
} catch(ex) {

} finally {

}

//good

if (foo) {
    // empty
}

try {
    doSomething();
} catch (ex) {
    // continue regardless of error
}

    注意：可以通过allowEmptyCatch为true允许出现空的catch子句

  7. 不允许在正则表达式中出现空字符集

    // bad
/^abc[]/.test("abcdefg"); // false
"abcdefg".match(/^abc[]/); // null

// good
/^abc/.test("abcdefg"); // true
"abcdefg".match(/^abc/); // ["abc"]

/^abc[a-z]/.test("abcdefg"); // true
"abcdefg".match(/^abc[a-z]/); // ["abcd"]

  8. 不允许对catch子句的参数进行重新赋值

    // bad
try {
    // code
} catch (e) {
    e = 10;
}

// good
try {
    // code
} catch (e) {
    var foo = 10;
}

  9. 禁止不必要的布尔类型转换

    // bad
var bar = 'zhinanzhen';
var foo = !!!bar;//与!bar值相同，都为false
var foo = !!bar ? baz : bat;
var foo = Boolean(!!bar);
if (Boolean(foo)) {
    // ...
}

// good
var foo = !!bar;//转布尔值
var foo = Boolean(bar);

function foo() {
    return !!bar;
}

var foo = bar ? !!baz : !!bat;

  10. 禁止不必要的分号和括号

    // bad
var x = 5;;

function foo() {
    // code
};

a = (b * c);

// good
var x = 5;

var foo = function() {
    // code
}

a = b * c;

  11. 不允许对function重新赋值

    // bad
var bar = 5;;

function foo() {}
foo = bar;

function foo() {
    foo = bar;
}

// good
var foo = function () {}
foo = bar;

function foo(foo) { // `foo` is shadowed.
    foo = bar;
}

function foo() {
    var foo = bar;  // `foo` is shadowed.
}

  12. 不允许在嵌套的语句块中用var声明变量和function

    // bad
if (test) {
    function doSomethingElse () {
    //code
    }
}

// good
function doSomething() {
    const a = 1;
}

    注意：

    1. "functions" (默认) 禁止 function 声明出现在嵌套的语句块中
    2. "both" 禁止 function 和 var 声明出现在嵌套的语句块中

  13. 不允许在正则表达式中使用控制字符，即不可显示的字符（在ASCII码中，第0～31号及第127号是控制字符或通讯专用字符）

// bad var pattern1 = /\x1f/; var pattern2 = new RegExp("\x1f");

// good var pattern1 = /\x20/; var pattern2 = new RegExp("\x20");

```

  1. 不允许RegExp构造函数中出现无效的正则表达式

    // bad
RegExp('[');//无效，报错，RegExp('[]')有效

// good

RegExp('.');//'.'元字符查找单个字符

  2. 不允许正则表达式字面量中出现多个空格

    // bad

var re = /foo   bar/;

// good

var re = /foo {3}bar/;

  3. 定义函数时，空格的使用（参考airbnb规范的30-34条）

    // bad

function thing() /*<NBSP>*/{//使用了多个空格
    return 'test';
}
function thing( /*<NBSP>*/){
    return 'test';
}

// good

function thing() {
    return 'test';
}
function thing(/*<NBSP>*/) {
    return 'test';
}

    注意：

    1. "skipStrings": true (默认) 允许在字符串字面量中出现任何空白字符
    2. "skipComments": true 允许在注释中出现任何空白字符
    3. "skipRegExps": true 允许在正则表达式中出现任何空白字符
    4. "skipTemplates": true 允许在模板字面量中出现任何空白字符

  4. 不允许将全局对象(这里主要指非函数型和非构造器对象的全局对象，例如：NaN，Infinity，undefined，Math，JSON，Reflect)作为函数进行调用

    // bad

var math = Math();
var json = JSON();
var reflect = Reflect();

// good

function area(r) {
    return Math.PI * r * r;
}
var object = JSON.parse("{}");
var value = Reflect.get({ x: 1, y: 2 }, "x");

  5. 不允许使用稀疏数组

    // bad

var items = [,];
var colors = [ "red",, "blue" ];

// good

var items = [];
var items = new Array(23);
var colors = [ "red", "blue", ];

  6. 不允许使用多行表达式(使用分号结尾，避免无关的两条语句被解析成一条语句)

    // bad

var hello = 'world'
[1, 2, 3].forEach(addNumber);

// good

ar hello = 'world';
[1, 2, 3].forEach(addNumber);

  7. 不允许在return，throw，continue，break后出现执行不到的代码

    // bad

function foo() {
    return true;
    console.log("done");
}


// good

function bar() {
    let x = 1;
    return x;
}

  8. 不允许直接在finally语句中出现控制流语句（return,throw,break,continue）

    // bad

let foo = function() {
    try {
        return 1;
    } catch(err) {
        return 2;
    } finally {
        return 3;
    }
};


// good

let foo = function() {
    try {
        return 1;
    } catch(err) {
        return 2;
    } finally {
        console.log("hola!");
    }
};

//间接使用

let foo = function() {
    try {
        return 1;
    } catch(err) {
        return 2;
    } finally {
        let a = function() {
            return "hola!";
        }
    }
};

  9. 否定操作的使用

    // bad

if (!key in object) {
    // doSomthing()
}

// good

if (!(key in object)) {
    // doSomthing()
}

  10. 检查非数值（NaN）必须使用isNaN()

    // bad

if (foo == NaN) {
    // doSomthing()
}

// good

if (isNaN(foo)) {
    // doSomthing()
}

  11. typeof 表达式必须与有效的字符串进行比较

    // bad

typeof foo === "strnig"
typeof foo == "undefimed"

// good

typeof foo === "string"
typeof bar == "undefined"

  12. 不允许在case和default语句中出现词法声明（let,const,function,class），如果需要使用，必须使用花括号

    // bad

switch (foo) {
    case 1:
        let x = 1;
        break;
    case 2:
        const y = 2;
        break;
    case 3:
        function f() {}
        break;
    default:
        class C {}
}

// good

switch (foo) {
    // The following case clauses are wrapped into blocks using brackets
    case 1: {
        let x = 1;
        break;
    }
    case 2: {
        const y = 2;
        break;
    }
    case 3: {
        function f() {}
        break;
    }
    case 4:
        // Declarations using var without brackets are valid due to function-scope hoisting
        var z = 4;
        break;
    default: {
        class C {}
    }
}

  13. 不允许case语句落空，可以用throw、return、break或者注释作为结束

    // bad

switch(foo) {
    case 1:
        doSomething();

    case 2:
        doSomethingElse();
}

// good

switch(foo) {
    case 1:
        doSomething();
        break;

    case 2:
        doSomething();
}

switch(foo) {
    //如果有意落空case语句，需设置commentPattern参数，并且加上注释
    case 1:
        doSomething();
        // break omitted

    case 2:
        doSomethingElse();
}

  14. 不允许使用空的解构模式

    // bad

var {} = foo;
var [] = foo;
var {a: {}} = foo;
var {a: []} = foo;
function foo({}) {}
function foo([]) {}
function foo({a: {}}) {}
function foo({a: []}) {}

// good

var {a = {}} = foo;
var {a = []} = foo;
function foo({a = {}}) {}
function foo({a = []}) {}

  15. 不允许修改只读的全局变量

    // bad

Object = null;
undefined = 1;
window = {};

  16. 不允许使用8进制字面量（即用0开头的数字）

    // bad

var num = 071;
var result = 5 + 07;

// good

var num  = "071";

  1. 不允许多次声明同一个变量

    // bad

var a = 3;
var a = 10;

// good

var a = 3;
a = 10;

    注意： “builtinGlobals”如果设置为 true，该规则也会检查全局内置对象，比如Object、Array、Number…

  2. 不允许自己给自己赋值

    // bad

foo = foo;

[a, b] = [a, b];

[a, ...b] = [x, ...b];

({a, b} = {a, x});

// good

foo = bar;
[a, b] = [b, a];

let foo = foo;

  3. 不允许使用没有使用过的标签

    // bad

A:
for (let i = 0; i < 10; ++i) {
    foo();
}

// good

B:
for (let i = 0; i < 10; ++i) {
    if (foo()) {
        break B;
    }
    bar();
}

  4. 不允许使用没有必要的转义

    // bad

"\'";
'\"';
"\#";
"\e";
`\"`;
`\"${foo}\"`;
`\#{foo}`;
/\!/;
/\@/;

// good

"\"";
'\'';
"\x12";
"\u00a9";
"\371";
"xs\u2111";
`\``;
`\${${foo}\}`;
`$\{${foo}\}`;
/\\/g;
/\t/g;
/\w\$\*\^\./;

  5. 不允许删除变量（严格模式下会报错）

    // bad

var x;
delete x;

  6. 不允许使用未声明的变量

    // bad

b = 10;

//good

let b = 10;

  7. 定义过的变量都必须被使用

    
//good

let b = 10;
alert(b);

  8. 不允许使用空格和tab混合缩进（airbnb推荐使用两个空格作为缩进）

  9. 派生类中的构造函数必须调用 super()。非派生类的构造函数不能调用 super()

    //bad

class A {
    constructor() {
        super();  // This is a SyntaxError.
    }
}

class A extends B {
    constructor() { }  // Would throw a ReferenceError.
}

//good

class A {
    constructor() { }
}

class A extends B {
    constructor() {
        super();
    }
}

  10. 在派生类构造函数中，不允许在调用super()之前使用this和super

    // bad

class A extends B {
    constructor() {
        this.a = 0;
        super();
    }
}

class A extends B {
    constructor() {
        super.foo();
        super();
    }
}

//good

class A {
    constructor() {
        this.a = 0; // OK, this class doesn't have an `extends` clause.
    }
}

class A extends B {
    constructor() {
        super();
        this.a = 0; // OK, this is after `super()`.
    }
}

  11. 不允许修改类声明的变量

    // bad

class A { }
A = 0;


class A {
    b() {
        A = 0;
    }
}

//good

let A = class A { }
A = 0; // A is a variable.

let A = class {
    b() {
        A = 0; // A is a variable.
    }
}

  12. 禁止修改const声明的变量

    // bad

const a = 0;
a = 1;

//good

const a = 0;
alert(a);

  13. Symbol函数前不能使用new命令

    // bad

var foo = new Symbol("foo");

//good

var foo = Symbol("foo");

function bar(Symbol) {
    const baz = new Symbol("baz");
}

  14. 不允许使用没有yield的generator 函数

    // bad

function* foo() {
  return 10;
}

//good

function* foo() {
  yield 5;
  return 10;
}

Airbnb规范

  1. 使用const声明只读的常量，使用let声明可变的变量

    // bad

var a = 1;
var b = 4;
if(b > a){
    a += 1;
}

//good

let a = 1;
const b = 2;
if(b > a){
    a += 1;
}

  2. 使用字面量创建对象和数组

    // bad

const item = new Object();
const items = new Array();

//good

const item = {};
const items = [];

  3. 不允许使用关键字作为变量和键值

    // bad

const default = 0;
const superman = {
  default: { clark: 'kent' },
  private: true
};

//good

const defaults = 0;
const superman = {
  defaults: { clark: 'kent' },
  hidden: true,
};

  4. 向数组添加元素时，使用push函数，不允许使用直接赋值的方式

    // bad

let items = [];
items[items.length] = 'zhinanzhen';

//good

let items = [];
items.push('zhinanzhen');

  5. 使用解构赋值的方式复制数组

    // bad

const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

//good

const itemsCopy = [...items];

  6. 对象转数组使用数组的from方法

    
const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

  7. 推荐使用解构存取和多属性对象

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

  8. 数组推荐使用解构赋值

    
const arr = [1, 2, 3, 4];
const [first, second] = arr;

  9. 字符串使用单引号（eslint推荐使用一致的单引号或者双引号）

    
// bad
const name = "zhinanzhen";

// good
const name = 'zhinanzhen';

  10. ***推荐使用模版字符串

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

  11. 推荐使用函数声明代替函数表达式（var声明的函数表达式，函数的声明会被提升，但是函数体不会；函数声明的名称和函数体都会被提升）

    
// bad
const foo = function () {
//doSomething();
};

// good
function foo() {
    const foo = function () {
    //doSomething();
    };
}

  12. 不允许在if，while中声明一个函数

    
// bad
let a = 2;
if (a > 0){
    function foo(){
        //doSomething()
    }
}

  13. 不允许把参数声明为arguments（eslint： 不允许函数的参数重名），且使用rest语法代替arguments

    
// bad
function nope(name, options, arguments) {
  // ...stuff...
}

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

// good
function concatenateAll(...args) {
  return args.join('');
}

  14. 不允许直接给函数的参数赋值

    
// bad
var b = 1;
function count(a = b++) {
  console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3

  15. 在必须使用函数表达式或者传递一个匿名函数时，使用箭头函数

    
// bad
[1, 2, 3].map(function (x) {
  return x * x;
});

// good
[1, 2, 3].map((x) => {
  return x * x;
});

  16. 推荐使用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;
  }
}

  17. 使用extend继承

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

  18. 不要使用通配符import

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

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

  19. 不要在import中直接export

    
// bad
// filename es6.js
export { es6 as default } from './airbnbStyleGuide';

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

  20. 使用高阶函数（map(),reduce()）替代for-of

    
const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}

sum === 15;

// good
let sum = 0;
numbers.forEach((num) => sum += num);
sum === 15;

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;

  21. 访问对象属性使用‘.’，通过变量访问属性时使用中括号‘[]’

    
const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;

function getProp(prop) {
  return luke[prop];
}

const isJedi = getProp('jedi');

  22. 将const和let分组

    
// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

  23. 优先使用 === 和 !== 而不是 == 和 !=.

  24. 条件表达式里面的值使用简写的方式

    // bad
if (name !== '') {
  // ...stuff...
}

// good
if (name) {
  // ...stuff...
}

// bad
if (collection.length > 0) {
  // ...stuff...
}

// good
if (collection.length) {
  // ...stuff...
}

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

    1. 对象：true
    2. Undefined：false
    3. Null ：false
    4. 布尔值 ：布尔的值
    5. 数字 ：+0、-0、或 NaN 算为 false, 否则为 true
    6. 字符串：如果是空字符串 '' 为 false，否则为 true
    7. 数组：true（包括空数组 [] ）

  25. 多行代码使用大括号包裹

    
// bad
if (test)
    return false;
    
function() { return false; }

// good
if (test) return false;

if (test) {
  return false;
}

function() {
  return false;
}

  26. 如果通过 if 和 else 使用多行代码块，把 else 放在 if 代码块关闭括号的同一行。

        
// bad
if (test) {
    thing1();
    thing2();
}
else {
    thing3();
}

// good
if (test) {
    thing1();
    thing2();
} else {
    thing3();
}

  27. *** 使用 /** ... */ 作为多行注释，包含描述、指定所有参数和返回值的类型和值。

    
// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...stuff...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param {String} tag
 * @return {Element} element
 */
function make(tag) {

  // ...stuff...

  return element;
}

  28. 使用 // 作为单行注释。在评论对象上面另起一行使用单行注释。在注释前插入空行。

    
// bad
const active = true;  // is current tab

// good
// is current tab
const active = true;

// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this._type || 'no type';

  return type;
}

// good
function getType() {
  console.log('fetching type...');

  // set the default type to 'no type'
  const type = this._type || 'no type';

  return type;
}

  29. 给注释增加 FIXME 或 TODO 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是给需要实现的功能提供一个解决方式

    // good
class Calculator {
  constructor() {
    // FIXME: shouldn't use a global here
    total = 0;
  }
}

class Calculator {
  constructor() {
    // TODO: total should be configurable by an options param
    this.total = 0;
  }
}

  30. 使用两个空格作为缩进；

  31. 大括号前面使用一个空格；

  32. 在控制语句（if、while 等）的小括号前放一个空格；在函数调用及声明中，不在函数的参数列表前加空格

    
// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}

  33. 使用空格把运算符隔开；

    
// bad
const x=y+5;

// good
const x = y + 5;

  34. 在文件末尾，块儿末，新语句前插入空行插入一个空行

    
// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
const obj = {
  foo() {
  },
  bar() {
  },
};
return obj;

// good
const obj = {
  foo() {
  },

  bar() {
  },
};

return obj;

  35. 不要在行首插入逗号

    
// bad
const story = [
    once
  , upon
  , aTime
];

// good
const story = [
  once,
  upon,
  aTime,
];

  36. 给对象定义属性的时候增加结尾的逗号

    
// bad
const story = [
    firstName: 'Dana',
    lastName: 'Scully',
];

// good
const story = [
    firstName: 'Dana',
    lastName: 'Scully',
];

  37. 分号的使用

    
// bad
(function() {
  const name = 'Skywalker'
  return name
})()

// good
(() => {
  const name = 'Skywalker';
  return name;
})();

// good (防止函数在两个 IIFE 合并时被当成一个参数)
;(() => {
  const name = 'Skywalker';
  return name;
})();

  38. 在语句开始前执行类型转换

    
//  => this.reviewScore = 9;

// bad
const totalScore = this.reviewScore + '';

// good
const totalScore = String(this.reviewScore);

  39. 对数字使用 parseInt 转换，并带上类型转换的基数

    const inputValue = '4';

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);

  40. 在使用长方法链时进行缩进。使用前面的点 . 强调这是方法调用而不是新语句

    // bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
  find('.selected').
    highlight().
    end().
  find('.open').
    updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

  41. 使用具有意义的命名方式

    
// bad
function q() {
  // ...stuff...
}

// good
function query() {
  // ..stuff..
}

  42. 使用驼峰命名对象和函数

    
// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

  43. 使用帕斯卡式（首字母大写）命名构造函数或类

    
// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

  44. 不要使用下划线 _ 结尾或开头来命名属性和方法

    
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';

  45. 不要保存this的引用，使用箭头函数或者bind保存

    
// bad
function foo() {
 const self = this;
 return function() {
   console.log(self);
 };
}

// bad
function foo() {
 const that = this;
 return function() {
   console.log(that);
 };
}

// good
function foo() {
 return () => {
   console.log(this);
 };
}

  46. 如果文件只有一个类，那文件名必须与类名保持一致

    
// file contents
class CheckBox {
 // ...
}
export default CheckBox;

// in some other file
// bad
import CheckBox from './checkBox';

// bad
import CheckBox from './check_box';

// good
import CheckBox from './CheckBox';

  47. 存取函数时使用getVal() 和 setVal('hello')

    // bad
echeng.age();

// good
echeng.getAge();

// bad
echeng.age(25);

// good
echeng.setAge(25);

  48. 属性是布尔值的时候使用isVal() 或 hasVal()

    
// bad
if (!dragon.age()) {
 return false;
}

// good
if (!dragon.hasAge()) {
 return false;
}

  49. set()和get()要保持一致

    
 set(key, val) {
   this[key] = val;
 }

 get(key) {
   return this[key];
 }

  50. 缓存jQuery查询

    
// bad
function setSidebar() {
  $('.sidebar').hide();

  // ...stuff...

  $('.sidebar').css({
    'background-color': 'pink'
  });
}

// good
function setSidebar() {
  const $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...stuff...

  $sidebar.css({
    'background-color': 'pink'
  });
}

  51. 使用 $ 作为存储 jQuery 对象的变量名前缀

    
// bad
const sidebar = $('.sidebar');

// good
const $sidebar = $('.sidebar');

  52. 对DOM查询使用层叠 $('.sidebar ul') 或 父元素 > 子元素 $('.sidebar > ul')的方式

  53. 对有作用域的jQuery对象查询使用 find

    // bad
$('ul', '.sidebar').hide();

// bad
$('.sidebar').find('ul').hide();

// good
$('.sidebar ul').hide();

// good
$('.sidebar > ul').hide();

// good
$sidebar.find('ul').hide();
  54. 原文首创，转载请注明出处。
posted on 2017-11-03 17:24  sophiehui  阅读(439)  评论(0)  编辑  收藏  举报
 
Powered by:
博客园
Copyright © 2024 sophiehui
Powered by .NET 8.0 on Kubernetes