【JavaScript 设计模式】设计模式总览

短命女 2022-12-02 15:05 105阅读 0赞

### 目录 ###

*   *   *   *  1. 什么是设计模式？
             *  2. 设计原则概述
             *  3. 设计模式核心思想
             *  4. 设计模式分类

#### 1. 什么是设计模式？ ####

设计模式是一套被反复使用、多数人知晓、经过分类编目的、代码设计经验的总结。它是为了可重用代码，让代码更容易的被他人理解并保证代码的可靠性。

就像是我们在做数学题的时候，已知直角三角形两边长，求另一边，我们会直接用勾股定理，而不会去证明为什么勾股定理是成立的。所以，设计模式实际上是“拿来主义”在软件领域的贯彻实践，它是一套现成的工具，拿来即用。

下面来看一下设计模式的设计原则。

#### 2. 设计原则概述 ####

设计原则是设计模式的指导理论，它可以帮助我们规避不良的软件设计。设计模式遵循SOLID原则，SOLID 指代的五个基本原则分别是：

*  单一功能原则（Single Responsibility Principle）
 *  开放封闭原则（Opened Closed Principle）
 *  里式替换原则（Liskov Substitution Principle）
 *  接口隔离原则（Interface Segregation Principle）
 *  依赖反转原则（Dependency Inversion Principle）

这五个基本原则看起来挺高大上的，实际上并不是很难。而且JavaScript的设计模式主要围绕**单一功能原则**和**开放封闭原则**展开：

*  **单一功能原则：** 官方的说法是“规定每个类都应该有一个单一的功能，并且该功能应该由这个类完全封装起来”。简单来说，可以理解为不要让一个函数/类做太多事情，而应该进行合理的功能拆分，并且每部分都保持独立。
 *  **开放封闭原则**：官方的说法是“软件实体应该是可扩展，而不可修改的。也就是说，**对扩展是开放的，而对修改是封闭的**”。 简单来说，我们设计一个功能时，需要尽可能地区分变化的部分与稳定的部分，进而做到将变与不变分离（尤其是要做到封装变化的部分），达到降低耦合度的目的（在增加需求时，扩展新代码，而非修改已有代码）。

下面我们看要个一个Promise的例子：

function loadImg (src){ 
    	let promise = new Promise( (resolve, reject) => { 
    		let img = document.createElement('img')
    		img.onload = function(){ 
    			resolve(img)
    		}
    		img.onerror = function(){ 
    			reject('加载失败')
    		}
    		img.src = src
    	}
    	return promise
    }
    
    let src = './pic.jpg'
    let result = loadImg(src)
    
    result.then( (img) => { 
    	console.log(`width: ${ img.width}`)
    }).then( (img) => { 
    	console.log(`height: ${ img.height}`)
    }).catch((error) => { 
    	console.log(error)
    })

在这个例子中，我们创建了一个Promise异步图片的加载任务，并且打印图片的宽和高，以及错误的捕获，它符合以下两条原则：

*  单一职责原则：每一个then中值需做好自己的事。
 *  开放封闭原则：如果新增需求，就可以继续加then，而基本不用动之前的两个then。

#### 3. 设计模式核心思想 ####

设计模式出现的背景，是软件设计的复杂度日益飙升。软件设计越来越复杂的“罪魁祸首”，就是变化。

这一点相信大家不难理解——如果说我们写一个业务，这个业务不需要更新迭代，初始版本是 1.0，10 年后还是 1.0，不接受任何迭代和优化，那么这个业务几乎可以随便写。反正只要实现功能就行了，完全不需要考虑可维护性、可扩展性。

但在实际开发中，不发生变化的代码可以说是不存在的。我们能做的只有将这个变化造成的影响最小化 —— **将变与不变分离，确保变化的部分灵活、不变的部分稳定。**

这个过程，就叫“封装变化”；这样的代码，就是我们所谓的“健壮”的代码，它可以经得起变化的考验。而设计模式出现的意义，就是帮我们写出这样的代码。

#### 4. 设计模式分类 ####

根据上面的设计模式，总共提出了23种设计模式，并按照创建型、行为型、结构型进行划分，如下：  
![在这里插入图片描述][20200831171655295.png]  
虽然有这23种设计模式，但是前端常用到的主要有以下几种：

*  [工厂模式][Link 1]
 *  [单例模式][Link 2]
 *  原型模式
 *  [装饰器模式][Link 3]
 *  适配器模式
 *  代理模式
 *  策略模式
 *  状态模式
 *  [观察者模式/发布订阅模式][Link 4]
 *  迭代器模式

注：点击链接即可查看对应设计模式详解，持续更新！

[20200831171655295.png]: /images/20221123/44ddfde9865a4148901491aa3dd1d03c.png?
[Link 1]: https://cuggz.blog.csdn.net/article/details/108326359
[Link 2]: https://cuggz.blog.csdn.net/article/details/108332671
[Link 3]: https://cuggz.blog.csdn.net/article/details/108552192
[Link 4]: https://cuggz.blog.csdn.net/article/details/108438588