JavaScript的3種工廠模式怎么用

這篇“JavaScript的3種工廠模式怎么用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“JavaScript的3種工廠模式怎么用”文章吧。

前言;

工廠模式（Factory Pattern）是設(shè)計(jì)模式中最常用的設(shè)計(jì)模式之一。

這種類型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對(duì)象的最佳方式。

在工廠模式中，我們?cè)趧?chuàng)建對(duì)象時(shí)不會(huì)對(duì)客戶端暴露創(chuàng)建邏輯，并且是通過(guò)使用一個(gè)共同的接口來(lái)指向新創(chuàng)建的對(duì)象。

工廠模式分為：

• 簡(jiǎn)單工廠模式

• 工廠方法模式

• 抽象工廠模式

一、簡(jiǎn)單工廠模式

簡(jiǎ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ā)', '推送', '提問(wèn)', '評(píng)論']
});
break;
case 'developer':
return new Role({
role: '開發(fā)者',
permissions: ['開發(fā)', '推送', '提問(wèn)', '評(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ā)', '推送', '提問(wèn)', '評(píng)論']
});
break;
case 'developer':
return new SimpleFactory({
role: '開發(fā)者',
permissions: ['開發(fā)', '推送', '提問(wèn)', '評(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è)簡(jiǎn)單工廠，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ì)象適合使用工廠模式，而簡(jiǎn)單對(duì)象，特別是只需要通過(guò) new 就可以完成創(chuàng)建的對(duì)象，無(wú)需使用工廠模式。如果使用工廠模式，就需要引入一個(gè)工廠類，會(huì)增加系統(tǒng)的復(fù)雜度。

二、工廠方法模式

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

這樣添加新的類時(shí)就無(wú)需修改工廠方法，只需要將子類注冊(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ā)', '推送', '提問(wèn)', '評(píng)論'];
}
FunctionFactory.prototype.developer = function (permissions) {
this.role = '開發(fā)者';
this.permissions = ['開發(fā)', '推送', '提問(wèn)', '評(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

 上，無(wú)需修改工廠方法，也實(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ì)象的最佳方式。

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

的創(chuàng)建，不直接生成實(shí)例（簡(jiǎn)單工廠模式和工廠方法模式都是生成實(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');

以上就是關(guān)于“JavaScript的3種工廠模式怎么用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。