2022-03-10 [总结]JS的常见设计模式的定义和用法(待编辑)-优快云博客

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/123413893

0.概念

1.定义

设计模式是一套多人知晓,经过分类,反复使用的代码设计经验的总结

2.使用目的

增加代码的复用性,易读性,可靠性
使代码的编写真正的工程化

3.种类(23种):

一.创建型模式: 对象实例化的模式，创建型模式用于解耦对象的实例化过程。

单例模式(Singleton): 某个类只能有一个实例，提供一个全局的访问点。
工厂方法模式(FactoryMethod): 一个工厂类根据传入的参量决定创建出哪一种产品类的实例。
抽象工厂模式(AbstractFactory): 创建相关或依赖对象的家族，而无需明确指定具体类。
原型模式(Prototype): 通过复制现有的实例来创建新的实例。
创建者模式(Builder): 封装一个复杂对象的创建过程，并可以按步骤构造。

二.结构性模式: 把类或对象结合在一起形成一个更大的结构。

组合模式(Composite): 将对象组合成树形结构以表示“部分-整体”的层次结构。
适配器模式(Adapter): 将一个类的方法接口转换成客户希望的另一个接口。
装饰模式(Decorator): 动态的给对象添加新的功能。
外观模式(Facade): 对外提供一个统一的方法，来访问子系统中的一群接口。
享元模式(Flyweight): 通过共享技术来有效的支持大量细粒度的对象。
代理模式(Proxy): 为其它对象提供一个代理以便控制这个对象的访问。
桥接模式(Bridge): 将抽象部分和它的实现部分分离，使它们都可以独立的变化。

三.行为模式: 类和对象如何交互，及划分责任和算法。

观察者模式(Observer): 对象间的一对多的依赖关系。
访问者模式(Visitor): 不改变数据结构的前提下，增加作用于一组对象元素的新功能。
中介者模式(Mediator): 用一个中介对象来封装一系列的对象交互。
命令模式(Command): 将命令请求封装为一个对象，使得可以用不同的请求来进行参数化。
解释器模式(Interpreter): 给定一个语言，定义它的文法的一种表示，并定义一个解释器。
备忘录模式(Memento): 在不破坏封装的前提下，保持对象的内部状态。
状态模式(State): 允许一个对象在其对象内部状态改变时改变它的行为。
策略模式(Strategy): 定义一系列算法，把他们封装起来，并且使它们可以相互替换。
模板方法模式(TemplateMethod): 定义一个算法结构，而将一些步骤延迟到子类实现。
责任链模式(Chain of Responsibility): 将请求的发送者和接收者解耦，使的多个对象都有处理这个请求的机会。
迭代器模式(Iterator): 一种遍历访问聚合对象中各个元素的方法，不暴露该对象的内部结构。
4.常用设计模式(重要)
单例模式
组合模式
观察者模式
代理模式
适配器模式
工厂模式
策略模式
MVC模式(MV*m模式)

1.单例模式:单个实例只有一个对象,多次创建也只返回一个对象

无论调用多少次toast方法都只创建一个DOM元素
(只控制其显示与隐藏,不需要多次创建与销毁)

使用场景举例

创建一个信息提示框,每次执行toast方法,可采取单例模式,

单例模式代码

/*单例模式:在内存中会且仅会创建一次对象*/
//普通模式的对象时唯一的
function Fn() {}
var f1 = new Fn(),f2 = new Fn();
console.log(f1 == f2);//false
//改成单例模式
var obj = {};
function Fn() {return obj;}
var f1 = new Fn(),f2 = new Fn();
console.log(f1 == f2);//true

进度(待编辑)
https://blog.youkuaiyun.com/weixin_41192489/article/details/116131865

2.组合模式(理解)

定义

组合模式就是用小的对象来构建更大的对象

形式

把多个对象组成树状结构来表示局部与整体,使得用户可以操作
单个对象和对象的组合
组合模式的节点:节点需要分成两个对象:组合对象和叶对象,实现同一个抽象类,
因此这两者的结构相同的

用途

用来创建动态的HTML结构

 1.存在一批组织成某种层次体系的对象
2.希望对这批对象或者其中某一部分对象实施一个操作

组合模式擅长对大批量对象进行操作，转为组织这类对象把操作从一个层次向下一个层次传递设计，借此可以弱化对象间的耦合关系并且可以互换使用一些类或者实例，使代码模块化程度更高，维护更容易。

优点

1.可以以相同的方法处理对象的集合与特定的子对象,即
组合对象与组成该对象的对象可以使用同一操作;
(对组合对象的操作会向下传递到所有的组成对象.使它们也能使用此操作)

2.可以将对象组成树状结构,使整棵树可被遍历;
所有组合对象都实现同一个方法(用来获取其子对象)
借助该方法可以隐藏细节,组织子对象,使子对象内部的实现不形成依赖

组合模式代码

//组合对象
var Folder = function(name) {
   this.name = name;
   this.files = [];
};
Folder.prototype.add = function(file) {
   this.files.push(file);
};
Folder.prototype.scan = function() {
   console.log("开始扫描文件夹:" + this.name);
   for (var i = 0, j = this.files.length; i < j; i++) {
       this.files[i].scan();
   }
};
//叶对象
var File = function(name) {
   this.name = name;
};
File.prototype.add = function() {
   throw new Error("文件下不能添加文件");
}
File.prototype.scan = function() {
   console.log("开始扫描文件夹:" + this.name);
};
var folder = new Folder("计算机");
var folder1 = new Folder("系统");
var folder2 = new Folder("学习");
var file1 = new File("system32");
var file2 = new File("system64");
var file3 = new File("react");
var file4 = new File("vue");
folder.add(folder1);
folder.add(folder2);
folder1.add(file1);
folder1.add(file2);
folder2.add(file3);
folder2.add(file4);
folder.scan(); //调用扫描方法
/*输出结果:*/
// 开始扫描文件夹:计算机
// 开始扫描文件夹:系统
// 开始扫描文件夹:system32.config
// 开始扫描文件夹:system64.config
// 开始扫描文件夹:学习
// 开始扫描文件夹:react
// 开始扫描文件夹:vue

3.观察者模式

4.代理模式

5.适配器模式

6.工厂模式

7.策略模式

8.MVC模式(MVVM模式)

M:model 管理数据:按照要求取出数据
V:view 管理视图:用户直观看到的东西
C:controller 管理控制器:想想队里向系统发出