分享JavaScript的?3?種工廠模式的用法
前言;
工廠模式(Factory Pattern)是設(shè)計模式中最常用的設(shè)計模式之一。
這種類型的設(shè)計模式屬于創(chuàng)建型模式,它提供了一種創(chuàng)建對象的最佳方式。
在工廠模式中,我們在創(chuàng)建對象時不會對客戶端暴露創(chuàng)建邏輯,并且是通過使用一個共同的接口來指向新創(chuàng)建的對象。
工廠模式分為:
- 簡單工廠模式
- 工廠方法模式
- 抽象工廠模式
一、簡單工廠模式
簡單工廠模式,也可以叫靜態(tài)工廠模式,用一個工廠對象創(chuàng)建同一類對象類的實例。
比如:
// 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 + ', 權(quán)限:' + this.permissions.join(', ');
console.log(str)
}
function simpleFactory(role){
switch(role) {
case 'admin':
return new Role({
role: '管理員',
permissions: ['設(shè)置', '刪除', '新增', '創(chuàng)建', '開發(fā)', '推送', '提問', '評論']
});
break;
case 'developer':
return new Role({
role: '開發(fā)者',
permissions: ['開發(fā)', '推送', '提問', '評論']
});
break;
default:
throw new Error('參數(shù)只能為 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;
}
// 靜態(tài)方法
static create(role) {
switch (role) {
case 'admin':
return new SimpleFactory({
role: '管理員',
permissions: ['設(shè)置', '刪除', '新增', '創(chuàng)建', '開發(fā)', '推送', '提問', '評論']
});
break;
case 'developer':
return new SimpleFactory({
role: '開發(fā)者',
permissions: ['開發(fā)', '推送', '提問', '評論']
});
break;
default:
throw new Error('參數(shù)只能為 admin 或 developer');
}
}
show() {
const str = `是一個${this.role}, 權(quán)限:${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個實例對應(yīng)不同的權(quán)限,調(diào)用工廠函數(shù)時,只需傳遞 ??admin??? 或 ??developer?? 就可獲取對應(yīng)的實例對象。
注意:作為一種創(chuàng)建類模式,在任何需要生成復(fù)雜對象的地方,都可以使用工廠方法模式。有一點需要注意的地方就是復(fù)雜對象適合使用工廠模式,而簡單對象,特別是只需要通過 new 就可以完成創(chuàng)建的對象,無需使用工廠模式。如果使用工廠模式,就需要引入一個工廠類,會增加系統(tǒng)的復(fù)雜度。
二、工廠方法模式
將實際創(chuàng)建對象工作推遲到子類當(dāng)中,核心類就成了抽象類。
這樣添加新的類時就無需修改工廠方法,只需要將子類注冊進(jìn)工廠方法的原型對象中即可。
比如:
// 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 = '是一個' + this.role + ', 權(quán)限:' + this.permissions.join(', ');
console.log(str)
}
FunctionFactory.prototype.admin = function (permissions) {
this.role = '管理員';
this.permissions = ['設(shè)置', '刪除', '新增', '創(chuàng)建', '開發(fā)', '推送', '提問', '評論'];
}
FunctionFactory.prototype.developer = function (permissions) {
this.role = '開發(fā)者';
this.permissions = ['開發(fā)', '推送', '提問', '評論'];
}
var xm = FunctionFactory('admin');
xm.show();
var xh = FunctionFactory('developer');
xh.show();
var xl = FunctionFactory('guest');
xl.show();當(dāng)需要添加新類時,只需掛載在 ??FunctionFactory.prototype??
上,無需修改工廠方法,也實現(xiàn)了 OCP 原則。
OCP(Open-Closed Principle,開放-封閉原則)由Bertrand Meyer在1988年提出,含義是“軟件實體( 類、模塊、函數(shù)等 )應(yīng)該是可擴展的,但不可修改”。
- 可擴展(Open for extension,即“對于擴展是開放的”) 意思是軟件模塊的行為(功能)可以變化、可以擴展。
- 不可修改(Closed for modifications,即“對于修改是封閉的”) 意思是在擴展新功能時,不需要修改原有代碼模塊,而是另外增加一些新的代碼。
三、抽象工廠模式
抽象工廠模式(Abstract Factory Pattern)是圍繞一個超級工廠創(chuàng)建其他工廠。該超級工廠又稱為其他工廠的工廠。這種類型的設(shè)計模式屬于創(chuàng)建型模式,它提供了一種創(chuàng)建對象的最佳方式。

抽象工廠只留對外的口子,不做事,留給外界覆蓋(子類重寫接口方法以便創(chuàng)建的時候指定自己的對象類型)。主要用于對 產(chǎn)品類簇
的創(chuàng)建,不直接生成實例(簡單工廠模式和工廠方法模式都是生成實例)。
比如 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');四、小結(jié)
用大白話解釋:
簡單工廠模式就是你給工廠什么,工廠就給你生產(chǎn)什么;
工廠方法模式就是你找工廠生產(chǎn)產(chǎn)品,工廠是外包給下級分工廠來代加工,需要先評估一下能不能代加工;能做就接,不能做就找其他工廠;
抽象工廠模式就是工廠接了某項產(chǎn)品訂單但是做不了,上級集團公司新建一個工廠來專門代加工某項產(chǎn)品;
再實在一點的解釋:
簡單工廠模式,就是你去線下小賣部買東西,你要罐頭這個商品,它就會把擁有罐頭屬性的東西給你;
工廠方法模式,就是你去網(wǎng)購,你要罐頭,首先網(wǎng)店會判斷自己店里有沒有這個東西,如果沒有,就去進(jìn)貨;但是注意的是,它進(jìn)貨也并不是先進(jìn)到店里再發(fā)給你,而是直接從進(jìn)貨的子工廠發(fā)給你;
抽象工廠模式,即:做出像淘寶、京東、拼夕夕這樣的工廠,是一個更高級別的構(gòu)建,你再去其中買罐頭;
到此這篇關(guān)于分享JavaScript的 3 種工廠模式的用法的文章就介紹到這了,更多相關(guān)JS工廠模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中的Array 對象(數(shù)組對象)
Array 對象用于在單個的變量中存儲多個值。2016-06-06
javascript實現(xiàn)保留兩位小數(shù)的多種方法
這篇文章主要介紹了javascript實現(xiàn)保留兩位小數(shù)的多種方法,如果數(shù)字的原本小數(shù)位數(shù)不到兩位,那么缺少的就自動補零,感興趣的小伙伴們可以參考一下2015-12-12
javascript之典型高階函數(shù)應(yīng)用介紹二
在前一篇文章javascript之典型高階函數(shù)中主要實現(xiàn)了幾個典型的functional函數(shù),文章最后也提出了疑問,為啥那樣的實現(xiàn)與F#之類的函數(shù)式語言“不太一樣”呢?今天來試試更“函數(shù)式”的實現(xiàn)2013-01-01
vue基于ElementUI動態(tài)設(shè)置表格高度的3種方法
ElementUI+vue動態(tài)設(shè)置表格高度的幾種方法,拋磚引玉,還有其它方法動態(tài)設(shè)置表格高度,大家可以開動腦筋2025-02-02
javascirpt實現(xiàn)2個iframe之間傳值的方法
這篇文章主要介紹了javascirpt實現(xiàn)2個iframe之間傳值的方法,涉及javascript針對iframe框架下的頁面元素操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
JavaScript獲取頁面中表單(form)數(shù)量的方法
這篇文章主要介紹了JavaScript獲取頁面中表單(form)數(shù)量的方法,涉及javascript操作表單document.forms數(shù)組的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04

