JavaScript的3種工廠模式怎么用

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

前言;

工廠模式（Factory Pattern）是設計模式中最常用的設計模式之一。

這種類型的設計模式屬于創建型模式，它提供了一種創建對象的最佳方式。

在工廠模式中，我們在創建對象時不會對客戶端暴露創建邏輯，并且是通過使用一個共同的接口來指向新創建的對象。

工廠模式分為：

• 簡單工廠模式

• 工廠方法模式

• 抽象工廠模式

一、簡單工廠模式

簡單工廠模式，也可以叫靜態工廠模式，用一個工廠對象創建同一類對象類的實例。

比如：

// 0.0.2/es5.simple.factory.js
function 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.js
class 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.js
function 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 = len
this.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種工廠模式怎么用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。