深入浅出JavaScript常见设计模式：从原理到实战(2)

学习机器不会机器学习2025-04-29 12:46

深入浅出JavaScript常见设计模式：从原理到实战(2)

本文是深入浅出JavaScript常见设计模式：从原理到实战(1)的续集

设计模式是一种在特定情境下解决软件设计中常见问题的通用方案或模板。在特定的开发场景中使用特定的设计模式，可以提升代码质量，增强代码可读性和可维护性，提高团队开发效率，降低软件设计的复杂度。本文将介绍前端开发中常用的设计模式，讲解他们的含义，核心特性，使用场景及注意事项

一、设计模式核心认知

1.1 什么是设计模式

  • 定义：经过验证的代码组织最佳实践方案
  • 黄金三角 ：
    • 场景：特定问题的解决方案
    • 结构：类/对象的关系拓扑
    • 效果：可维护性/扩展性提升

1.2 为什么需要设计模式

  • 代码腐化防控：减少面条式代码
  • 架构清晰度：提高模块化程度（示例：React Hooks vs Class组件）
  • 团队协作：统一代码交流语言

二、三大高频设计模式详解

2.1 代理模式（Proxy）

代理模式（Proxy Pattern）是结构型设计模式 的核心实现之一，其核心目标是通过代理对象控制对原始对象的访问，在不修改原始对象的前提下增强其功能。以下是其关键要点：

核心特性
特性 说明
访问控制 代理对象控制对原始对象的访问权限
功能增强 添加缓存、验证、日志等附加功能
延迟初始化 按需创建高开销对象（虚拟代理）
接口一致性 代理与原始对象实现相同接口，客户端无感知
应用场景

  1. 虚拟代理

    • 图片懒加载（延迟加载大图）
    • 按需加载模块（Webpack动态导入）

  2. 保护代理

    • API请求权限校验（JWT Token验证）
    • 敏感操作审计（删除操作日志记录）

  3. 缓存代理

    • 接口响应缓存（减少重复请求）
    • 复杂计算缓存（斐波那契数列记忆化）

  4. 远程代理

    • RPC调用封装（像调用本地方法一样调用远程服务）
    • WebSocket通信代理
代码实现（综合缓存+权限校验代理）
javascript 复制代码 
class DatabaseService {  
  constructor() {  
    this.data = new Map();  
  }  

  // 原始方法  
  query(sql) {  
    console.log(`执行SQL: ${sql}`);  
    return Math.random() * 100; // 模拟查询结果  
  }  

  // 敏感操作  
  deleteTable(name) {  
    console.log(`删除表: ${name}`);  
    return true;  
  }  
}  

// 代理类  
class DatabaseProxy {  
  constructor(role = 'guest') {  
    this.db = new DatabaseService();  
    this.cache = new Map();  
    this.role = role;  
  }  

  // 代理查询方法（添加缓存）  
  query(sql) {  
    if (this.cache.has(sql)) {  
      console.log('返回缓存结果');  
      return this.cache.get(sql);  
    }  

    const result = this.db.query(sql);  
    this.cache.set(sql, result);  
    return result;  
  }  

  // 代理删除方法（添加权限校验）  
  deleteTable(name) {  
    if (this.role !== 'admin') {  
      throw new Error('权限不足');  
    }  
    return this.db.deleteTable(name);  
  }  

  // 扩展代理功能（添加日志）  
  auditLog(action) {  
    console.log(`[审计日志] ${new Date().toISOString()} 执行了 ${action}`);  
  }  
}  

// 使用示例  
const adminProxy = new DatabaseProxy('admin');  
console.log(adminProxy.query('SELECT * FROM users')); // 执行真实查询  
console.log(adminProxy.query('SELECT * FROM users')); // 返回缓存结果  
adminProxy.deleteTable('logs'); // 成功执行  

const guestProxy = new DatabaseProxy();  
guestProxy.deleteTable('users'); // 抛出权限错误
实现流程图解
注意事项

  1. 性能损耗

    • 代理链过长会导致调用延迟，解决方案：
    javascript 复制代码 
    // 使用组合代理替代继承链  
const proxy = compose(logProxy, cacheProxy, authProxy)(realObject);

  2. 过度代理

    • 避免无意义的代理层，遵循YAGNI原则
    javascript 复制代码 
    // 仅在需要时创建代理  
