JavaScript抽象工厂模式：产品族创建全解析

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript抽象工厂：产品族创建详解》，聊聊，希望可以帮助到正在努力赚钱的你。

抽象工厂模式用于创建一组相互依赖的对象家族而不指定具体类，适用于UI组件库等需统一风格的场景。通过定义抽象产品和工厂接口，由具体工厂如浅色或深色主题工厂实现对象创建，确保同族产品协同工作。示例中按钮和输入框按主题统一渲染，客户端可切换整套界面风格而无需修改代码。优势包括解耦、易扩展产品族、保证兼容性，但新增产品类型需修改所有工厂，违反开闭原则。JavaScript中可用构造函数模拟抽象类，适合大型应用维护。

当需要创建一组相关或相互依赖的对象，而无需指定其具体类时，JavaScript 中的抽象工厂模式提供了一个优雅的解决方案。它强调“产品族”的统一创建，确保来自同一工厂的对象能够协同工作。

抽象工厂核心思想

抽象工厂不是创建单一对象，而是创建对象家族。比如：现代 UI 组件库中，按钮、输入框、弹窗应风格一致；不同主题（如深色、浅色）对应不同的组件实现，但调用方式保持统一。

关键在于定义抽象接口，由具体工厂决定实例化哪个具体产品。

实现结构与代码示例

通过构造函数或 ES6 类模拟抽象类和继承关系，利用多态实现解耦。

// 抽象产品 - 按钮 function Button() { if (new.target === Button) { throw new Error("Button is abstract!"); } } Button.prototype.render = function () { throw new Error("render not implemented"); };

// 抽象产品 - 输入框 function Input() { if (new.target === Input) { throw new Error("Input is abstract!"); } } Input.prototype.render = function () { throw new Error("render not implemented"); };

// 具体产品 - 浅色主题按钮 function LightButton() {} LightButton.prototype = Object.create(Button.prototype); LightButton.prototype.render = function () { console.log("渲染浅色按钮"); };

// 具体产品 - 深色主题按钮 function DarkButton() {} DarkButton.prototype = Object.create(Button.prototype); DarkButton.prototype.render = function () { console.log("渲染深色按钮"); };

// 具体产品 - 浅色输入框 function LightInput() {} LightInput.prototype = Object.create(Input.prototype); LightInput.prototype.render = function () { console.log("渲染浅色输入框"); };

// 具体产品 - 深色输入框 function DarkInput() {} DarkInput.prototype = Object.create(Input.prototype); DarkInput.prototype.render = function () { console.log("渲染深色输入框"); };

// 抽象工厂 function UIComponentFactory() { if (new.target === UIComponentFactory) { throw new Error("UIComponentFactory is abstract!"); } } UIComponentFactory.prototype.createButton = function () { throw new Error("createButton not implemented"); }; UIComponentFactory.prototype.createInput = function () { throw new Error("createInput not implemented"); };

// 具体工厂 - 浅色主题工厂 function LightThemeFactory() {} LightThemeFactory.prototype = Object.create(UIComponentFactory.prototype); LightThemeFactory.prototype.createButton = function () { return new LightButton(); }; LightThemeFactory.prototype.createInput = function () { return new LightInput(); };

// 具体工厂 - 深色主题工厂 function DarkThemeFactory() {} DarkThemeFactory.prototype = Object.create(UIComponentFactory.prototype); DarkThemeFactory.prototype.createButton = function () { return new DarkButton(); }; DarkThemeFactory.prototype.createInput = function () { return new DarkInput(); };

// 使用示例 const factory = new DarkThemeFactory(); const button = factory.createButton(); const input = factory.createInput();

button.render(); // 输出：渲染深色按钮 input.render(); // 输出：渲染深色输入框

适用场景与优势

这种方案适合以下情况：

• 系统要独立于产品的创建、组合与表示
• 需要一组相互关联或依赖的对象被一起使用
• 强调一系列产品对象的设计一致性（即属于同一家族）
• 提供一个产品类库，而只想暴露接口而非实现

优势包括：隔离具体类、易于交换产品族、保证产品间兼容性、客户端无需修改即可切换整套界面风格。

注意事项与局限

扩展新产品族容易，比如新增“高对比度主题”只需添加对应工厂和产品类。但增加新产品类型困难，例如新增“下拉框”，则所有工厂都要修改接口，违反开闭原则。

在 JavaScript 动态语言中，有时可通过对象字面量和工厂函数简化实现，但在大型应用中，类结构更利于维护和类型推导。

基本上就这些。抽象工厂帮你管理成套对象的创建逻辑，让代码更具组织性和可扩展性。

理论要掌握，实操不能落！以上关于《JavaScript抽象工厂模式：产品族创建全解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！