工廠方法模式
工廠方法模式是一種創(chuàng)建型設(shè)計(jì)模式，它提供了一種將對(duì)象的創(chuàng)建與使用分離的方式。在工廠方法模式中，我們定義一個(gè)工廠接口，該接口聲明了一個(gè)用于創(chuàng)建對(duì)象的方法。具體的對(duì)象創(chuàng)建則由實(shí)現(xiàn)該接口的具體工廠類來完成。
工廠方法模式的核心思想是將對(duì)象的創(chuàng)建延遲到子類中去實(shí)現(xiàn)，這樣可以在不修改客戶端代碼的情況下，通過改變具體工廠類來創(chuàng)建不同的對(duì)象。
工廠方法模式的優(yōu)點(diǎn)包括：
- 客戶端代碼與具體產(chǎn)品類解耦，客戶端只需要關(guān)心工廠接口和抽象產(chǎn)品類，而不需要關(guān)心具體產(chǎn)品的實(shí)現(xiàn)細(xì)節(jié)。
- 可以通過添加具體產(chǎn)品類來擴(kuò)展系統(tǒng)，符合開閉原則。
- 可以通過配置文件等方式動(dòng)態(tài)切換具體工廠類，實(shí)現(xiàn)靈活的對(duì)象創(chuàng)建。
工廠方法模式在實(shí)際開發(fā)中廣泛應(yīng)用，例如在框架中的對(duì)象創(chuàng)建、插件系統(tǒng)中的插件加載等場(chǎng)景中都可以使用工廠方法模式來實(shí)現(xiàn)靈活的對(duì)象創(chuàng)建和管理。
class Factory {
// 定義一個(gè)工廠方法
static createPlug(type) {
switch (type) {
case 'plugA':
return new plugA()
case 'plugB':
return new plugB()
default:
throw new Error('Invalid plug type')
}
}
}
interface Plug {
id: string
name: string
start(): void
}
// 插件A
class plugA implements Plug {
id: string
name: string
constructor() {
this.id = 'plugA'
this.name = 'plugA'
}
//啟動(dòng)方法
start() {
console.log('plugA啟動(dòng)了')
}
}
// 插件B
class plugB implements Plug {
id: string
name: string
constructor() {
this.id = 'plugB'
this.name = 'plugB'
}
//啟動(dòng)方法
start() {
console.log('plugB啟動(dòng)了')
}
}
try {
const list = ['plugA', 'plugB']
list.forEach(type => {
const plug = Factory.createPlug(type)
plug.start()
})
} catch (error) {
console.log('插件錯(cuò)誤：', error)
}
單例模式
單例模式是一種創(chuàng)建型設(shè)計(jì)模式，它確保一個(gè)類只有一個(gè)實(shí)例，并提供一個(gè)全局訪問點(diǎn)來訪問該實(shí)例。
在單例模式中，類的構(gòu)造函數(shù)被私有化，這樣就不能通過常規(guī)的方式創(chuàng)建類的實(shí)例。而是通過一個(gè)靜態(tài)方法或者靜態(tài)變量來獲取類的唯一實(shí)例。
單例模式的主要特點(diǎn)包括：
- 類只有一個(gè)實(shí)例：通過限制類的實(shí)例化，確保只有一個(gè)實(shí)例存在。
- 全局訪問點(diǎn)：通過提供一個(gè)全局的訪問點(diǎn)，使得其他對(duì)象可以方便地訪問該實(shí)例。
單例模式的應(yīng)用場(chǎng)景包括：
- 需要確保只有一個(gè)實(shí)例的情況，如線程池、數(shù)據(jù)庫連接池等。
- 需要頻繁創(chuàng)建和銷毀對(duì)象的情況下，可以節(jié)省系統(tǒng)資源。
- 需要全局訪問點(diǎn)來管理共享資源的情況。
class Singleton {
private static instance: Singleton;
private constructor() {
// 私有化構(gòu)造函數(shù)，防止外部實(shí)例化
}
public static getInstance(): Singleton {
if (!Singleton.instance) {
Singleton.instance = new Singleton();
}
return Singleton.instance;
}
// 其他類的方法或?qū)傩?
public doSomething() {
console.log("Doing something...");
}
}
// 訪問單例模式對(duì)象
const singleton = Singleton.getInstance();
singleton.doSomething();
訂閱模式
訂閱模式（Publish-Subscribe Pattern）是一種常見的軟件設(shè)計(jì)模式，用于實(shí)現(xiàn)對(duì)象之間的松耦合通信。在該模式中，存在兩種角色：發(fā)布者（Publisher）和訂閱者（Subscriber）。
發(fā)布者負(fù)責(zé)產(chǎn)生事件或消息，并將其發(fā)送給所有訂閱者。訂閱者則注冊(cè)對(duì)特定事件或消息的興趣，并在發(fā)布者發(fā)送相應(yīng)事件或消息時(shí)接收并處理它們。
訂閱模式的核心思想是解耦發(fā)布者和訂閱者之間的關(guān)系，使得它們可以獨(dú)立地演化和擴(kuò)展。發(fā)布者不需要知道訂閱者的具體實(shí)現(xiàn)，只需要將事件或消息發(fā)送給訂閱者即可。同樣，訂閱者也不需要知道發(fā)布者的具體實(shí)現(xiàn)，只需要注冊(cè)對(duì)感興趣的事件或消息，并在接收到它們時(shí)進(jìn)行相應(yīng)的處理。
在實(shí)際應(yīng)用中，訂閱模式常用于事件驅(qū)動(dòng)的系統(tǒng)中，例如GUI界面中的事件處理、消息隊(duì)列系統(tǒng)、觀察者模式等。它可以有效地降低系統(tǒng)的耦合度，提高系統(tǒng)的可維護(hù)性和可擴(kuò)展性。
總結(jié)起來，訂閱模式通過發(fā)布者和訂閱者之間的松耦合通信，實(shí)現(xiàn)了事件或消息的傳遞和處理。它是一種常見的設(shè)計(jì)模式，可以應(yīng)用于各種軟件系統(tǒng)中，提高系統(tǒng)的靈活性和可擴(kuò)展性。
// 發(fā)布者
class Publisher {
private subscribers: Subscriber[] = [];
// 添加訂閱者
public subscribe(subscriber: Subscriber): void {
this.subscribers.push(subscriber);
}
// 移除訂閱者
public unsubscribe(subscriber: Subscriber): void {
const index = this.subscribers.indexOf(subscriber);
if (index !== -1) {
this.subscribers.splice(index, 1);
}
}
// 發(fā)布消息
public publish(message: string): void {
console.log(`Publisher: ${message}`);
this.subscribers.forEach((subscriber) => {
subscriber.update(message);
});
}
}
// 訂閱者
class Subscriber {
private name: string;
constructor(name: string) {
this.name = name;
}
// 接收并處理消息
public update(message: string): void {
console.log(`${this.name} received: ${message}`);
}
}
// 創(chuàng)建發(fā)布者和訂閱者
const publisher = new Publisher();
const subscriber1 = new Subscriber("Subscriber 1");
const subscriber2 = new Subscriber("Subscriber 2");
// 訂閱者訂閱發(fā)布者
publisher.subscribe(subscriber1);
publisher.subscribe(subscriber2);
// 發(fā)布者發(fā)布消息
publisher.publish("Hello, World!");
// 訂閱者取消訂閱
publisher.unsubscribe(subscriber2);
// 發(fā)布者再次發(fā)布消息
publisher.publish("Goodbye!");
中介者模式
中介者模式（Mediator Pattern）是一種行為型設(shè)計(jì)模式，它通過封裝一系列對(duì)象之間的交互，使得這些對(duì)象不需要直接相互引用，從而降低了它們之間的耦合度。
在中介者模式中，中介者對(duì)象負(fù)責(zé)協(xié)調(diào)和控制一組相關(guān)對(duì)象的交互。它通過將對(duì)象之間的通信集中在中介者對(duì)象中，而不是讓對(duì)象直接相互通信，從而實(shí)現(xiàn)對(duì)象之間的解耦。
中介者模式的核心思想是將對(duì)象之間的交互邏輯集中在中介者對(duì)象中，而不是分散在各個(gè)對(duì)象之間。這樣一來，當(dāng)系統(tǒng)中的對(duì)象發(fā)生變化時(shí)，只需要修改中介者對(duì)象的代碼即可，而不需要修改其他對(duì)象的代碼，從而提高了系統(tǒng)的可維護(hù)性和擴(kuò)展性。文章來源：http://www.zghlxwxcb.cn/news/detail-526304.html
比如：聊天室中的成員之間的聊天通常采用了中介者設(shè)計(jì)模式。中介者設(shè)計(jì)模式是一種行為型設(shè)計(jì)模式，它通過將對(duì)象之間的交互集中在一個(gè)中介者對(duì)象中，來減少對(duì)象之間的直接耦合。在聊天室中，中介者對(duì)象負(fù)責(zé)接收和分發(fā)成員之間的消息，成員之間的通信通過中介者進(jìn)行，而不是直接相互交流。這種設(shè)計(jì)模式可以提高系統(tǒng)的可擴(kuò)展性和靈活性，同時(shí)也方便管理和控制成員之間的交互文章來源地址http://www.zghlxwxcb.cn/news/detail-526304.html
// 定義聊天室類
class ChatRoom {
private readonly users: Set<User> = new Set();
// 添加用戶
public addUser(user: User): void {
this.users.add(user);
}
// 移除用戶
public removeUser(user: User): void {
this.users.delete(user);
}
// 發(fā)送消息
public sendMessage(sender: User, message: string): void {
for (const user of this.users) {
if (user !== sender) {
user.receiveMessage(sender, message);
}
}
}
}
// 定義用戶類
class User {
private name: string;
constructor(name: string) {
this.name = name;
}
// 接收消息
public receiveMessage(sender: User, message: string): void {
console.log(`[${sender.name}] ${message}`);
}
}
// 創(chuàng)建聊天室和用戶
const chatRoom = new ChatRoom();
const user1 = new User("User 1");
const user2 = new User("User 2");
// 將用戶添加到聊天室
chatRoom.addUser(user1);
chatRoom.addUser(user2);
// 發(fā)送消息
chatRoom.sendMessage(user1, "Hello, is there anyone out there?");
chatRoom.sendMessage(user2, "Yes, I'm here.");
到了這里，關(guān)于前端設(shè)計(jì)模式：工廠方法模式、單例模式、訂閱模式、中介者模式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