function createProxy(target, needs) {  
  return needs.reduce((obj, feature) => {  
    return feature === 'cache' ? new CacheProxy(obj) : obj;  
  }, target);  
}

  3. 与装饰器模式区别

    • 代理控制访问，装饰器增强功能

    代理模式 访问控制 装饰器模式 功能叠加

现代框架中的演进

  1. Vue3响应式代理

    javascript 复制代码 
    const raw = { count: 0 };  
const proxy = new Proxy(raw, {  
  get(target, key) {  
    track(target, key); // 依赖收集  
    return Reflect.get(...arguments);  
  },  
  set(target, key, value) {  
    trigger(target, key); // 触发更新  
    return Reflect.set(...arguments);  
  }  
});

  2. React高阶组件（HOC）

    jsx 复制代码 
    function withLoading(WrappedComponent) {  
  return function Enhanced(props) {  
    const [loading, setLoading] = useState(true);  
    useEffect(() => {  
      setLoading(false);  
    }, []);  

    return loading ? <Spinner /> : <WrappedComponent {...props} />;  
  };  
}

  3. Node.js HTTP中间件

    javascript 复制代码 
    const proxyMiddleware = (req, res, next) => {  
  const targetUrl = determineTarget(req.url);  
  httpProxy.web(req, res, { target: targetUrl }, next);  
};  

app.use('/api', proxyMiddleware);
模式延伸

  1. 动态代理

    javascript 复制代码 
    function createDynamicProxy(handler) {  
  return new Proxy({}, {  
    get(target, prop) {  
      return (...args) => handler(prop, args);  
    }  
  });  
}  

const apiProxy = createDynamicProxy((method, params) => {  
  return fetch(`/api/${method}`, { body: JSON.stringify(params) });  
});  

apiProxy.getUsers({ page: 1 }); // 实际调用 /api/getUsers

  2. 虚拟化代理

    javascript 复制代码 
    class HeavyResourceProxy {  
  constructor() {  
    this.resource = null;  
  }  

  load() {  
    if (!this.resource) {  
      this.resource = new HeavyResource(); // 按需初始化  
    }  
    return this.resource;  
  }  
}

  3. 代理模式组合

    缓存命中 Client CacheProxy AuthProxy RealObject

最佳实践示例：实现智能API客户端

javascript 复制代码 
class SmartAPIClient {  
  constructor(baseURL) {  
    return new Proxy(this, {  
      get(target, endpoint) {  
        return params =>  
          fetch(`${baseURL}/${endpoint}`, {  
            method: 'POST',  
            body: JSON.stringify(params)  
          })  
          .then(res => res.json())  
          .catch(err => ({ error: err.message }));  
      }  
    });  
  }  
}  

// 使用示例  
const api = new SmartAPIClient('https://api.example.com');  
api.users({ id: 1 }).then(console.log);  
api.products({ category: 'books' }).then(console.log);

2.2 工厂模式（Factory）

工厂模式（Factory Pattern）是创建型设计模式 的核心实现之一，其核心目标是封装对象创建过程 ，通过统一接口动态创建不同类型的对象，实现客户端与具体类的解耦。以下是其关键要点：

核心特性
特性 说明
创建封装 隐藏对象实例化逻辑，客户端仅关注接口
类型扩展 新增产品类型无需修改客户端代码
多态支持 工厂方法返回抽象类型的具体实现
条件创建 根据输入参数动态创建不同对象
应用场景

  1. UI组件库

    • 根据配置生成不同风格的按钮/表单
    • 跨平台组件渲染（Web/Mobile）

  2. 支付系统

    • 根据用户选择创建支付处理器（支付宝/微信/银联）
    • 国际化货币处理器

  3. 游戏开发

    • 动态生成NPC角色（敌人/盟友）
    • 武器/装备生成系统

  4. 数据解析

    • 根据文件类型选择解析器（JSON/XML/CSV）
    • 不同数据源的适配器创建
代码实现（支持抽象工厂的增强版）
javascript 复制代码 
// 抽象产品接口  
class Button {  
  render() {  
    throw new Error("必须实现render方法");  
  }  
}  

// 具体产品  
class PrimaryButton extends Button {  
  render() {  
    return "<button class='primary'>Submit</button>";  
  }  
}  

class DangerButton extends Button {  
  render() {  
    return "<button class='danger'>Delete</button>";  
  }  
}  

// 抽象工厂  
class UIFactory {  
  createButton() {  
    throw new Error("必须实现createButton方法");  
  }  

