好處是:
//定義觀察者該有的東西,在觀察者模式中習慣用Observer作為關鍵字。
class Observer {
// 唯一標識觀察者的 ID
id: string
//希望每個被創造出來的觀察者都是獨一無二,所以需要id並且用random方式產出
constructor() {
this.id = String(~(Math.random() * 1000)).padStart(3, "0")
}
/**
*用於當 subject 發布消息時,接收消息
* @param data any- 任意類型,保有 subject 發布的消息內容
*/
update = (data: any) => {
console.log(`觀察者 ${this.id} 收到更新消息瘩內容 : ${data}`)
}
}
//定義被觀察者該有的東西
class Subject {
//定義一個私有的佇列屬性
private queue = <Observer[]>[]
//註冊觀察者,需要一個註冊用的接口
register = (observer: Observer) => {
this.queue.push(observer)
}
//移除觀察者
/**
* 移除觀察者
* @param observer - Observer 類型的觀察者對象
*/
remove = (observer: Observer) => {
const queue = this.queue //將 this.queue 存儲到一個局部變數 queue 中,方便後續操作。
let len = queue.length //表示佇列的長度。
//循環遍歷佇列中的每個元素。
for (let i = 0; i < len; i++) {
//判斷當前元素是否是要移除的觀察者
if (queue[i] === observer) {
queue.splice(i, 1) // 從佇列中移除當前元素。
}
}
}
//通知觀察者
/**
* 通知所有註冊的觀察者
* @param data - 任意類型,保有 subject 發布的消息內容
*/
notify = (data: any) => {
// 使用 forEach 方法遍歷 this.queue 中的每個觀察者(observer)
// 對每個觀察者調用其 update 方法,並將 data 作為參數傳遞過去
this.queue.forEach((observer) => observer.update(data))
}
}
//建立主題
const subject = new Subject()
//建立觀察者
const observer1 = new Observer()
const observer2 = new Observer()
const observer3 = new Observer()
const observer4 = new Observer()
const observer5 = new Observer()
//註冊主題
subject.register(observer1)
subject.register(observer2)
subject.register(observer3)
subject.register(observer4)
subject.register(observer5)
//通知觀察者
subject.notify("更新內容" + "hello world")
/**印出
觀察者 -127 收到更新消息瘩內容 : 更新內容hello world
觀察者 -878 收到更新消息瘩內容 : 更新內容hello world
觀察者 -835 收到更新消息瘩內容 : 更新內容hello world
觀察者 -249 收到更新消息瘩內容 : 更新內容hello world
觀察者 -770 收到更新消息瘩內容 : 更新內容hello world
*/
佇列(Queue)是一種資料結構,具有先進先出(FIFO, First In First Out)的特性。簡單來說,這意味著最先加入佇列的元素會最先被移除。
我們可以把佇列想像成排隊的場景。比如在餐廳排隊點餐,先來的人會先排隊,然後他們會先點餐並離開隊伍。後來的人則會排到隊伍的尾端,依序等待自己的順序。
這個特性在現實生活中經常出現,例如排隊買票、排隊取號等。佇列通常使用陣列或鏈結串列(Linked list)來實現。
在 JavaScript 中,佇列是一種重要的資料結構,因為 JavaScript 是單執行緒的程式。這就像一家餐廳只有一位店員在服務所有顧客。如果有一個非常耗時的任務獨佔了這位店員,其他顧客就會被迫等待,導致整個系統(網頁)卡住,使用者體驗會很差。
為了解決這個問題,可以使用佇列來管理這些任務。當有需要等待回應的任務時,不需要讓店員(執行緒)一直等著,而是可以先去服務其他顧客(處理其他任務),把這個需要等待的任務記到佇列裡,等稍後再回來處理。
例如:在電影院排隊買電影票的過程。
這樣一來,售票員就不會因為一個需要時間的顧客而讓整個隊伍卡住,其他顧客也可以快速買到票,整個過程就更有效率。
佇列是一種資料結構,適合處理需要按照先進先出順序執行的任務。它不僅像排隊買電影票那樣處理多人的需求,也能有效地安排和管理程式中的各種執行順序。