建站
咨詢
售后
建站咨詢
新聞中心
當(dāng)提到代碼質(zhì)量，我們可能會(huì)想到:代碼風(fēng)格，命名，內(nèi)聚，耦合，重復(fù)代碼率，圈復(fù)雜度等等。當(dāng)提到代碼優(yōu)化，我們可能會(huì)想到代碼風(fēng)格規(guī)范，高內(nèi)聚，低耦合，單一職責(zé)，開放封閉原則，約定優(yōu)于配置，單元測(cè)試等等。
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比三水網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式三水網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋三水地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。
給你一段代碼，你能簡(jiǎn)要扼要的說出當(dāng)前代碼的質(zhì)量情況，并提出優(yōu)化的方向嗎?
如果覺得很難，可以參考 3Rs 軟件架構(gòu)[1]。
3Rs 軟件架構(gòu)對(duì)代碼質(zhì)量做了分層，給優(yōu)化代碼提供了方向：可讀性 => 可重用性 => 可重構(gòu)。下面我們來具體了解下每層代碼的特點(diǎn)及優(yōu)化方法。
第 4 個(gè)階段: 很難維護(hù)的代碼
這階段的代碼很難維護(hù)，俗稱shi代碼。這階段的代碼，讀起來和改起來都很難。
這階段的代碼讀起來難。例如：
- 代碼風(fēng)格不一致?？s進(jìn)，空格不一致。
- 謎一樣的命名。
- 很長(zhǎng)很長(zhǎng)的函數(shù)。
- 分支很多，嵌套很深的條件語句。
這階段的代碼改起來也難。例如：
- 大量重復(fù)代碼，導(dǎo)致一處有問題，要改多處。
- 高耦合的代碼導(dǎo)致，改一個(gè)模塊，會(huì)改對(duì)應(yīng)的很多關(guān)聯(lián)模塊。
- 關(guān)聯(lián)很緊密的代碼，但離的很遠(yuǎn)。改起來好累。
第 3 個(gè)階段：可讀的代碼(Readability)
這階段的代碼可讀性好?？勺x性好換個(gè)說法就是讀起來不費(fèi)腦子。它有以下的特征：
- 一致的代碼風(fēng)格?？崭瘢s進(jìn)，命名風(fēng)格(駝峰，中劃線等)等在整個(gè)項(xiàng)目里是一致的。
- 合理的命名。“看其名而知其意”。
- 必要的注釋。代碼本身無法清晰地闡述作者的意圖時(shí)，要寫注釋。
- 沒有代碼行數(shù)很多(超過1千行)的功能：文件，組件，函數(shù)等。
- 函數(shù)的參數(shù)數(shù)量不超過4個(gè)。
- 沒有圈復(fù)雜度很高的代碼。圈復(fù)雜度高往往意味著分支多或嵌套深。
如何達(dá)到
要達(dá)到這個(gè)階段相對(duì)比較容易。
代碼檢查工具能保證代碼風(fēng)格的統(tǒng)一。代碼檢查工具也能檢查：函數(shù)的參數(shù)個(gè)數(shù)，圈復(fù)雜度[2]等。工具有: ESLint[3]，CSS Lint[4]等。代碼改動(dòng)后，必須通過工具檢查通過后，才允許提交。用代碼格式化工具，可以自動(dòng)修復(fù)有代碼風(fēng)格問題的代碼。工具有 Prettier[5] 等。
這階段最難的就是命名了。好的命名是“看其名而知其意”，是直白的，有意義的。推薦使用故宮命名法[6]。了解更多命名的技巧見這里[7]。
第 2 個(gè)階段: 可重用的代碼(Reusability)
這階段的代碼是可重用的代碼。這個(gè)階段代碼的特點(diǎn)：
- 單一職責(zé)。每個(gè)模塊都只有一個(gè)職責(zé)。
- 不必要的重復(fù)代碼很少。重復(fù)代碼會(huì)導(dǎo)致一處有問題，要改多處。但如果過度追求沒有重復(fù)，也會(huì)導(dǎo)致可讀性差，不靈活的問題。
- 模塊間是低耦合，高內(nèi)聚的。
如何達(dá)到
要達(dá)到這個(gè)階段需要在做代碼設(shè)計(jì)的時(shí)候，設(shè)計(jì)好模塊之間的邊界和 API，做到職責(zé)清晰，高內(nèi)聚，低耦合。達(dá)到這個(gè)階段的建議：
- 多寫代碼。對(duì)之前寫的代碼做復(fù)盤。
- 多讀優(yōu)秀代碼，學(xué)習(xí)借鑒好的地方。
- 學(xué)習(xí)設(shè)計(jì)原則，設(shè)計(jì)模式。
- 學(xué)習(xí)一些具體的技術(shù)：函數(shù)式編程，響應(yīng)式編程，面向領(lǐng)域編程等等。
第 1 個(gè)階段: 可重構(gòu)的代碼(Refactorability)
這階段的代碼是可重構(gòu)的。這意味著，當(dāng)你重構(gòu)某塊代碼(不修改對(duì)外的API)，不改其他代碼，其他代碼仍能正常工作。這個(gè)階段的代碼一定是低耦合的。模塊之間的連接就像樂高。
如何達(dá)到
要達(dá)到這個(gè)階段需要：
- 隔離副作用。
- 測(cè)試。
- 靜態(tài)類型。
- 下面具體來說。
隔離副作用
副作用指修改模塊外的數(shù)據(jù)。例如：修改全局變量，修改 DOM等。
在模塊代碼中，混入副作用代碼會(huì)導(dǎo)致如下的問題：
- 副作用讓代碼變得難以測(cè)試。當(dāng)模塊依賴的外部數(shù)據(jù)發(fā)生變化后，模塊的返回值可能會(huì)變化。這讓模塊的返回變得不穩(wěn)定。
- 副作用會(huì)導(dǎo)致模塊間的耦合。如果多個(gè)模塊都依賴某個(gè)外部數(shù)據(jù)，那這幾個(gè)外部模塊之間是耦合的。多個(gè)模塊改都可以改外部數(shù)據(jù)，數(shù)據(jù)流很混亂。
- 副作用讓我們的系統(tǒng)變得不可預(yù)測(cè)。如果一個(gè)模塊改了外部數(shù)據(jù)，可能會(huì)影響整個(gè)系統(tǒng)。
如何隔離副作用?答案是在統(tǒng)一的地方管理應(yīng)用的全局?jǐn)?shù)據(jù)。比如用 Redux[8] 或 Vuex[9]。
測(cè)試
這邊的測(cè)試指的是白盒測(cè)試。測(cè)試可以保證代碼的改動(dòng)不會(huì)影響測(cè)試覆蓋部分的功能。
對(duì)前端來說，需要寫單元測(cè)試，端到端測(cè)試。每次提交代碼，所有測(cè)試都需要跑過。
靜態(tài)類型
使用靜態(tài)類型可以規(guī)避很多低級(jí)的語法和邏輯錯(cuò)誤，比如參數(shù)少傳了。目前前端靜態(tài)類型主流是用 TypeScript[10]。
參考資料
[1]3Rs 軟件架構(gòu): https://github.com/ryanmcdermott/3rs-of-software-architecture
[2]圈復(fù)雜度: 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/
網(wǎng)站名稱：代碼質(zhì)量的四個(gè)階段之3Rs軟件架構(gòu)介紹
文章轉(zhuǎn)載：http://m.5511xx.com/article/ccscidd.html
