前端质量保障的“三层四面”

三层四面.png

一、前端项目代码中的常见问题

1、 凌乱的书写风格，阅读体验差
2、 低质量的编码，bug 不断
3、功能不分离，逻辑糅合，难以阅读和理解

二、保障前端项目编码质量的方法

1. 开发规范

js 开发规范

一般前端开发的主要工作都要 js 部分，所以一般前端开发规范都是对 js 而言的。
认可度比较高的有：

• airbnb js style
• google js style
• idiomatic js style
• standard js style

css 开发规范

认可度比较高的有：

• airbnb css style
• idiomatic css style

2. 使用工具检查、自动矫正与优化

尽管有规范可循，但其实开发的时候并不知道自己的代码是否是符合规范的，所以就需要工具来检查与矫正代码。

2.1 检查与自动矫正

认可度比较高的有：

1. eslint：检查 js 语法（包括 jsx 语法），然后最大程度的矫正不符合规范的代码；
2. stylelint：检查 css 语法（包括 less, scss 语法），然后最大程度的矫正不符合规范的代码。

2.2 代码优化

eslint 与 stylelint 在对代码做检查和自动矫正时，只保证代码的语法是符合一定的规范，并不对代码的格式做任何优化，所以，自动矫正后的代码可能格式会不太好，阅读性不太高。

所以，一般会在对代码检查与自动矫正之后做代码格式优化。使用比较多的：prettier.

2.3 强制对代码进行检查、自动矫正与优化

尽管定好了规范与工具命令，但开发人员完全可以跳过这些步骤，这尤其是在团队开发中很难强制其他组员会去做代码检查、自动矫正与优化。

所以，使用工具强制开发人员对代码进行检查、自动矫正与优化，就显得很有必要了。
使用比较多的：

• husky：对 git 进行 hook，可以在 git 操作之前做一些操作；
• lint-staged：对当前 git 提交的代码进行一些操作。

3.编辑器配置：.editorconfig

有了规范，也加上了工具做自动化代码检查、矫正与优化，但还有一点需要提及一下，就是在团队协作中，每个开发人员可能使用的编辑器不一样，编辑器的配置也不一样，这就导致工具在做格式优化的时候，不同的开发人员中输出的代码不一样。

这就需要配置文件 .editorconfig 去统一每个开发人员的编辑器配置。更多的编辑器配置规则，可以查看 http://editorconfig.org.

4. 业务逻辑优化

上面提到的这些只是风格、规范、语法上的优化，但对编码质量的评估更多的是在业务逻辑具体实现这一块。

一般来说，业务逻辑实现的优化离不开下面几个方向：

1. 模块化：
   • js 的模块化已经很成熟了，目前使用最多的是 commonjs 模块化规范和 es6 模块；
   • css 的模块化也一直在探索中，之前也专门写了一篇 CSS 模块化，可以参考下；
   • html 没有模块化，但是可以将一个很长的 html 文件进行分块，参考 html-loader。
2. 组件化：当项目变大、变多，很多公共的代码需要复用或者跨项目使用的时候，组件化就变得很必要了，之前也专门写了一篇 组件化，可以参考下；
3. 逻辑解耦：把一个复杂的逻辑，分割成多个子逻辑，然后将子逻辑串起来，或者把多个交叉逻辑的公共部分拆出来，然后再挨个串起来；
4. 功能分块：细化一个一个的功能为单独的模块。

5. 逻辑解耦

逻辑解耦就是把一个复杂的逻辑，分割成多个子逻辑，或者把多个交叉逻辑的公共部分拆成单个逻辑。这样做的目的是降低应用的复杂度，更据阅读性。

6. 功能分块

细化功能为单独的模块也是提升代码质量的一个方式。