JavaScript的3种工厂模式怎么用

这篇“javascript的3种工厂模式怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript的3种工厂模式怎么用”文章吧。

前言;

工厂模式（Factory Pattern）是设计模式中最常用的设计模式之一。

这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。

在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。

工厂模式分为：

• 简单工厂模式

• 工厂方法模式

• 抽象工厂模式

一、简单工厂模式

简单工厂模式，也可以叫静态工厂模式，用一个工厂对象创建同一类对象类的实例。

比如：

// 0.0.2/es5.simple.factory.jsfunction Role(options){this.role = options.role;this.permissions = options.permissions;}Role.prototype.show = function (){var str = '是一个' + this.role + ', 权限：' + this.permissions.join(', ');console.log(str)}function simpleFactory(role){switch(role) {case 'admin':return new Role({role: '管理员',permissions: ['设置', '删除', '新增', '创建', '开发', '推送', '提问', '评论']});break;case 'developer':return new Role({role: '开发者',permissions: ['开发', '推送', '提问', '评论']});break;default:throw new Error('参数只能为 admin 或 developer');}}// 实例const xm = simpleFactory('admin');xm.show();const xh = simpleFactory('developer');xh.show();const xl = simpleFactory('guest');xl.show();

ES6 写法：

// 0.0.2/simple.factory.jsclass SimpleFactory {constructor(opt) {this.role = opt.role;this.permissions = opt.permissions;}// 静态方法static create(role) {switch (role) {case 'admin':return new SimpleFactory({role: '管理员',permissions: ['设置', '删除', '新增', '创建', '开发', '推送', '提问', '评论']});break;case 'developer':return new SimpleFactory({role: '开发者',permissions: ['开发', '推送', '提问', '评论']});break;default:throw new Error('参数只能为 admin 或 developer');}}show() {const str = `是一个${this.role}, 权限：${this.permissions.join(', ')}`;console.log(str);}}// 实例const xm = SampleFactory.create('admin');xm.show();const xh = SampleFactory.create('developer');xh.show();const xl = SampleFactory.create('guest');xl.show();

上例中，simpleFactory就是一个简单工厂，2个实例对应不同的权限，调用工厂函数时，只需传递 admin 或 developer 就可获取对应的实例对象。

注意：作为一种创建类模式，在任何需要生成复杂对象的地方，都可以使用工厂方法模式。有一点需要注意的地方就是复杂对象适合使用工厂模式，而简单对象，特别是只需要通过 new 就可以完成创建的对象，无需使用工厂模式。如果使用工厂模式，就需要引入一个工厂类，会增加系统的复杂度。

二、工厂方法模式

将实际创建对象工作推迟到子类当中，核心类就成了抽象类。

这样添加新的类时就无需修改工厂方法，只需要将子类注册进工厂方法的原型对象中即可。

比如：

// 0.0.2/es5.function.factory.jsfunction FunctionFactory(role) {if(!(['admin', 'developer'].indexOf(role) > -1)){throw new Error('参数只能为 admin 或 developer');}// 安全的工厂方法if (this instanceof FunctionFactory) {return this[role]();}return new FunctionFactory(role);}FunctionFactory.prototype.show = function () {var str = '是一个' + this.role + ', 权限：' + this.permissions.join(', ');console.log(str)}FunctionFactory.prototype.admin = function (permissions) {this.role = '管理员';this.permissions = ['设置', '删除', '新增', '创建', '开发', '推送', '提问', '评论'];}FunctionFactory.prototype.developer = function (permissions) {this.role = '开发者';this.permissions = ['开发', '推送', '提问', '评论'];}var xm = FunctionFactory('admin');xm.show();var xh = FunctionFactory('developer');xh.show();var xl = FunctionFactory('guest');xl.show();

当需要添加新类时，只需挂载在 FunctionFactory.prototype

 上，无需修改工厂方法，也实现了 OCP 原则。

OCP（Open-Closed Principle，开放-封闭原则）由Bertrand Meyer在1988年提出，含义是“软件实体（ 类、模块、函数等 ）应该是可扩展的，但不可修改”。

• 可扩展（Open for extension，即“对于扩展是开放的”） 意思是软件模块的行为（功能）可以变化、可以扩展。

• 不可修改（Closed for modifications，即“对于修改是封闭的”） 意思是在扩展新功能时，不需要修改原有代码模块，而是另外增加一些新的代码。

抽象工厂模式

抽象工厂模式（Abstract Factory Pattern）是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。

抽象工厂只留对外的口子，不做事，留给外界覆盖（子类重写接口方法以便创建的时候指定自己的对象类型）。主要用于对 产品类簇

的创建，不直接生成实例（简单工厂模式和工厂方法模式都是生成实例）。

比如 Jquery：

// 0.0.2/Jquery.factory.js// 工厂模式class jQuery {constructor(selector) {let slice = Array.prototype.slice;let dom = slice.call(document.querySelectorAll(selector));let len = dom ? dom.length : 0;for (let i = 0; i < len; i++) {this[i] = dom[i];}this.length = lenthis.selector = selector || ''}addClass(name) {console.log(name)}html(data) {}// 省略多个 api}// 工厂模式window.$ = function(selector) {return new jQuery(selector);}// 实例const $li = $('li')$li.addClass('item');

以上就是关于“JavaScript的3种工厂模式怎么用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。