個(gè)人簡介
??個(gè)人主頁： 前端雜貨鋪
???♂?學(xué)習(xí)方向： 主攻前端方向，正逐漸往全干發(fā)展
??個(gè)人狀態(tài)： 研發(fā)工程師，現(xiàn)效力于中國工業(yè)軟件事業(yè)
??人生格言： 積跬步至千里，積小流成江海
??推薦學(xué)習(xí)：??前端面試寶典 ??Vue2 ??Vue3 ??Vue2/3項(xiàng)目實(shí)戰(zhàn) ??Node.js??Three.js ??JS版算法
??個(gè)人推廣：每篇文章最下方都有加入方式，旨在交流學(xué)習(xí)&資源分享，快加入進(jìn)來吧
??前言
大家好，這里是前端雜貨鋪。
上一節(jié)，我們學(xué)習(xí)了構(gòu)造器模式、原型模式和類模式，并認(rèn)識(shí)到了類模式 = 構(gòu)造器模式 + 原型模式。這一節(jié)，我們學(xué)習(xí)簡單工廠模式、抽象工廠模式和建造者模式，認(rèn)識(shí)它們的用途以及區(qū)別…
一、簡單工廠模式
由一個(gè)簡單工廠對(duì)象決定創(chuàng)建某一種產(chǎn)品對(duì)象類的實(shí)例。主要用來創(chuàng)建某一類對(duì)象。
舉個(gè)栗子：對(duì)于后臺(tái)管理系統(tǒng)，一般都會(huì)有 側(cè)邊欄權(quán)限分配 的問題。比如說：
- superadmin 的權(quán)限包括 “home”, “user-manager”, “right-manage”, “news-manage”。
- admin 的權(quán)限包括 “home”, “user-manage”, “news-manage”
- editor 的權(quán)限包括 “home”, “news-manage”
那么當(dāng)某類人員登錄進(jìn)來，側(cè)邊欄就需要顯示該人員權(quán)限范圍內(nèi)的功能，這時(shí)候就可以使用簡單工廠模式。
class User {
constructor(role, pages) {
this.role = role;
this.pages = pages;
}
static UserFactory(role) {
switch (role) {
case "superadmin":
console.log(new User("superadmin", ["home", "user-manager", "right-manage", "news-manage"]));
break;
case "admin":
console.log(new User("admin", ["home", "user-manage", "news-manage"]));
break;
case "editor":
console.log(new User("editor", ["home", "news-manage"]));
break;
default:
throw new Error("參數(shù)錯(cuò)誤");
}
}
}
let user = User.UserFactory("superadmin");
console.log(user);
簡單工廠模式的優(yōu)點(diǎn)：我們只需要一個(gè)正確的參數(shù)，就可以獲取到我們所需要的對(duì)象，無需知道其創(chuàng)建的具體細(xì)節(jié)。
簡單工廠模式的缺點(diǎn)：當(dāng)我們的對(duì)象較多時(shí)，函數(shù)會(huì)非常龐大，難以維護(hù)。
so，簡單工廠模式只適用于 創(chuàng)建的對(duì)象數(shù)量較少，對(duì)象的創(chuàng)建邏輯不復(fù)雜時(shí)使用。
二、抽象工廠模式
抽象工廠模式（Abstract Factory Pattern）是 圍繞一個(gè)超級(jí)工廠創(chuàng)建其他工廠。該超級(jí)工廠又稱為其他工廠的工廠。這種類型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對(duì)象的最佳方式。
抽象工廠模式并不直接生成實(shí)例，而是用于對(duì)產(chǎn)品類簇的創(chuàng)建。
我們先創(chuàng)建一個(gè) User 類（超級(jí)工廠），里面有兩個(gè)方法，welcome() 方法用于歡迎某一類人，dataShow() 方法用于打印某一類人（子類重寫的方式）。
之后我們創(chuàng)建三個(gè)子類 SuperAdmin、Admin、Editor（其他工廠），均繼承自 User，它們繼承父類的 name 和 welcome() 方法，重寫父類的 dataShow() 方法。
最后我們創(chuàng)建 getAbstractUserFactory() 函數(shù)，傳 role 參數(shù)，通過 switch - case 返回相應(yīng)的類進(jìn)行權(quán)限分配。
這樣我們就對(duì)原本龐大的函數(shù)進(jìn)行了解耦，更加容易理解和維護(hù)。
class User {
constructor(name, role, pages) {
this.name = name;
this.role = role;
this.pages = pages;
}
welcome() {
console.log("歡迎回來", this.name);
}
dataShow() {
throw new Error("抽象方法需要被實(shí)現(xiàn)");
}
}
class SuperAdmin extends User {
constructor(name) {
super(name, "superadmin", ["home", "user-manager", "right-manage", "news-manage"]);
}
dataShow() {
console.log("superadmin-datashow");
}
}
class Admin extends User {
constructor(name) {
super(name, "admin", ["home", "user-manage", "news-manage"]);
}
dataShow() {
console.log("admin-datashow");
}
}
class Editor extends User {
constructor(name) {
super(name, "editor", ["home", "news-manage"]);
}
dataShow() {
console.log("editor-datashow");
}
}
function getAbstractUserFactory(role) {
switch(role) {
case "superadmin":
return SuperAdmin;
case "admin":
return Admin;
case "editor":
return Editor;
default:
throw new Error("參數(shù)錯(cuò)誤");
}
}
let UserClass = getAbstractUserFactory("admin");
let user = new UserClass("前端雜貨鋪");
user.dataShow();
user.welcome();
三、建造者模式
建造者模式屬于創(chuàng)建型模式的一種，提供一種創(chuàng)建復(fù)雜對(duì)象的方式。它將一個(gè)復(fù)雜的對(duì)象的構(gòu)建與它的表示分離，使得同樣的構(gòu)建過程可以創(chuàng)建不同的表示。
建造者模式是 一步一步的 創(chuàng)建一個(gè)復(fù)雜的對(duì)象，它 允許用戶只通過指定復(fù)雜的對(duì)象的類型和內(nèi)容就可以構(gòu)建它們，用戶不需要指定內(nèi)部的具體構(gòu)造細(xì)節(jié)。
我們模擬一下場景。如下圖，我們把 分類菜單 看做 NavBar，把 熱門推薦列表的內(nèi)容 看做 List。當(dāng)頁面加載的時(shí)候，會(huì)首先初始化（即 init） NavBar 和 List，之后異步獲取相應(yīng)數(shù)據(jù)（即 getData），最后進(jìn)行頁面渲染（即 render）。
我們構(gòu)建了兩個(gè)同性質(zhì)的類 Navbar 和 List（干的事是一樣的，都是 init => getData => render），之后創(chuàng)建了建造者類 Creator，并添加了一個(gè)異步的 startBuild 方法，它接收一個(gè)參數(shù) builder （即 Navbar 或 List 類的實(shí)例）。我們創(chuàng)建一個(gè) Creator 的實(shí)例，通過實(shí)例去調(diào)用之后 startBuild 方法，之后就可以把復(fù)雜的對(duì)象一步步創(chuàng)建出來了。
class Navbar {
init() {
console.log("navbar-init");
}
getData() {
console.log("navbar-getData");
return new Promise((resolve) => {
setTimeout(() => {
resolve('navbar-zahuopu');
}, 1000);
})
}
render() {
console.log("navbar-render");
}
}
class List {
init() {
console.log("list-init");
}
getData() {
console.log("list-getData");
return new Promise((resolve) => {
setTimeout(() => {
resolve('list-zahuopu');
}, 1000);
})
}
render() {
console.log("list-render");
}
}
class Creator {
async startBuild(builder) {
await builder.init();
await builder.getData();
await builder.render();
}
}
const op = new Creator();
op.startBuild(new Navbar());
op.startBuild(new List());
????本篇小結(jié)
簡單工廠模式和抽象工廠模式都隸屬于設(shè)計(jì)模式中的 創(chuàng)建型模式。
簡單工廠模式是 由一個(gè)工廠對(duì)象決定創(chuàng)建出哪一種產(chǎn)品類的實(shí)例。簡單工廠模式是工廠模式家族中最簡單實(shí)用的模式，可以理解為是不同工廠模式的一個(gè)特殊實(shí)現(xiàn)。
抽象工廠模式是指 當(dāng)有多個(gè)抽象角色時(shí)使用的一種工廠模式。抽象工廠模式可以向客戶端提供一個(gè)接口，使客戶端在不必指定產(chǎn)品的具體情況下，創(chuàng)建多個(gè)產(chǎn)品族中的產(chǎn)品對(duì)象。
建造者模式 將一個(gè)復(fù)雜對(duì)象的構(gòu)建層與其表示層相互分離，同樣的構(gòu)建過程可采用不同的表示。工廠模式主要是為了創(chuàng)建對(duì)象實(shí)例或者類簇（抽象工廠），關(guān)心的最終產(chǎn)出的是什么，而不關(guān)心創(chuàng)建的過程。而建造者模式關(guān)心的是創(chuàng)建這個(gè)對(duì)象的整個(gè)過程，甚至于創(chuàng)建對(duì)象的每一個(gè)細(xì)節(jié)。
好啦，本篇文章到這里就要和大家說再見啦，祝你這篇文章閱讀愉快，你下篇文章的閱讀愉快留著我下篇文章再祝！
參考資料：文章來源：http://www.zghlxwxcb.cn/news/detail-687552.html
- 菜鳥教程 · 抽象工廠模式
- 百度百科 · 簡單工廠模式，抽象工廠模式
- JavaScript設(shè)計(jì)模式 【作者：千鋒教育】
文章來源地址http://www.zghlxwxcb.cn/news/detail-687552.html
到了這里，關(guān)于JavaScript設(shè)計(jì)模式（二）——簡單工廠模式、抽象工廠模式、建造者模式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
