工厂模式怎么实现？最全教程解析

所谓“HTML工厂模式”并非HTML原生特性，而是借助JavaScript在浏览器中模拟的DOM元素动态创建与组装机制——它通过封装document.createElement等操作为可扩展、解耦的工厂函数或类，统一接收配置对象、返回纯净的HTMLElement实例（而非危险的HTML字符串），规避硬编码、原型污染和样式耦合；根据项目规模灵活选用简单工厂（小工具）、工厂方法（多主题组件库）或抽象工厂（复杂页面生成），同时强调生命周期管理、CSS类驱动样式及挂载时机可控等工程实践，让前端DOM构建真正具备可维护性、安全性和扩展性。

HTML 本身不支持工厂模式，所谓“HTML 工厂模式”实际是用 JavaScript 在浏览器环境模拟工厂逻辑，动态创建和组装 DOM 元素。直接在 HTML 标签里写“工厂”没意义，关键在 JS 层如何组织 createBox、createLink、createPage 这类函数，并让它们可扩展、不耦合。

怎么用 JS 实现一个可扩展的 HTML 元素工厂

核心是把 DOM 创建逻辑封装进函数或类，避免到处用 document.createElement + 手动设 style / innerHTML。工厂函数应接收配置对象，返回已挂载或待挂载的节点。

• 不要直接返回字符串 HTML（易 XSS、难维护），始终返回 HTMLElement 实例
• 每个产品类型（如 rectBox、roundBox）应有独立构造逻辑，不混在 switch 里硬编码
• 推荐用对象字面量注册类型，而非修改原型：例如 factory.register('card', CardBuilder)
• 配置参数统一用对象传入，避免参数顺序错乱：factory.create('button', { text: 'OK', type: 'primary' })

为什么 new NewBox().createBox('rectBox', { width: 200, height: 100 }) 容易出问题

这类写法常见于老教程，但实际踩坑多：

• createBox 方法里用 this[type] 查找构造器，但若 type 拼错（如写成 'rectbox'），只会静默执行 console.log("can't create it")，不抛错也不报错
• createBox 内部强行改 createFunc.prototype = NewBox.prototype，会污染构造器原型，后续 new 多个实例时可能互相干扰
• 所有样式都写死在 JS 里（eachBox.style.width = ...），无法复用 CSS 类、不支持主题切换、响应式难做
• 没有生命周期管理，比如没提供 destroy() 或 unmount()，DOM 泄漏风险高

真实项目中该用哪种工厂结构

根据复杂度选：

• 单页小工具（如弹窗、提示框）：用简单工厂函数，例如 function createToast(config) { ... }，够用且无额外抽象成本
• 组件库（Button / Card / List）：用工厂方法模式，定义 ComponentFactory 抽象类，子类如 BootstrapFactory、TailwindFactory 各自实现 createButton()
• 生成整页 HTML（如报表导出、邮件模板）：用抽象工厂，分离 Link、Tray、Page 的创建职责，再由 ListFactory 或 TableFactory 组装
• 注意：React/Vue/Angular 项目中，别自己造轮子——JSX/模板语法 + props 就是更高级的“声明式工厂”，强行套用传统工厂反而增加理解负担

最容易被忽略的一点：工厂返回的 DOM 节点是否已插入文档？很多示例默认 appendChild，但实际你往往需要先配置、验证、加事件，再手动挂载。所以工厂函数最好只负责“创建并初始化”，挂载交给调用方控制。

终于介绍完啦！小伙伴们，这篇关于《工厂模式怎么实现？最全教程解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！