前端代碼評審 Checklist 清單

xzavier 發(fā)布于2019-08-23 18:33 / 2011人閱讀

摘要：從而輔助整個團(tuán)隊提高代碼質(zhì)量統(tǒng)一代碼規(guī)范。如果你的團(tuán)隊還沒有這么一份代碼評審清單，也許這正是你需要的如果你的團(tuán)隊已經(jīng)有了代碼評審參照標(biāo)準(zhǔn)，這份清單也許能起到錦上添花的效果。如果違反這個規(guī)則，那么代碼會很難被測試或者重用。

前言

? 前端團(tuán)隊有評審代碼的要求，但由于每個開發(fā)人員的水平不同，技術(shù)關(guān)注點不同，所以對代碼評審的關(guān)注點不同，為了保證代碼質(zhì)量，團(tuán)隊代碼風(fēng)格統(tǒng)一，特此擬定一份《前端團(tuán)隊代碼評審 CheckList 清單》，這樣代碼評審人員在評審代碼時，可以參照這份清單，對代碼進(jìn)行評審。從而輔助整個團(tuán)隊提高代碼質(zhì)量、統(tǒng)一代碼規(guī)范。如果你的團(tuán)隊還沒有這么一份代碼評審 CheckList 清單，也許這正是你需要的；如果你的團(tuán)隊已經(jīng)有了代碼評審參照標(biāo)準(zhǔn)，這份清單也許能起到錦上添花的效果。

辛苦整理良久，還望手動 Star 鼓勵~
github地址為：https://github.com/fengshi123...，如果喜歡或者有所啟發(fā)，請幫忙給個 star ~，對作者也是一種鼓勵。

一、代碼靜態(tài)檢查工具 1.1、使用 eslint 工具對 javascript 代碼進(jìn)行檢查

? eslint 檢查的規(guī)范繼承自 eslint-config-standard 檢驗規(guī)則，具體的規(guī)則介紹參照鏈接：https://cn.eslint.org/docs/ru... ，這里及以下部分不再重復(fù)介紹這些檢驗規(guī)則。

1.2、使用 stylelint 工具對 css 樣式代碼進(jìn)行檢查

? stylelint 檢查的規(guī)范繼承自 stylelint-config-standard 檢驗規(guī)則，具體的規(guī)則介紹參照鏈接：https://www.npmjs.com/package... ，這里及以下部分不再重復(fù)介紹這些檢驗規(guī)則。

二、命名 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 命名規(guī)范

推薦：

.block__element{} 
.block--modifier{}

2.4、命名符合語義化

命名需要符合語義化，如果函數(shù)命名，可以采用加上動詞前綴：

動詞	含義
can	判斷是否可執(zhí)行某個動作
has	判斷是否含有某個值
is	判斷是否為某個值
get	獲取某個值
set	設(shè)置某個值

推薦：

//是否可閱讀 
function canRead(){ 
   return true; 
} 
//獲取姓名 
function getName{
   return this.name 
}

三、JS 推薦寫法 3.1、每個常量都需命名

每個常量應(yīng)該命名，不然看代碼的人不知道這個常量表示什么意思。

推薦：

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

不推薦：

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

3.2、推薦使用字面量

創(chuàng)建對象和數(shù)組推薦使用字面量，因為這不僅是性能最優(yōu)也有助于節(jié)省代碼量。

推薦：

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

不推薦：

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

3.3、對象設(shè)置默認(rèn)屬性的推薦寫法

推薦：

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、將對象的屬性值保存為局部變量

對象成員嵌套越深，讀取速度也就越慢。所以好的經(jīng)驗法則是：如果在函數(shù)中需要多次讀取一個對象屬性，最佳做法是將該屬性值保存在局部變量中，避免多次查找?guī)淼男阅荛_銷。

推薦：

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、字符串轉(zhuǎn)為整型

