前端代码评审 Checklist 清单

透明胡子
158 阅读5分钟

前言

​ 前端团队有评审代码的要求，但由于每个开发人员的水平不同，技术关注点不同，所以对代码评审的关注点不同，为了保证代码质量，团队代码风格统一，特此拟定一份《前端团队代码评审 CheckList 清单》，这样代码评审人员在评审代码时，可以参照这份清单，对代码进行评审。从而辅助整个团队提高代码质量、统一代码规范。如果你的团队还没有这么一份代码评审 CheckList 清单，也许这正是你需要的；如果你的团队已经有了代码评审参照标准，这份清单也许能起到锦上添花的效果。

辛苦整理良久，如果喜欢或者有所启发，请帮忙给个 Star ~，对作者也是一种鼓励。

一、代码静态检查工具

1.1、使用 eslint 工具对 javascript 代码进行检查

​ eslint 检查的规范继承自 eslint-config-standard 检验规则，具体的规则介绍参照链接：cn.eslint.org/docs/rules/ ，这里及以下部分不再重复介绍这些检验规则。

1.2、使用 stylelint 工具对 css 样式代码进行检查

​ stylelint 检查的规范继承自 stylelint-config-standard 检验规则，具体的规则介绍参照链接：www.npmjs.com/package/sty… ，这里及以下部分不再重复介绍这些检验规则。

二、命名

2.1、JS 采用 Camel Case 小驼峰式命名

推荐：

   studentInfot

2.2、避免名称冗余

推荐：

const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

不推荐：

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

2.3、CSS 类名采用 BEM 命名规范

推荐：

.block__element{} 
.block--modifier{}

2.4、命名符合语义化

命名需要符合语义化，如果函数命名，可以采用加上动词前缀：

动词含义
can判断是否可执行某个动作
has判断是否含有某个值
is判断是否为某个值
get获取某个值
set设置某个值

推荐：

//是否可阅读 
function canRead(){ 
   return true; 
} 
//获取姓名 
function getName{
   return this.name 
}

三、JS 推荐写法

3.1、每个常量都需命名

每个常量应该命名，不然看代码的人不知道这个常量表示什么意思。

推荐：

const COL_NUM = 10;
let row = Math.ceil(num/COL_NUM);

不推荐：

let row = Math.ceil(num/10);

3.2、推荐使用字面量

创建对象和数组推荐使用字面量，因为这不仅是性能最优也有助于节省代码量。

推荐：

let obj = {   
     name:'tom',     
     age:15,     
     sex:'男' 
}

不推荐：

let obj = {};
obj.name = 'tom';
obj.age = 15;
obj.sex = '男';

3.3、对象设置默认属性的推荐写法

推荐：

const menuConfig = {
  title: "Order",
  // User did not include 'body' key
  buttonText: "Send",
  cancellable: true
};

function createMenu(config) {
  config = Object.assign(
    {
      title: "Foo",
      body: "Bar",
      buttonText: "Baz",
      cancellable: true
    },
    config
  );

  // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}

createMenu(menuConfig);

不推荐：

const menuConfig = {
  title: null,
  body: "Bar",
  buttonText: null,
  cancellable: true
};

function createMenu(config) {
  config.title = config.title || "Foo";
  config.body = config.body || "Bar";
  config.buttonText = config.buttonText || "Baz";
  config.cancellable =
    config.cancellable !== undefined ? config.cancellable : true;
}

createMenu(menuConfig);

3.4、将对象的属性值保存为局部变量

对象成员嵌套越深，读取速度也就越慢。所以好的经验法则是：如果在函数中需要多次读取一个对象属性，最佳做法是将该属性值保存在局部变量中，避免多次查找带来的性能开销。

推荐：

let person = {
    info:{
        sex:'男'
    }
}
function  getMaleSex(){
    let sex = person.info.sex;
    if(sex === '男'){
        console.log(sex)
    }
}

不推荐：

let person = {
    info:{
        sex:'男'
    }
}
function  getMaleSex(){
    if(person.info.sex === '男'){
        console.log(person.info.sex)
    }
}

3.5、字符串转为整型

当需要将浮点数转换成整型时，应该使用Math.floor()或者Math.round()，而不是使用parseInt()将字符串转换成数字。Math是内部对象，所以Math.floor()`其实并没有多少查询方法和调用时间，速度是最快的。

推荐：

let num = Math.floor('1.6');

不推荐：

let num = parseInt('1.6');

3.6、函数参数

函数参数越少越好，如果参数超过两个，要使用 ES6的解构语法，不用考虑参数的顺序。

推荐：

function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: 'Foo',
  body: 'Bar',
  buttonText: 'Baz',
  cancellable: true
});

不推荐：

function createMenu(title, body, buttonText, cancellable) {
  // ...
}

3.7、使用参数默认值

使用参数默认值 替代 使用条件语句进行赋值。

推荐：

function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

不推荐：

function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}

3.8、最小函数准则

这是一条在软件工程领域流传久远的规则。严格遵守这条规则会让你的代码可读性更好，也更容易重构。如果违反这个规则，那么代码会很难被测试或者重用 。

3.9、不要写全局方法

在 JavaScript 中，永远不要污染全局，会在生产环境中产生难以预料的 bug。举个例子，比如你在 Array.prototype 上新增一个 diff 方法来判断两个数组的不同。而你同事也打算做类似的事情，不过他的 diff 方法是用来判断两个数组首位元素的不同。很明显你们方法会产生冲突，遇到这类问题我们可以用 ES2015/ES6 的语法来对 Array 进行扩展。

推荐:

class SuperArray extends Array {
  diff(comparisonArray) {
    const hash = new Set(comparisonArray);
    return this.filter(elem => !hash.has(elem));        
  }
}

不推荐：

Array.prototype.diff = function diff(comparisonArray) {
  const hash = new Set(comparisonArray);
  return this.filter(elem => !hash.has(elem));
};

3.10、推荐函数式编程

函数式变编程可以让代码的逻辑更清晰更优雅，方便测试。

推荐：

const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];
let totalOutput = programmerOutput
  .map(output => output.linesOfCode)
  .reduce((totalLines, lines) => totalLines + lines, 0)

不推荐：

 const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
  totalOutput += programmerOutput[i].linesOfCode;
}

3.11、使用多态替换条件语句

为了让代码更简洁易读，如果你的函数中出现了条件判断，那么说明你的函数不止干了一件事情，违反了函数单一原则 ；并且绝大数场景可以使用多态替代

推荐：

class Airplane {
  // ...
}
// 波音777
class Boeing777 extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getPassengerCount();
  }
}
// 空军一号
class AirForceOne extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude();
  }
}
// 赛纳斯飞机
class Cessna extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getFuelExpenditure();
  }
}

不推荐：

class Airplane {
  // ...

  // 获取巡航高度
  getCruisingAltitude() {
    switch (this.type) {
      case '777':
        return this.getMaxAltitude() - this.getPassengerCount();
      case 'Air Force One':
        return this.getMaxAltitude();
      case 'Cessna':
        return this.getMaxAltitude() - this.getFuelExpenditure();
    }
  }
}

3.12、定时器是否清除

代码中使用了定时器 setTimeout 和 setInterval，需要在不使用时进行清除。

转自

avatar
文章
阅读
粉丝