各位大佬好，我是一名三年经验的前端开发工程师，一转眼三年了，想当时刚入行的时候心比天高，当时定的目标好像三年了也没完成几个，最近一直在反思是不是该给自己一个规划逼自己一把了，于是乎今天就是我实行自己规划的起点。
常用的前端设计模式
创建型模式（5种）
一、创建设计模式
处理对象创建机制，优化对象的创建过程
1. 单例模式 (Singleton)
-
定义：确保一个类仅有一个实例，并提供全局访问点。
-
优点：
- 避免重复创建实例，节省资源。
- 全局访问点方便共享数据（如 Redux Store）。
-
缺点：
- 测试困难（全局状态污染）。
- 违背单一职责原则（需自行管理实例生命周期）。
-
应用场景：全局状态管理、浏览器中的
window对象。
2. 工厂模式 (Factory)
-
定义：通过工厂方法创建对象，而不暴露具体构造逻辑。
-
类型：
- 简单工厂：根据条件返回不同对象。
- 工厂方法：子类决定实例化哪个类。
-
优点：
- 解耦对象创建与使用。
- 易于扩展新类型（符合开闭原则）。
-
缺点：
- 增加代码复杂度（需额外工厂类）。
-
应用场景：UI组件库、动态创建DOM元素。
3. 原型模式 (Prototype)
-
定义：通过克隆原型对象创建新对象（如 JavaScript 的原型继承）。
-
优点：
- 避免重复初始化相似对象（性能优化）。
- 简化对象创建过程。
-
缺点：
- 深拷贝可能复杂（需处理引用类型属性）。
-
应用场景：复制复杂配置对象、基于原型的继承（如
Object.create()）。
二、结构型设计模式
关注对象之间的组合与关系，优化结构扩展性。
4. 代理模式 (Proxy)
-
定义：通过代理对象控制对原对象的访问。
-
优点：
- 隔离目标对象，增强安全性或延迟初始化（如懒加载）。
-
缺点：
- 增加代码层级，可能影响性能。
-
应用场景：图片懒加载、API请求拦截（如 Axios 拦截器）。
5. 装饰器模式 (Decorator)
-
定义：动态地为对象添加职责，不改变其结构。
-
优点：
- 灵活扩展功能（替代继承）。
- 符合开闭原则（无需修改原代码）。
-
缺点：
- 多层装饰可能增加复杂度。
-
应用场景：高阶组件（React HOC）、日志装饰器。
三、行为型设计模式
6. 观察者模式 (Observer)
-
定义：对象（Subject）维护一组依赖（Observers），状态变化时自动通知。
-
优点：
- 解耦发布者与订阅者。
- 支持一对多事件通信。
-
缺点：
- 过度使用可能导致内存泄漏（未及时取消订阅）。
- 通知顺序不可控。
- 应用场景：事件监听（如 DOM 事件）。
7. 迭代器模式 (Iterator)
-
定义：提供统一接口遍历集合元素，无需暴露内部结构。
-
优点：
- 简化集合遍历逻辑。
- 支持多种遍历方式（如正序、逆序）。
-
缺点：
- 对简单集合可能过度设计。
-
应用场景：遍历树结构、生成器函数（
function*）。
简单的工厂模式
interface Animal {
name:string
speak:void
}
class Dog implements Animal {
name:string
constructor(name:string){
this.name = name
}
speak(){
console.log(this.name + '汪汪汪~')
}
}
class Cat implements Animal {
name:string
constructor(name:string){
this.name = name
}
speak(){
console.log(this.name + '喵喵喵~')
}
}
class AnimalFactory {
static createAnimal(name:string , type:string){
switch (type.toLowerCase()){
case 'dog'
return new Dog(name)
break;
case 'cat'
retrurn new Cat(name)
break;
default: throw new Error(`未知的动物类型: ${type}`);
}
}
}
const dog = AnimalFactory.createAnimal("小狗","dog");
const cat = AnimalFactory.createAnimal("小猫","cat");
抽象的工厂模式
interface API {
fetchData(): Promise<any>;
}
// 模拟用户api
class UserAPI implements API {
fetchData(): Promise<any> {
return new Promise((resolve)=>{
setTimeout(()=>{
resolve({ users: [{ id: 1, name: "John Doe" }] });
},1000)
})
}
}
class ProductAPI implements API {
fetchData(): Promise<any> {
return new Promise((resolve)=>{
setTimeout(()=>{
resolve({ products: [{ product_id: 1, name: "螺丝丁" }] });
},1000)
})
}
}
// API 工厂类
class APIFactory {
const apis = {
poduct: new ProductAPI(),
user: new UserAPI()
}
createAPI (type:string):API {
return apis[type]
}
}
function fetchDataFromAPI(apiType: string){
const api = APIFactory.createAPI(apiType)
api.fetchData().then((data)=>{
console.log(data);
})
}
fetchDataFromAPI('user')
总结
- 工厂模式 可以帮助我们解耦 API 的创建逻辑，使代码更具扩展性和可维护性。
- 通过动态注册的方式，可以轻松扩展新的 API 类型，而无需修改工厂类的核心逻辑。
- 这种模式非常适合需要根据配置或条件动态选择不同 API 的场景。
