根据用途和分类可以将设计模式分为以下几类：
1.创建模式（更好的封装创建过程，标准化接口）
工厂 单例
在工厂过程中实现复杂的创建过程，暴露标准化的接口。
2.创建完成后，更好的组织类来变成一个更大的结构
适配器 装饰器
3.类和类之间的协同
观察者， 发布订阅，策略
创建型：
工厂模式-生产同类型的产品 （如支付方式注册到工厂来创建实例）
建造者模式-对于已经独立模块的组装或者拆分到一起来使用（比如打包售卖皮肤和商品道具）
单例模式-唯一实例全局共享状态和数据（如vue的状态管理，websocket实例）
结构型：
适配器模式-不改变原有功能，只是中间抽象出一层来进行兼容适配（比如浏览器的事件管理触发判断，适配不同的地图厂商来达到切换地图的功能，重点不同版本的API接口适配,可以用到灰度发布上）
装饰器模式-会在能力上进行提升，动态的为对象添加新功能比如@log这样的而不改变原有结构
使用场景：
对于基础组件的功能扩展
高阶组件
image.png
image.png
11
image.png
代理模式：（vue3的proxy）
引入代理对象来间接实现对真实对象的访问
访问控制： 过滤掉一些非法的请求
功能增强：不修改原有对象（就像委托人去办理业务一样），扩展一些能力
应用场景：
图片预加载 虚拟代理
image.png
image.png
image.png
微前端中：代理沙箱，代理真实window 实现子应用的隔离机制，防止全局污染
沙箱
image.png
行为型：高效沟通
观察者模式
观察者要提供注册和取消方法，被观察者（主题），状态发生变化时要及时通知观察者更新
redux主要核心方法：
订阅subscribe,派发dispatch,获取最新状态getState
image.png
发布订阅模式-1对多，依赖的订阅者都会收到消息
解耦了发布者和订阅者
image.png
publisher,subscriber,enventBus
publisher发布消息
subscribe接收特定消息处理
image.png
补充策略模式的概念：
一、策略模式概念
策略模式（Strategy Pattern） 是一种行为设计模式，它定义了一系列算法，将每个算法封装起来，使它们可以互相替换，且算法的变化不会影响使用算法的客户端。
核心思想
将算法从使用它的上下文中分离出来
避免使用大量的if-else或switch-case语句
提高代码的可维护性和可扩展性
三个主要角色
Context（上下文）：持有一个策略对象的引用
Strategy（策略接口）：定义所有支持的算法的公共接口
ConcreteStrategy（具体策略）：实现了策略接口的具体算法
前端应用场景：
1. 表单验证策略
场景：根据不同字段类型应用不同的验证规则
思路：
1.邮箱，电话，姓名等的常规校验实现自己的策略类继承自基础的策略类
2.实现一个抽象层的类FormValidator，负责构造 constructor() {
this.strategies = new Map();
}，同时还有添加addfiled类，
具体代码如下：
// 验证策略接口
class ValidationStrategy {
validate(value) {
throw new Error("validate() must be implemented");
}
}
// 具体验证策略
class EmailValidation extends ValidationStrategy {
validate(value) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return {
isValid: emailRegex.test(value),
message: emailRegex.test(value) ? '' : '请输入有效的邮箱地址'
};
}
}
class PhoneValidation extends ValidationStrategy {
validate(value) {
const phoneRegex = /^1[3-9]\d{9}$/;
return {
isValid: phoneRegex.test(value),
message: phoneRegex.test(value) ? '' : '请输入有效的手机号码'
};
}
}
class RequiredValidation extends ValidationStrategy {
validate(value) {
return {
isValid: value !== null && value !== undefined && value !== '',
message: value ? '' : '此字段为必填项'
};
}
}
// 表单验证上下文
class FormValidator {
constructor() {
this.strategies = new Map();
}
addField(fieldName, strategy) {
this.strategies.set(fieldName, strategy);
}
validateField(fieldName, value) {
const strategy = this.strategies.get(fieldName);
if (!strategy) {
return { isValid: true, message: '' };
}
return strategy.validate(value);
}
validateForm(formData) {
const results = {};
let isValid = true;
for (const [fieldName, strategy] of this.strategies) {
const value = formData[fieldName];
const result = strategy.validate(value);
results[fieldName] = result;
if (!result.isValid) {
isValid = false;
}
}
return { isValid, results };
}
}
// 使用示例
const validator = new FormValidator();
validator.addField('username', new RequiredValidation());
validator.addField('email', new EmailValidation());
validator.addField('phone', new PhoneValidation());
const formData = {
username: 'John',
email: 'john@example.com',
phone: '13800138000'
};
const validationResult = validator.validateForm(formData);
console.log(validationResult);