  createInput() {  
    throw new Error("必须实现createInput方法");  
  }  
}  

// 具体工厂  
class WebUIFactory extends UIFactory {  
  createButton() {  
    return new PrimaryButton();  
  }  

  createInput() {  
    return "<input type='text'>";  
  }  
}  

class MobileUIFactory extends UIFactory {  
  createButton() {  
    return new DangerButton();  
  }  

  createInput() {  
    return "<input type='number'>";  
  }  
}  

// 客户端代码  
function renderUI(platform) {  
  const factory = platform === 'mobile'  
    ? new MobileUIFactory()  
    : new WebUIFactory();  

  const button = factory.createButton();  
  const input = factory.createInput();  

  document.body.innerHTML = `${button.render()} ${input}`;  
}  

// 使用示例  
renderUI('web');    // 生成Web风格UI  
renderUI('mobile'); // 生成Mobile风格UI
实现流程图解
注意事项

  1. 避免过度设计

    • 简单场景直接使用构造函数
    javascript 复制代码 
    // 只有当需要处理多种类型时使用工厂  
class SimpleButton {  
  constructor(type) {  
    this.type = type;  
  }  
}

  2. 工厂膨胀问题

    • 使用参数化工厂替代多子类
    javascript 复制代码 
    class DynamicUIFactory {  
  constructor(config) {  
    this.config = config;  
  }  

  createButton() {  
    return new this.config.buttonClass();  
  }  
}

  3. 与构造函数对比

    工厂模式 构造函数
    返回任意对象 必须返回当前类实例
    可缓存/复用实例 每次调用创建新实例
    支持更复杂的创建逻辑 适合简单初始化场景
现代框架中的演进

  1. React组件工厂

    jsx 复制代码 
    function createComponent(type, props) {  
  const components = {  
    Button: <button {...props} />,  
    Input: <input {...props} />  
  };  
  return components[type];  
}  

// 使用  
<div>{createComponent('Button', { onClick })}</div>

  2. Vue插件工厂

    javascript 复制代码 
    const pluginFactory = (options) => ({  
  install(app) {  
    app.component(options.name, options.component);  
  }  
});  

Vue.use(pluginFactory({  
  name: 'CustomButton',  
  component: ButtonComponent  
}));

  3. Node.js模块缓存

    javascript 复制代码 
    // Node.js的require机制本质是工厂模式  
const express = require('express');  
const app = express();
模式延伸

  1. 工厂方法 vs 抽象工厂

    一个方法创建一种产品 多个方法创建产品族 工厂方法 单一产品层级 抽象工厂 多个关联产品

  2. 与原型模式结合

    javascript 复制代码 
    class PrototypeFactory {  
  constructor(prototypes) {  
    this.prototypes = prototypes;  
  }  

  create(type) {  
    return this.prototypes[type].clone();  
  }  
}

  3. 依赖注入实现

    javascript 复制代码 
    class Container {  
  constructor() {  
    this.factories = new Map();  
  }  

  register(type, factory) {  
    this.factories.set(type, factory);  
  }  

  resolve(type) {  
    return this.factories.get(type)();  
  }  
}

2.3 模块化模式（Module）

模块化模式（Module Pattern）是JavaScript中最基础的组织代码模式 ，通过闭包和立即执行函数实现作用域隔离，核心目标是封装私有状态，暴露公共接口。以下是其关键要点：

核心特性
特性 说明
命名空间 避免全局变量污染
私有封装 通过闭包保护内部状态
接口暴露 选择性公开方法与属性
依赖管理 显式声明模块依赖关系
应用场景

  1. 工具库开发

    • Lodash/Underscore等工具函数封装
    • 日期处理/数学计算专用模块

  2. 第三方SDK

    • 支付SDK（支付宝/微信支付接口封装）
    • 地图SDK（Google Maps API包装）

  3. 业务模块

    • 用户认证模块（登录/注册/权限）
    • 购物车管理模块

  4. 旧代码重构

    • 将全局函数重构为模块
    • jQuery插件开发
代码实现（支持依赖注入的增强版）
javascript 复制代码 
const UserModule = (($, _) => {  
  // 私有变量  
  let users = [];  
  const API_URL = '/api/users';  

  // 私有方法  
  function fetchUsers() {  
    return $.get(API_URL).then(data => {  
      users = _.sortBy(data, 'name');  
    });  
  }  

  // 暴露公共接口  
  return {  
    init() {  
      fetchUsers().then(() => {  
        console.log('用户数据加载完成');  
      });  
    },  

    getUsers() {  
      return [...users];  
    },  

    addUser(user) {  
      users.push(user);  
      return $.post(API_URL, user);  
    }  
  };  
})(jQuery, _);  

