设计模式图解

// 1. 饿汉式 — 模块级常量，JS 单线程无需同步 class EagerSingleton { constructor() { if (EagerSingleton.INSTANCE) { throw new Error('Use EagerSingleton.getInstance()'); } } static INSTANCE = new EagerSingleton(); static getInstance() { return EagerSingleton.INSTANCE; } } // 2. 懒汉式 — JS 单线程，无需 DCL/volatile，闭包封装 const LazyDCLSingleton = (function() { let instance; class LazyDCLSingleton { constructor() { if (instance) { throw new Error('Use LazyDCLSingleton.getInstance()'); } } } return { getInstance() { if (!instance) { // 首次检查 instance = new LazyDCLSingleton(); } return instance; } }; })(); // 3. 冻结对象单例 — JS 无枚举，用 Object.freeze 模拟 const EnumSingleton = Object.freeze({ doSomething() { console.log('枚举单例'); } });

// 简单工厂 — 违反开闭原则，但简单实用 class CarFactory { static create(type) { switch (type) { case 'suv': return new SUVCar(); case 'sedan': return new SedanCar(); default: throw new Error('Unknown type'); } } } // 工厂方法 — 每个产品对应一个工厂子类（JS 无接口，注释约定） // interface CarFactory { create() } class SUVCarFactory { // implements CarFactory create() { return new SUVCar(); } } // Spring FactoryBean — Spring专用的工厂模式（仅作参考，JS 无对应概念） // Spring @Component class MyFactoryBean { // implements FactoryBean getObject() { return new MyService(); } getObjectType() { return MyService; } }

// Node.js EventEmitter 机制（发布订阅，对标 Spring Event） // 1. 定义事件（JS 中事件就是普通对象） class OrderCreatedEvent { constructor(source, order) { this.source = source; this.order = order; } } // 2. 发布事件 — 用 EventEmitter 替代 Spring ApplicationEventPublisher // Spring @Service class OrderService { constructor(emitter) { this.emitter = emitter; // 替代 @Autowired ApplicationEventPublisher } createOrder(order) { // 保存订单... this.emitter.emit('orderCreated', new OrderCreatedEvent(this, order)); } } // 3. 监听事件 — 可多个订阅者 // Spring @Component class EmailNotifier { constructor(emitter) { emitter.on('orderCreated', (event) => { // 替代 @EventListener // 发送邮件通知 }); } } // Vue3 EventBus（mitt库） // emitter.ts import mitt from 'mitt' export const emitter = mitt() // 发布 emitter.emit('orderCreated', { id: '123' }) // 订阅 emitter.on('orderCreated', (data) => { console.log('收到通知', data) })

// 支付策略接口（JS 无接口，用注释约定 + 鸭子类型） // interface PayStrategy { getType(); pay(amount); } // Spring @Component class WechatPayStrategy { // implements PayStrategy getType() { return 'wechat'; } pay(amount) { /* 微信支付 */ } } // Spring @Component class AlipayStrategy { // implements PayStrategy getType() { return 'alipay'; } pay(amount) { /* 支付宝支付 */ } } // 手动注册策略到 Map（模拟 Spring @Autowired Map 注入） // Spring @Service class PayService { constructor() { this.strategyMap = new Map([ ['wechat', new WechatPayStrategy()], ['alipay', new AlipayStrategy()] ]); } pay(type, amount) { const strategy = this.strategyMap.get(type); strategy.pay(amount); } }

// Node.js Stream 装饰链 — JS 版的 I/O 装饰器 import { createReadStream } from 'fs' import { createGzip } from 'zlib' const stream = createReadStream('data.txt') // 被装饰者 .pipe(createGzip()); // 装饰器: 压缩 // 调用链: read() → gzip transform → 输出 // Stream 通过 pipe 串联，类似装饰器层层包装 // Express middleware 装饰链（类似 Spring HandlerInterceptor） // Spring @Component function authMiddleware(req, res, next) { // 前置增强：鉴权 return next(); // return true } // JS 装饰器语法（TC39 提案，需 babel 支持） function log(target, key, desc) { const orig = desc.value desc.value = function(...args) { console.log(`调用 ${key}`) return orig.call(this, ...args) } } class Svc { @log doWork() { } }

// JS Proxy — 原生动态代理（类似 JDK 动态代理） const proxy = new Proxy(target, { get(obj, prop) { const orig = obj[prop]; if (typeof orig !== 'function') return orig; return (...args) => { // 前置增强 console.log('before: ' + prop); const result = orig.apply(obj, args); // 调用目标 // 后置增强 console.log('after: ' + prop); return result; }; } }); // JS Proxy 代理类实例（类似 CGLIB 代理，无需接口） const realSubject = new RealSubject(); const cglibProxy = new Proxy(realSubject, { get(obj, prop) { const orig = obj[prop]; if (typeof orig !== 'function') return orig; return (...args) => { console.log('cglib before'); const result = orig.apply(obj, args); console.log('cglib after'); return result; }; } }); // Spring AOP @AspectJ 注解方式（仅作参考，JS 无对应注解） // Spring @Aspect @Component class LogAspect { // Spring @Before('execution(* com.example.service.*.*(..))') before() { /* 前置通知 */ } // Spring @AfterReturning('execution(* com.example.service.*.*(..))') afterReturning() { /* 后置通知 */ } }

// 类适配器（JS 无接口，注释约定） class ClassAdapter extends Adaptee { // implements Target request() { super.specificRequest(); // 直接调用父类 } } // 对象适配器（推荐） class ObjectAdapter { // implements Target constructor(adaptee) { this.adaptee = adaptee; } request() { this.adaptee.specificRequest(); // 委派给 adaptee } } // Spring HandlerAdapter — 适配不同类型的Handler（仅作参考） // interface HandlerAdapter { supports(handler); handle(req, ...); } class HandlerAdapter { supports(handler) { /* ... */ } handle(req) { /* ... */ } } // RequestMappingHandlerAdapter 适配 @RequestMapping // HttpRequestHandlerAdapter 适配 HttpRequestHandler

// 模板方法模式（JS 无 abstract，用抛错模拟抽象方法） class AbstractCook { // 模板方法 — 定义算法骨架（JS 无法 final，约定不覆写） cook() { this.heatOil(); this.stirFry(); this.season(); if (this.wantGarnish()) { // 钩子方法 this.garnish(); } } heatOil() { throw new Error('子类必须实现 heatOil'); } stirFry() { throw new Error('子类必须实现 stirFry'); } season() { throw new Error('子类必须实现 season'); } wantGarnish() { return false; } // 钩子默认实现 garnish() {} // 可选覆写 } // Spring AbstractApplicationContext.refresh() — 经典模板方法（仅作参考） // refresh() 定义了12个步骤，子类可覆写某些步骤： // prepareRefresh() → obtainBeanFactory() → ... // → finishRefresh() // JS 回调式模板（类似 Spring JdbcTemplate 的回调模式） function withConnection(dataSource, callback) { const conn = dataSource.getConnection(); try { return callback(conn); // 用户只需提供 SQL + 回调 } finally { conn.close(); // 模板负责关闭连接 } } const users = withConnection(dataSource, (conn) => { return conn.query('SELECT * FROM user').map(row => row.name); }); // withConnection 封装了: 获取连接 → 执行回调 → 关闭连接 // 用户只需要提供 SQL 处理逻辑（回调）