[[423366]]

當提到代碼質量，我們可能會想到:代碼風格，命名，內聚，耦合，重復代碼率，圈復雜度等等。當提到代碼優化，我們可能會想到代碼風格規范，高內聚，低耦合，單一職責，開放封閉原則，約定優于配置，單元測試等等。

給你一段代碼，你能簡要扼要的說出當前代碼的質量情況，并提出優化的方向嗎?

如果覺得很難，可以參考 3Rs 軟件架構[1]。

3Rs 軟件架構對代碼質量做了分層，給優化代碼提供了方向：可讀性 => 可重用性 => 可重構。下面我們來具體了解下每層代碼的特點及優化方法。

第 4 個階段: 很難維護的代碼

這階段的代碼很難維護，俗稱shi代碼。這階段的代碼，讀起來和改起來都很難。

這階段的代碼讀起來難。例如：

• 代碼風格不一致。縮進，空格不一致。
• 謎一樣的命名。
• 很長很長的函數。
• 分支很多，嵌套很深的條件語句。

這階段的代碼改起來也難。例如：

• 大量重復代碼，導致一處有問題，要改多處。
• 高耦合的代碼導致，改一個模塊，會改對應的很多關聯模塊。
• 關聯很緊密的代碼，但離的很遠。改起來好累。

第 3 個階段：可讀的代碼(Readability)

這階段的代碼可讀性好。可讀性好換個說法就是讀起來不費腦子。它有以下的特征：

• 一致的代碼風格。空格，縮進，命名風格(駝峰，中劃線等)等在整個項目里是一致的。
• 合理的命名。“看其名而知其意”。
• 必要的注釋。代碼本身無法清晰地闡述作者的意圖時，要寫注釋。
• 沒有代碼行數很多(超過1千行)的功能：文件，組件，函數等。
• 函數的參數數量不超過4個。
• 沒有圈復雜度很高的代碼。圈復雜度高往往意味著分支多或嵌套深。

如何達到

要達到這個階段相對比較容易。

代碼檢查工具能保證代碼風格的統一。代碼檢查工具也能檢查：函數的參數個數，圈復雜度[2]等。工具有: ESLint[3]，CSS Lint[4]等。代碼改動后，必須通過工具檢查通過后，才允許提交。用代碼格式化工具，可以自動修復有代碼風格問題的代碼。工具有 Prettier[5] 等。

這階段最難的就是命名了。好的命名是“看其名而知其意”，是直白的，有意義的。推薦使用故宮命名法[6]。了解更多命名的技巧見這里[7]。

第 2 個階段: 可重用的代碼(Reusability)

這階段的代碼是可重用的代碼。這個階段代碼的特點：

• 單一職責。每個模塊都只有一個職責。
• 不必要的重復代碼很少。重復代碼會導致一處有問題，要改多處。但如果過度追求沒有重復，也會導致可讀性差，不靈活的問題。
• 模塊間是低耦合，高內聚的。

如何達到

要達到這個階段需要在做代碼設計的時候，設計好模塊之間的邊界和 API，做到職責清晰，高內聚，低耦合。達到這個階段的建議：

• 多寫代碼。對之前寫的代碼做復盤。
• 多讀優秀代碼，學習借鑒好的地方。
• 學習設計原則，設計模式。
• 學習一些具體的技術：函數式編程，響應式編程，面向領域編程等等。

第 1 個階段: 可重構的代碼(Refactorability)

這階段的代碼是可重構的。這意味著，當你重構某塊代碼(不修改對外的API)，不改其他代碼，其他代碼仍能正常工作。這個階段的代碼一定是低耦合的。模塊之間的連接就像樂高。

如何達到

要達到這個階段需要：

• 隔離副作用。
• 測試。
• 靜態類型。
• 下面具體來說。

隔離副作用

副作用指修改模塊外的數據。例如：修改全局變量，修改 DOM等。

在模塊代碼中，混入副作用代碼會導致如下的問題：

• 副作用讓代碼變得難以測試。當模塊依賴的外部數據發生變化后，模塊的返回值可能會變化。這讓模塊的返回變得不穩定。
• 副作用會導致模塊間的耦合。如果多個模塊都依賴某個外部數據，那這幾個外部模塊之間是耦合的。多個模塊改都可以改外部數據，數據流很混亂。
• 副作用讓我們的系統變得不可預測。如果一個模塊改了外部數據，可能會影響整個系統。

如何隔離副作用?答案是在統一的地方管理應用的全局數據。比如用 Redux[8] 或 Vuex[9]。

測試

這邊的測試指的是白盒測試。測試可以保證代碼的改動不會影響測試覆蓋部分的功能。

對前端來說，需要寫單元測試，端到端測試。每次提交代碼，所有測試都需要跑過。

靜態類型

使用靜態類型可以規避很多低級的語法和邏輯錯誤，比如參數少傳了。目前前端靜態類型主流是用 TypeScript[10]。

參考資料

[1]3Rs 軟件架構: https://github.com/ryanmcdermott/3rs-of-software-architecture

[2]圈復雜度: http://eslint.cn/docs/rules/complexity

[3]ESLint: https://eslint.org/

[4]CSS Lint: http://csslint.net/

[5]Prettier: https://prettier.io/

[6]故宮命名法: https://juejin.cn/post/6844903913892610061

[7]這里: https://www.yuque.com/fegogogo/fe/wup00n

[8]Redux: https://redux.js.org/

[9]Vuex: https://vuex.vuejs.org/zh/guide/

[10]TypeScript: https://www.typescriptlang.org/