快捷導(dǎo)航

分享JavaScript的?3?種工廠模式的用法

更新時(shí)間：2022年04月26日 12:00:21 作者：掘金安東尼

這篇文章主要分享JavaScript的?3?種工廠模式,工廠模式是設(shè)計(jì)模式中最常用的設(shè)計(jì)模式之一，這種類型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對(duì)象的最佳方式，下文關(guān)于工廠模式的更多相關(guān)資料需要的小伙伴可以參考一下

一、簡單工廠模式

簡單工廠模式，也可以叫靜態(tài)工廠模式，用一個(gè)工廠對(duì)象創(chuàng)建同一類對(duì)象類的實(shí)例。

比如：

// 0.0.2/es5.simple.factory.js
function Role(options){
this.role = options.role;
this.permissions = options.permissions;
}
Role.prototype.show = function (){
var str = '是一個(gè)' + this.role + ', 權(quán)限：' + this.permissions.join(', ');
console.log(str)
}
function simpleFactory(role){
switch(role) {
case 'admin':
return new Role({
role: '管理員',
permissions: ['設(shè)置', '刪除', '新增', '創(chuàng)建', '開發(fā)', '推送', '提問', '評(píng)論']
});
break;
case 'developer':
return new Role({
role: '開發(fā)者',
permissions: ['開發(fā)', '推送', '提問', '評(píng)論']
});
break;
default:
throw new Error('參數(shù)只能為 admin 或 developer');
}
}
// 實(shí)例
const xm = simpleFactory('admin');
xm.show();
const xh = simpleFactory('developer');
xh.show();
const xl = simpleFactory('guest');
xl.show();

ES6 寫法：

// 0.0.2/simple.factory.js
class SimpleFactory {
constructor(opt) {
this.role = opt.role;
this.permissions = opt.permissions;
}
// 靜態(tài)方法
static create(role) {
switch (role) {
case 'admin':
return new SimpleFactory({
role: '管理員',
permissions: ['設(shè)置', '刪除', '新增', '創(chuàng)建', '開發(fā)', '推送', '提問', '評(píng)論']
});
break;
case 'developer':
return new SimpleFactory({
role: '開發(fā)者',
permissions: ['開發(fā)', '推送', '提問', '評(píng)論']
});
break;
default:
throw new Error('參數(shù)只能為 admin 或 developer');
}
}
show() {
const str = `是一個(gè)${this.role}, 權(quán)限：${this.permissions.join(', ')}`;
console.log(str);
}
}
// 實(shí)例
const xm = SampleFactory.create('admin');
xm.show();
const xh = SampleFactory.create('developer');
xh.show();
const xl = SampleFactory.create('guest');
xl.show();

上例中，??simpleFactory???就是一個(gè)簡單工廠，2個(gè)實(shí)例對(duì)應(yīng)不同的權(quán)限，調(diào)用工廠函數(shù)時(shí)，只需傳遞 ??admin??? 或 ??developer?? 就可獲取對(duì)應(yīng)的實(shí)例對(duì)象。

注意：作為一種創(chuàng)建類模式，在任何需要生成復(fù)雜對(duì)象的地方，都可以使用工廠方法模式。有一點(diǎn)需要注意的地方就是復(fù)雜對(duì)象適合使用工廠模式，而簡單對(duì)象，特別是只需要通過 new 就可以完成創(chuàng)建的對(duì)象，無需使用工廠模式。如果使用工廠模式，就需要引入一個(gè)工廠類，會(huì)增加系統(tǒng)的復(fù)雜度。

二、工廠方法模式

將實(shí)際創(chuàng)建對(duì)象工作推遲到子類當(dāng)中，核心類就成了抽象類。

這樣添加新的類時(shí)就無需修改工廠方法，只需要將子類注冊(cè)進(jìn)工廠方法的原型對(duì)象中即可。

比如：

// 0.0.2/es5.function.factory.js
function FunctionFactory(role) {
if(!(['admin', 'developer'].indexOf(role) > -1)){
throw new Error('參數(shù)只能為 admin 或 developer');
}
// 安全的工廠方法
if (this instanceof FunctionFactory) {
return this[role]();
}
return new FunctionFactory(role);
}
FunctionFactory.prototype.show = function () {
var str = '是一個(gè)' + this.role + ', 權(quán)限：' + this.permissions.join(', ');
console.log(str)
}
FunctionFactory.prototype.admin = function (permissions) {
this.role = '管理員';
this.permissions = ['設(shè)置', '刪除', '新增', '創(chuàng)建', '開發(fā)', '推送', '提問', '評(píng)論'];
}
FunctionFactory.prototype.developer = function (permissions) {
this.role = '開發(fā)者';
this.permissions = ['開發(fā)', '推送', '提問', '評(píng)論'];
}
var xm = FunctionFactory('admin');
xm.show();
var xh = FunctionFactory('developer');
xh.show();
var xl = FunctionFactory('guest');
xl.show();

當(dāng)需要添加新類時(shí)，只需掛載在 ??FunctionFactory.prototype??

上，無需修改工廠方法，也實(shí)現(xiàn)了 OCP 原則。

OCP（Open-Closed Principle，開放-封閉原則）由Bertrand Meyer在1988年提出，含義是“軟件實(shí)體（類、模塊、函數(shù)等）應(yīng)該是可擴(kuò)展的，但不可修改”。

可擴(kuò)展（Open for extension，即“對(duì)于擴(kuò)展是開放的”）意思是軟件模塊的行為（功能）可以變化、可以擴(kuò)展。
不可修改（Closed for modifications，即“對(duì)于修改是封閉的”）意思是在擴(kuò)展新功能時(shí)，不需要修改原有代碼模塊，而是另外增加一些新的代碼。

三、抽象工廠模式

抽象工廠模式（Abstract Factory Pattern）是圍繞一個(gè)超級(jí)工廠創(chuàng)建其他工廠。該超級(jí)工廠又稱為其他工廠的工廠。這種類型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對(duì)象的最佳方式。

分分鐘理解 3 種工廠模式_簡單工廠模式

抽象工廠只留對(duì)外的口子，不做事，留給外界覆蓋（子類重寫接口方法以便創(chuàng)建的時(shí)候指定自己的對(duì)象類型）。主要用于對(duì) 產(chǎn)品類簇

的創(chuàng)建，不直接生成實(shí)例（簡單工廠模式和工廠方法模式都是生成實(shí)例）。

比如 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 = len
this.selector = selector || ''
}
addClass(name) {
console.log(name)
}
html(data) {
}
// 省略多個(gè) API
}
// 工廠模式
window.$ = function(selector) {
return new jQuery(selector);
}
// 實(shí)例
const $li = $('li')
$li.addClass('item');