前端工程化——高内聚低耦合与单一设计原则的理解

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在软件开发中，主要是面向对象 的开发设计，所以我们追求代码设计要 高内聚，低耦合；

---

一、内聚 与 耦合 的理解

内聚 是从功能角度来度量模块内的联系，它描述的是模块内的功能联系，模块内各个元素彼此结合的紧密程度。

高内聚是指一个模块是由相关性很强的代码组成，只负责一件事情，也就是常说的单一设计原则。

耦合 是软件结构中各模块之间相互连接的一种度量 ，耦合强弱取决于模块间接口的复杂程度、进入或访问一个模块的点以及通过接口的数据。

简单理解：
内聚就是模块内部之间的联系；
耦合就是模块与模块之间的联系

目的：
提高程序模块的可重用性、移植性。

二、场景例子

1.用户注册。

一般注册会在按钮上绑定一个点击事件回调函数 register()，用于处理注册逻辑。
代码如下（示例）：

function register(data) {
    // 1. 验证用户数据是否合法
    /**
    * 验证账号
    * 验证密码
    * 验证短信验证码
    * 验证身份证
    * 验证邮箱
    */
    // 省略一大堆串 if 判断语句...

    // 2. 如果用户上传了头像，则将用户头像转成 base64 码保存
    /**
    * 新建 FileReader 对象
    * 将图片转换成 base64 码
    */
    // 省略转换代码...

    // 3. 调用注册接口
    // 省略注册代码...
}

这个示例属于很常见的需求，点击一个按钮处理多个逻辑。从代码中也可以发现，这样写的结果就是三个功能耦合在一起。

按照高内聚、低耦合的要求，一个函数应该尽量只做一件事。所以我们可以将函数中的另外两个功能：验证和转换单独提取出来，封装成一个函数。

function register(data) {
    // 1. 验证用户数据是否合法
    verifyUserData()

    // 2. 如果用户上传了头像，则将用户头像转成 base64 码保存
    toBase64()

    // 3. 调用注册接口
    // 省略注册代码...
}

function verifyUserData() {
    /**
    * 验证账号
    * 验证密码
    * 验证短信验证码
    * 验证身份证
    * 验证邮箱
    */
    // 省略一大堆串 if 判断语句...
}

function toBase64() {
    /**
    * 新建 FileReader 对象
    * 将图片转换成 base64 码
    */
    // 省略转换代码...
}