// 使用示例  
UserModule.init();  
setTimeout(() => {  
  console.log(UserModule.getUsers());  
}, 1000);
实现流程图解
注意事项

  1. 内存泄漏

    • 避免在闭包中保留DOM引用
    javascript 复制代码 
    function createModule() {  
  const element = document.getElementById('app'); // 危险!  
  return {  
    update() { /*...*/ }  
  };  
}

  2. 单元测试困难

    • 通过依赖注入解决
    javascript 复制代码 
    const TestableModule = (deps = { fetch: fetch }) => ({  
  getData() {  
    return deps.fetch('/data');  
  }  
});

  3. 模块通信

    通信方式 优点 缺点
    全局事件总线 松耦合 难以追踪数据流
    直接引用 简单直接 增加耦合度
    依赖注入 可测试性好 增加配置复杂度
现代框架中的演进

  1. ES6 Modules

    javascript 复制代码 
    // math.js  
export function add(a, b) {  
  return a + b;  
}  

// app.js  
import { add } from './math.js';

  2. Webpack模块联邦

    javascript 复制代码 
    // app1 暴露模块  
new ModuleFederationPlugin({  
  name: "app1",  
  exposes: {  
    "./Button": "./src/Button.js"  
  }  
});  

// app2 使用远程模块  
import("app1/Button").then(Button => {  
  ReactDOM.render(<Button />, root);  
});

  3. Node.js CommonJS

    javascript 复制代码 
    // 模块导出  
module.exports = {  
  method: () => { /*...*/ }  
};  

// 模块导入  
const lib = require('./lib');
模式延伸

  1. 增强模块模式

    javascript 复制代码 
    const EnhancedModule = (original => ({  
  ...original,  
  newMethod() {  
    // 扩展功能  
  }  
}))(UserModule);

  2. 沙箱模式

    javascript 复制代码 
    function Sandbox(...deps) {  
  const modules = {};  

  return {  
    register(name, impl) {  
      modules[name] = impl;  
    },  
    require(name) {  
      return modules[name];  
    }  
  };  
}

  3. 动态加载

    javascript 复制代码 
    const DynamicModule = {  
  load(name) {  
    return import(`./modules/${name}.js`);  
  }  
};

模块化演进史：
IIFE CommonJS AMD UMD ES6 Modules Bundle Systems Micro Frontends

最佳实践组合：

javascript 复制代码 
// 现代模块化方案  
import { factory } from './factory.js';  
import { logger } from '@monorepo/utils';  

export default (config) => {  
  const module = factory.create(config);  
  logger.debug('Module initialized');  
  return Object.freeze(module);  
};

四、下期预告

总共有23种经典的设计模式，本篇文章介绍了3种前端开发中常用的设计模式，其他设计模式将在下篇文章中继续分享哦，敬请期待~

相关推荐
黎明smaly12 分钟前
【C语言】复习~动态内存管理
c语言·开发语言·c++·面试
黎明smaly12 分钟前
【C语言】复习~数组和指针
c语言·开发语言·数据结构·c++·leetcode
forestsea41 分钟前
Java虚拟机面试题：内存管理（上）
java·开发语言
暴躁哥1 小时前
深入理解设计模式：工厂模式、单例模式
单例模式·设计模式·建造者模式·工厂模式
若汝棋茗1 小时前
C# 异步方法中缺少 `await` 运算符的隐患与解决方案
开发语言·c#·await
江畔柳前堤1 小时前
PyQt学习系列05-图形渲染与OpenGL集成
开发语言·javascript·人工智能·python·学习·ecmascript·pyqt
xosg1 小时前
嵌入式＜style＞设计模式
设计模式
黎相思1 小时前
特殊类设计
开发语言·c++
得不到的更加爱1 小时前
设计模式总结
设计模式
君鼎1 小时前
C++——volatile
开发语言·c++
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06DeepSeek各版本说明与优缺点分析07【2025年最新】OpenWrt 更换国内源的指南（图形界面版)08VMware虚拟机安装Win7专业版保姆级教程（附镜像包）09Coze扣子平台完整体验和实践（附国内和国际版对比）10CCF CSP 认证考试历年真题满分题解（所有前四题）