前端質(zhì)量保障的“三層四面”

三層四面.png

一、前端項(xiàng)目代碼中的常見(jiàn)問(wèn)題

1、 凌亂的書(shū)寫(xiě)風(fēng)格，閱讀體驗(yàn)差
2、 低質(zhì)量的編碼，bug 不斷
3、功能不分離，邏輯糅合，難以閱讀和理解

二、保障前端項(xiàng)目編碼質(zhì)量的方法

1. 開(kāi)發(fā)規(guī)范

js 開(kāi)發(fā)規(guī)范

一般前端開(kāi)發(fā)的主要工作都要 js 部分，所以一般前端開(kāi)發(fā)規(guī)范都是對(duì) js 而言的。
認(rèn)可度比較高的有：

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

css 開(kāi)發(fā)規(guī)范

認(rèn)可度比較高的有：

• airbnb css style
• idiomatic css style

2. 使用工具檢查、自動(dòng)矯正與優(yōu)化

盡管有規(guī)范可循，但其實(shí)開(kāi)發(fā)的時(shí)候并不知道自己的代碼是否是符合規(guī)范的，所以就需要工具來(lái)檢查與矯正代碼。

2.1 檢查與自動(dòng)矯正

認(rèn)可度比較高的有：

1. eslint：檢查 js 語(yǔ)法（包括 jsx 語(yǔ)法），然后最大程度的矯正不符合規(guī)范的代碼；
2. stylelint：檢查 css 語(yǔ)法（包括 less, scss 語(yǔ)法），然后最大程度的矯正不符合規(guī)范的代碼。

2.2 代碼優(yōu)化

eslint 與 stylelint 在對(duì)代碼做檢查和自動(dòng)矯正時(shí)，只保證代碼的語(yǔ)法是符合一定的規(guī)范，并不對(duì)代碼的格式做任何優(yōu)化，所以，自動(dòng)矯正后的代碼可能格式會(huì)不太好，閱讀性不太高。

所以，一般會(huì)在對(duì)代碼檢查與自動(dòng)矯正之后做代碼格式優(yōu)化。使用比較多的：prettier.

2.3 強(qiáng)制對(duì)代碼進(jìn)行檢查、自動(dòng)矯正與優(yōu)化

盡管定好了規(guī)范與工具命令，但開(kāi)發(fā)人員完全可以跳過(guò)這些步驟，這尤其是在團(tuán)隊(duì)開(kāi)發(fā)中很難強(qiáng)制其他組員會(huì)去做代碼檢查、自動(dòng)矯正與優(yōu)化。

所以，使用工具強(qiáng)制開(kāi)發(fā)人員對(duì)代碼進(jìn)行檢查、自動(dòng)矯正與優(yōu)化，就顯得很有必要了。
使用比較多的：

• husky：對(duì) git 進(jìn)行 hook，可以在 git 操作之前做一些操作；
• lint-staged：對(duì)當(dāng)前 git 提交的代碼進(jìn)行一些操作。

3.編輯器配置：.editorconfig

有了規(guī)范，也加上了工具做自動(dòng)化代碼檢查、矯正與優(yōu)化，但還有一點(diǎn)需要提及一下，就是在團(tuán)隊(duì)協(xié)作中，每個(gè)開(kāi)發(fā)人員可能使用的編輯器不一樣，編輯器的配置也不一樣，這就導(dǎo)致工具在做格式優(yōu)化的時(shí)候，不同的開(kāi)發(fā)人員中輸出的代碼不一樣。

這就需要配置文件 .editorconfig 去統(tǒng)一每個(gè)開(kāi)發(fā)人員的編輯器配置。更多的編輯器配置規(guī)則，可以查看 http://editorconfig.org.

4. 業(yè)務(wù)邏輯優(yōu)化

上面提到的這些只是風(fēng)格、規(guī)范、語(yǔ)法上的優(yōu)化，但對(duì)編碼質(zhì)量的評(píng)估更多的是在業(yè)務(wù)邏輯具體實(shí)現(xiàn)這一塊。

一般來(lái)說(shuō)，業(yè)務(wù)邏輯實(shí)現(xiàn)的優(yōu)化離不開(kāi)下面幾個(gè)方向：

1. 模塊化：
   • js 的模塊化已經(jīng)很成熟了，目前使用最多的是 commonjs 模塊化規(guī)范和 es6 模塊；
   • css 的模塊化也一直在探索中，之前也專(zhuān)門(mén)寫(xiě)了一篇 CSS 模塊化，可以參考下；
   • html 沒(méi)有模塊化，但是可以將一個(gè)很長(zhǎng)的 html 文件進(jìn)行分塊，參考 html-loader。
2. 組件化：當(dāng)項(xiàng)目變大、變多，很多公共的代碼需要復(fù)用或者跨項(xiàng)目使用的時(shí)候，組件化就變得很必要了，之前也專(zhuān)門(mén)寫(xiě)了一篇 組件化，可以參考下；
3. 邏輯解耦：把一個(gè)復(fù)雜的邏輯，分割成多個(gè)子邏輯，然后將子邏輯串起來(lái)，或者把多個(gè)交叉邏輯的公共部分拆出來(lái)，然后再挨個(gè)串起來(lái)；
4. 功能分塊：細(xì)化一個(gè)一個(gè)的功能為單獨(dú)的模塊。

5. 邏輯解耦

邏輯解耦就是把一個(gè)復(fù)雜的邏輯，分割成多個(gè)子邏輯，或者把多個(gè)交叉邏輯的公共部分拆成單個(gè)邏輯。這樣做的目的是降低應(yīng)用的復(fù)雜度，更據(jù)閱讀性。

6. 功能分塊

細(xì)化功能為單獨(dú)的模塊也是提升代碼質(zhì)量的一個(gè)方式。