高级前端工程师必备的 JS 设计模式入门教程,常用设计模式案例分享
本文适合有JavaScript基础 、 Vue/React 开发经验,但对设计模式不太熟悉的前端开发工程师。
什么是设计模式?为什么要有设计模式?单例模式、工厂模式、建造者模式、适配器模式、代理模式、装饰器模式、观察者模式、策略模式、状态模式分别是什么?他们解决了什么样的问题?本文将给您答案。
设计模式,就是**程序员们总结出来的一套解决常见代码问题的方法论**。
类比一下:设计模式就像打游戏时的「固定套路」,让你**在遇到不同怪物时不用每次重头想招数**,而是有一套拿得出手的打法。
设计模式的产出不是特定代码片段,而是**一套可复用的设计思路或结构**。
设计模式产出的是「结构 + 行为」的组合,没有严格固定形式,但背后有固定的“意图”或“问题场景”。我们**关注的就是其“意图”和“场景”。**
设计模式很多,但最重要的,可以分成三大类:
类型 | 解释 | 代表模式 |
---|---|---|
创建型 | 解决「如何创建对象」的问题 | 单例模式、工厂模式、建造者模式 |
结构型 | 解决「对象之间怎么组织结构」的问题 | 适配器模式、代理模式、装饰器模式 |
行为型 | 解决「对象之间怎么协作通信」的问题 | 观察者模式、策略模式、状态模式 |
定义:**整个系统只存在一个实例对象**,并且能全局访问。
举个例子,Vuex里面的store就是单例,事件总线(Event Bus)也是单例。
来做个简单的实现,它通过一个静态属性 instance 储存实例,并在重复创建时返回已有实例,这样就能实现单例的效果:
class Store {
constructor() {
if (Store.instance) {
return Store.instance;
}
this.state = {};
Store.instance = this;
}
}
const a = new Store();
const b = new Store();
console.log(a === b); // true
定义:**用一个函数/类专门负责创建对象,不直接用 new。**
举几个例子,组件封装:根据类型不同返回不同组件实例还有 Axios 的实例化都是工厂模式。
工厂模式的优势在于能统一创建逻辑,并且拓展非常方便,各类型之间高内聚,低耦合。做个简单的实现:
function createButton(type) {
if (type === 'primary') {
return { color: 'blue', size: 'large' };
} else if (type === 'danger') {
return { color: 'red', size: 'large' };
}
}
const btn = createButton('primary');
console.log(btn); // { color: 'blue', size: 'large' }
工厂函数是什么?
工厂函数(Factory Function)是一个**普通函数**,它**封装了创建对象的过程**,并返回这个对象。它是实现工厂模式的一种方式,但不限于工厂模式使用。
function createPerson(name, age) {
return {
name,
age,
sayHello() {
console.log(`Hi, I'm ${name}`);
}
}
}
const person = createPerson('Tom', 20);
这个案例中的 createPerson 就是工厂函数。
定义:**一对多关系,一个对象变化,通知所有依赖它的对象。**
比如Vue 响应式,发布订阅(EventEmitter)都属于观察者模式。
一般情况下,观察者模式里面一定有一个叫做 notify / emit / publish 或类似功能的函数,用来通知所有的订阅者,这种函数本质上就是广播机制,是观察者模式的核心实现函数。做个简单的案例:维护一组回调,变化时循环触发。
class Observer {
constructor() {
this.subscribers = [];
}
subscribe(fn) {
this.subscribers.push(fn);
}
notify(data) {
this.subscribers.forEach(fn => fn(data));
}
}
const obs = new Observer();
obs.subscribe((data) => console.log('收到1', data));
obs.subscribe((data) => console.log('收到2', data));
obs.notify('你好');
// 收到1 你好
// 收到2 你好
定义:**通过一个代理对象控制对目标对象的访问。**
Vue3的响应式Proxy、接口请求封装都属于代理模式。
先用Proxy举例:
const target = {
name: '张三'
};
const proxy = new Proxy(target, {
get(obj, prop) {
console.log(`访问属性:${prop}`);
return obj[prop];
},
set(obj, prop, value) {
console.log(`设置属性:${prop}=${value}`);
obj[prop] = value;
return true;
}
});
proxy.name; // 访问属性:name
proxy.age = 20; // 设置属性:age=20
这个例子比较常见,是不是意犹未尽?我们再来一个图片懒加载的代理模式来举例:
// 真正加载图片的方法
function loadImage(src) {
const img = new Image();
img.src = src;
document.body.appendChild(img);
}
// 创建一个代理来控制图片加载
const proxyImage = (function () {
let img = new Image();
img.onload = function() {
loadImage(this.src); // 真正加载
}
return function(src) {
// 先用一张 loading 图片占位
loadImage('loading.jpg');
// 真正的图片异步加载完成后替换
img.src = src;
}
})();
// 使用
proxyImage('real-image.jpg');
proxyImage 函数就是代理对象,loadImage是被代理的目标对象,用户一调用它就显示 loading 图,真正图片在加载完毕后替换。
这里使用 IIFE(立即执行函数表达式) 是为了创建**一次性的私有作用域和闭包**,隔离 img 变量,避免污染。 **执行逻辑为:**
其中,默认图片(loading.jpg)应该是一个极小的图,通过base64编码内嵌到代码里,或者直接用svg小图标,如果是个大一点的图片应该让浏览器预加载,以此来实现用户视角下的默认图片无感渲染。
定义:**将一系列算法封装成独立的策略类,使它们可以互相替换。**
比如一些表单验证、支付方式切换过程等。
其优势在于具有开闭原则(增加新策略不用改老代码),并且代码可扩展。举例如下,其中strategies 里是具体的策略集合(算法实现),validate 是「上下文」调用器(根据情况选择策略执行),两者配合才构成完整的策略模式实现:
const strategies = {
isNonEmpty(value) {
return value !== '';
},
minLength(value, length) {
return value.length >= length;
}
};
function validate(value, rule, ...args) {
return strategies[rule](value, ...args);
}
console.log(validate('abc', 'minLength', 2)); // true
开闭原则: 即对扩展开放,对修改关闭。 产生新需求时,应该通过新增代码来实现,而不是修改现有代码。这样可以减少出错的风险,提高系统的稳定性。 在策略模式中,策略模式增加新策略,只是添加新策略对象,不需要去改 validate 函数本体
有没有觉得策略模式和工厂模式很像?都是通过一个“judge info”(type与rule)来判断到底该如何执行。但他们存在以下区别:
策略模式 | 工厂模式 |
---|---|
关注执行逻辑不同 | 关注对象创建不同 |
替换算法/规则 | 替换对象 |
运行时切换 | 生成时选择 |
这四个相对少见,简单介绍:
**分步骤构建一个复杂对象**,而不是一口气构造。比如建一台电脑:
class ComputerBuilder {
constructor() {
this.computer = {};
}
addCPU(cpu) {
this.computer.cpu = cpu;
return this;
}
addRAM(ram) {
this.computer.ram = ram;
return this;
}
addStorage(storage) {
this.computer.storage = storage;
return this;
}
build() {
return this.computer;
}
}
const myComputer = new ComputerBuilder()
.addCPU('Intel i9')
.addRAM('32GB')
.addStorage('1TB SSD')
.build();
让原本接口不兼容的两个类可以一起工作。比如一个老版 API 返回的是 snake\_case,但新系统要求 camelCase:
function oldApi() {
return { user_name: 'Tom', user_age: 20 };
}
// 适配器
function adapterApi() {
const data = oldApi();
return {
userName: data.user_name,
userAge: data.user_age
};
}
const result = adapterApi();
在不修改原对象的情况下,动态增加功能。比如增强 log 函数(这里相当于额外打印了时间):
function log(msg) {
console.log(msg);
}
// 装饰器
function withTimestamp(fn) {
return function(...args) {
console.log(`[${new Date().toISOString()}]`);
return fn(...args);
}
}
const decoratedLog = withTimestamp(log);
decoratedLog('Hello World');
对象内部状态不同,行为也不同。比如电灯开关:
class Light {
constructor() {
this.state = 'off';
}
toggle() {
if (this.state === 'off') {
console.log('Turning on');
this.state = 'on';
} else {
console.log('Turning off');
this.state = 'off';
}
}
}
const light = new Light();
light.toggle(); // Turning on
light.toggle(); // Turning off
设计模式能让人写出更稳定、可维护的代码,JavaScript中最常用的设计模式有**单例、工厂、观察者、代理、策略五种。**学设计模式就相当于学解决复杂问题的套路,在框架中,如 Vue / React项目里,几乎随处可见设计模式的身影。
只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
其他热门文章,请关注:
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
通过array.filter()实现数组的数据筛选、数据清洗和链式调用
通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能
TreeSize:免费的磁盘清理与管理神器,解决C盘爆满的燃眉之急
通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、DOM操作等
前端实战:基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图