當(dāng)需要將浮點數(shù)轉(zhuǎn)換成整型時，應(yīng)該使用Math.floor()或者Math.round()，而不是使用parseInt()將字符串轉(zhuǎn)換成數(shù)字。Math是內(nèi)部對象，所以Math.floor()`其實并沒有多少查詢方法和調(diào)用時間，速度是最快的。

推薦：

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

不推薦：

let num = parseInt("1.6");

3.6、函數(shù)參數(shù)

函數(shù)參數(shù)越少越好，如果參數(shù)超過兩個，要使用 ES6的解構(gòu)語法，不用考慮參數(shù)的順序。

推薦：

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

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

不推薦：

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

3.7、使用參數(shù)默認(rèn)值

使用參數(shù)默認(rèn)值替代使用條件語句進(jìn)行賦值。

推薦：

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

不推薦：

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

3.8、最小函數(shù)準(zhǔn)則

這是一條在軟件工程領(lǐng)域流傳久遠(yuǎn)的規(guī)則。嚴(yán)格遵守這條規(guī)則會讓你的代碼可讀性更好，也更容易重構(gòu)。如果違反這個規(guī)則，那么代碼會很難被測試或者重用。

3.9、不要寫全局方法

在 JavaScript 中，永遠(yuǎn)不要污染全局，會在生產(chǎn)環(huán)境中產(chǎn)生難以預(yù)料的 bug。舉個例子，比如你在 Array.prototype 上新增一個 diff 方法來判斷兩個數(shù)組的不同。而你同事也打算做類似的事情，不過他的 diff 方法是用來判斷兩個數(shù)組首位元素的不同。很明顯你們方法會產(chǎn)生沖突，遇到這類問題我們可以用 ES2015/ES6 的語法來對 Array 進(jìn)行擴展。

推薦：

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、使用多態(tài)替換條件語句

為了讓代碼更簡潔易讀，如果你的函數(shù)中出現(xiàn)了條件判斷，那么說明你的函數(shù)不止干了一件事情，違反了函數(shù)單一原則；并且絕大數(shù)場景可以使用多態(tài)替代

推薦：

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，需要在不使用時進(jìn)行清除。

四、SCSS 推薦寫法 4.1、變量 $ 使用

利用scss中的變量配置，可以進(jìn)行項目的顏色、字體大小統(tǒng)一更改（換膚），有利于后期項目的維護(hù)。

推薦：

$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

4.2、@import 導(dǎo)入樣式文件

scss中的@import規(guī)則在生成css文件時就把相關(guān)文件導(dǎo)入進(jìn)來。這意味著所有相關(guān)的樣式被歸納到了同一個css文件中，而無需發(fā)起額外的下載請求，在構(gòu)建我們自己的組件庫時推薦使用。

@import "./base.scss";
@import "./pagination.scss";
@import "./dialog.scss";
@import "./autocomplete.scss";
@import "./dropdown.scss";
@import "./dropdown-menu.scss";

4.3、局部文件命名的使用

scss局部文件的文件名以下劃線開頭。這樣，scss就不會在編譯時多帶帶編譯這個文件輸出css，而只把這個文件用作導(dǎo)入。

推薦：

不推薦：

5.7、模板中簡單的表達(dá)式

組件模板應(yīng)該只包含簡單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計算屬性或方法。復(fù)雜表達(dá)式會讓你的模板變得不那么聲明式。我們應(yīng)該盡量描述應(yīng)該出現(xiàn)的是什么，而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。

推薦：


{{ normalizedFullName }}

// 復(fù)雜表達(dá)式已經(jīng)移入一個計算屬性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(" ").map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(" ")
  }
}

不推薦：

{{
  fullName.split(" ").map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(" ")
}}

5.8、簡單的計算屬性

應(yīng)該把復(fù)雜計算屬性分割為盡可能多的更簡單的屬性。

推薦：

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

不推薦：

computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

5.9、指令縮寫

指令推薦都使用縮寫形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)。

推薦：

不推薦：

5.10、標(biāo)簽順序保持一致

單文件組件應(yīng)該總是讓標(biāo)簽順序保持為

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端代碼評審 Checklist 清單

相關(guān)文章

前端開發(fā)清單

前端開發(fā)清單

前端開發(fā)清單

平時積累的前端資源，持續(xù)更新中。。。

發(fā)表評論

0條評論

xzavier

男|高級講師

TA的文章

騰訊云李叢：基礎(chǔ)架構(gòu)演進(jìn)應(yīng)當(dāng)為整個社會運作效率的提升作出貢獻(xiàn)_云資訊

hostyun，中國香港大帶寬便宜VPS，三網(wǎng)直連(含cn2)，低至18元/月，可付費自主切換IP

前端學(xué)習(xí)資源

Vue代碼模塊定位插件vue-component-finder介紹

cad快速看圖軟件中怎么快速繪制一個圓？

2017美團(tuán)點評面試實習(xí)經(jīng)歷

前端監(jiān)控實踐——FMP的智能獲取算法

Zepto 源碼分析 4 - 核心模塊入口

最新活動