代码质量的四个阶段之3Rs软件架构介绍

当提到代码质量，代码我们可能会想到:代码风格，质量之命名，阶段件架内聚，构介耦合，代码重复代码率，质量之圈复杂度等等。阶段件架当提到代码优化，构介我们可能会想到代码风格规范，代码高内聚，质量之低耦合，阶段件架单一职责，构介开放封闭原则，代码约定优于配置，质量之单元测试等等。阶段件架

给你一段代码，你能简要扼要的说出当前代码的质量情况，并提出优化的方向吗?

如果觉得很难，可以参考 3Rs 软件架构[1]。

3Rs 软件架构对代码质量做了分层，给优化代码提供了方向：可读性 => 可重用性 => 可重构。下面我们来具体了解下每层代码的特点及优化方法。

第 4 个阶段: 很难维护的代码

这阶段的代码很难维护，俗称shi代码。这阶段的代码，读起来和改起来都很难。

这阶段的免费信息发布网代码读起来难。例如：

这阶段的代码改起来也难。例如：

第 3 个阶段：可读的代码(Readability)

这阶段的代码可读性好。可读性好换个说法就是读起来不费脑子。它有以下的特征：

如何达到

要达到这个阶段相对比较容易。

代码检查工具能保证代码风格的统一。代码检查工具也能检查：函数的参数个数，圈复杂度[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/

最新评论