欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年04月26日 12:00:21   作者:掘金安東尼  
這篇文章主要分享JavaScript的?3?種工廠模式,工廠模式是設(shè)計(jì)模式中最常用的設(shè)計(jì)模式之一,這種類型的設(shè)計(jì)模式屬于創(chuàng)建型模式,它提供了一種創(chuàng)建對象的最佳方式,下文關(guān)于工廠模式的更多相關(guān)資料需要的小伙伴可以參考一下

前言;

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

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

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

工廠模式分為:

  • 簡單工廠模式
  • 工廠方法模式
  • 抽象工廠模式

一、簡單工廠模式

簡單工廠模式,也可以叫靜態(tài)工廠模式,用一個(gè)工廠對象創(chuàng)建同一類對象類的實(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í)例對應(yīng)不同的權(quán)限,調(diào)用工廠函數(shù)時(shí),只需傳遞 ??admin??? 或 ??developer?? 就可獲取對應(yīng)的實(shí)例對象。

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

二、工廠方法模式

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

這樣添加新的類時(shí)就無需修改工廠方法,只需要將子類注冊進(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 = '是一個(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,即“對于擴(kuò)展是開放的”) 意思是軟件模塊的行為(功能)可以變化、可以擴(kuò)展。
  • 不可修改(Closed for modifications,即“對于修改是封閉的”) 意思是在擴(kuò)展新功能時(shí),不需要修改原有代碼模塊,而是另外增加一些新的代碼。

三、抽象工廠模式

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

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

抽象工廠只留對外的口子,不做事,留給外界覆蓋(子類重寫接口方法以便創(chuàng)建的時(shí)候指定自己的對象類型)。主要用于對 產(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');

四、小結(jié)

用大白話解釋:

簡單工廠模式就是你給工廠什么,工廠就給你生產(chǎn)什么;

工廠方法模式就是你找工廠生產(chǎn)產(chǎn)品,工廠是外包給下級(jí)分工廠來代加工,需要先評(píng)估一下能不能代加工;能做就接,不能做就找其他工廠;

抽象工廠模式就是工廠接了某項(xiàng)產(chǎn)品訂單但是做不了,上級(jí)集團(tuán)公司新建一個(gè)工廠來專門代加工某項(xiàng)產(chǎn)品;

再實(shí)在一點(diǎn)的解釋:

簡單工廠模式,就是你去線下小賣部買東西,你要罐頭這個(gè)商品,它就會(huì)把擁有罐頭屬性的東西給你;

工廠方法模式,就是你去網(wǎng)購,你要罐頭,首先網(wǎng)店會(huì)判斷自己店里有沒有這個(gè)東西,如果沒有,就去進(jìn)貨;但是注意的是,它進(jìn)貨也并不是先進(jìn)到店里再發(fā)給你,而是直接從進(jìn)貨的子工廠發(fā)給你;

抽象工廠模式,即:做出像淘寶、京東、拼夕夕這樣的工廠,是一個(gè)更高級(jí)別的構(gòu)建,你再去其中買罐頭;

到此這篇關(guān)于分享JavaScript的 3 種工廠模式的用法的文章就介紹到這了,更多相關(guān)JS工廠模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論