觀察者模式（Observer Pattern）是一種行為設計模式，它定義了一種一對多的依賴關系，讓多個觀察者對象同時監聽某一個主題對象。這個主題對象在狀態發生變化時，會通知所有觀察者對象，使它們能夠自動更新。
一、核心思想
觀察者模式的核心思想是解耦主題（被觀察者）和觀察者，使得它們可以獨立變化而不會相互影響。這有助于降低對象之間的耦合度，提高系統的可擴展性和可維護性。
二、定義與結構
1. 定義
觀察者模式定義了對象之間的一種一對多依賴關系，使得每當一個對象狀態發生改變時，其相關依賴對象皆得到通知并被自動更新。
2. 結構
- Subject（主題）：也稱為被觀察者，它是一個接口或者抽象類，定義了添加、刪除和通知觀察者的方法。它維護了一個觀察者列表，當自身狀態發生變化時，通過遍歷這個列表來通知所有的觀察者。
- ConcreteSubject（具體主題）：實現了Subject接口，它包含了一些可以被觀察的狀態屬性，并且在這些狀態發生變化時，負責調用通知方法來通知觀察者。
- Observer（觀察者）：也是一個接口或者抽象類，它定義了一個更新方法，用于在收到主題通知時更新自己的狀態。
- ConcreteObserver（具體觀察者）：實現了Observer接口，它包含了用于存儲自身狀態的屬性，并且實現了更新方法，在更新方法中根據主題傳遞過來的信息更新自己的狀態。
三、角色
1. 主題（Subject）
- 職責是管理觀察者對象的引用列表，提供添加和刪除觀察者的方法。
- 當自身狀態發生變化時，負責通知所有已注冊的觀察者。
2. 觀察者（Observer）
- 定義了一個更新接口，當收到主題的通知時，會調用這個更新接口來更新自己的狀態。
四、實現步驟及代碼示例
1. 定義觀察者接口
// 觀察者接口
public interface Observer {void update(String news);
}
2. 定義主題接口
import java.util.ArrayList;
import java.util.List;// 主題接口
public interface Subject {void attach(Observer observer);void detach(Observer observer);void notifyObservers(String news);
}
3. 實現具體主題類
import java.util.ArrayList;
import java.util.List;// 具體主題類
public class NewsPublisher implements Subject {private List<Observer> observers = new ArrayList<>();private String latestNews;@Overridepublic void attach(Observer observer) {observers.add(observer);}@Overridepublic void detach(Observer observer) {observers.remove(observer);}@Overridepublic void notifyObservers(String news) {this.latestNews = news;for (Observer observer : observers) {observer.update(latestNews);}}
}
4. 實現具體觀察者類
// 具體觀察者類
public class NewsSubscriber implements Observer {private String name;public NewsSubscriber(String name) {this.name = name;}@Overridepublic void update(String news) {System.out.println(name + " received news: " + news);}
}
5. 測試代碼
public class Main {public static void main(String[] args) {NewsPublisher publisher = new NewsPublisher();NewsSubscriber subscriber1 = new NewsSubscriber("Subscriber 1");NewsSubscriber subscriber2 = new NewsSubscriber("Subscriber 2");publisher.attach(subscriber1);publisher.attach(subscriber2);publisher.notifyObservers("New technology released!");}
}
五、常見技術框架應用
1、Vue 2 數據劫持
在Vue 2中，觀察者模式是通過Object.defineProperty()方法實現的，這允許Vue能夠追蹤數據對象屬性的變化，并在變化發生時觸發相應的更新。以下是對Vue 2中基于Object.defineProperty()實現的觀察者模式的詳細解析：
1.1. 數據劫持
Vue 2 使用Object.defineProperty()來對數據對象的屬性進行劫持。這個方法允許我們定義一個對象屬性的getter和setter函數，當屬性被訪問或修改時，這些函數會被調用。
Object.defineProperty(obj, 'property', {get: function() {// 當屬性被訪問時執行的代碼},set: function(newValue) {// 當屬性被修改時執行的代碼}
});
在Vue中，當數據對象被創建時，Vue會使用Object.defineProperty()遍歷對象的所有屬性，并為它們設置getter和setter。這樣，當這些屬性在將來被訪問或修改時，Vue就能夠感知到。
1.2. 依賴收集
在getter函數中，Vue會進行依賴收集。所謂依賴收集，就是當某個屬性被訪問時，Vue會記錄下當前正在執行的Watcher（觀察者）。Watcher是Vue內部用于追蹤數據變化的機制，它會在數據變化時觸發相應的更新。
當組件渲染或計算屬性被計算時，它們會訪問數據對象的屬性，這時getter函數就會被調用，Vue就會記錄下當前的Watcher。
1.3. 派發更新
在setter函數中，當數據屬性被修改時，Vue會觸發setter函數。在這個函數中，Vue會遍歷之前收集的依賴（Watcher），并通知它們數據已經發生了變化，需要重新執行以更新視圖或計算屬性。
1.4. 觀察者（Watcher）
Watcher是Vue內部的一個類，它用于追蹤數據的變化并在數據變化時執行相應的回調函數。在Vue中，Watcher有三種類型：
- 渲染Watcher：與組件的渲染函數相關聯，當數據變化時，它會重新渲染組件。
- 計算屬性Watcher：與計算屬性相關聯，當計算屬性的依賴數據變化時，它會重新計算計算屬性的值。
- 偵聽器Watcher：通過
vm.$watch方法創建的Watcher，用于在數據變化時執行特定的回調函數。
1.5. 實現細節
Vue 2的內部實現非常復雜，但基于上述原理，我們可以簡化地理解其觀察者模式的實現過程：
- 初始化數據：使用
Object.defineProperty()為數據對象的每個屬性設置getter和setter。 - 依賴收集：在getter函數中，檢查當前是否存在活動的Watcher（通常是在組件渲染或計算屬性計算時），如果存在，則將其添加到該屬性的依賴列表中。
- 派發更新：在setter函數中，當屬性值發生變化時，遍歷該屬性的依賴列表，并通知每個依賴（Watcher）數據已經變化，需要執行更新操作。
1.6. 注意事項
- 由于
Object.defineProperty()只能對對象的已有屬性進行劫持，因此Vue無法檢測到對象屬性的添加或刪除。為了解決這個問題，Vue提供了Vue.set()和Vue.delete()方法。 - 深度監聽：默認情況下，Vue只監聽對象的第一層屬性的變化。如果需要監聽嵌套對象的變化，可以在創建Vue實例時通過
observe選項開啟深度監聽（但請注意性能開銷）。然而，在Vue 2中，深度監聽通常是通過遞歸地為嵌套對象設置getter和setter來實現的，而不是簡單地通過observe選項。實際上，observe選項在Vue 2中并不直接控制深度監聽。 - 響應式系統的局限性：由于JavaScript的限制和性能考慮，Vue的響應式系統有一些局限性。例如，它不能檢測數組元素通過索引的直接修改或對象屬性的添加/刪除（除非使用
Vue.set()/Vue.delete()）。
綜上所述，Vue 2通過Object.defineProperty()實現了觀察者模式，使得Vue能夠追蹤數據對象屬性的變化并在變化發生時自動更新視圖。然而，由于JavaScript的限制和性能考慮，Vue的響應式系統有一些局限性需要注意。
2. JavaScript 中 事件監聽
// 創建一個按鈕元素
const button = document.createElement('button');
button.textContent = 'Click me';// 定義觀察者函數（事件處理函數）
const observerFunction = function () {console.log('Button was clicked!');
};// 主題（按鈕）添加觀察者（事件監聽）
button.addEventListener('click', observerFunction);// 將按鈕添加到文檔中
document.body.appendChild(button);
在這個JavaScript示例中，button是主題，observerFunction是觀察者。當按鈕被點擊（主題狀態改變）時，會觸發觀察者函數，這類似于觀察者模式的通知機制。
六、應用場景
當一個對象的改變需要同時改變其他對象，而不知道具體有多少個對象有待改變時。
當一個抽象模型有兩個方面，其中一個方面依賴于另一方面，這時可以通過觀察者模式將這兩者封裝在獨立的對象中以使它們各自獨立地改變和復用。
當對一個對象的改變需要廣播到其他對象時。
觀察者模式廣泛應用于各種需要通知多個對象進行同步更新的場合，包括但不限于：
- GUI事件監聽機制：在圖形用戶界面編程中，按鈕、文本框等控件的事件處理通常使用觀察者模式。
- 數據模型與視圖同步：在MVC架構中，觀察者模式常用于數據模型和視圖之間的更新同步。
- 發布-訂閱系統：觀察者模式是發布-訂閱系統的基礎，允許不同的服務訂閱某個主題并接收通知。
- 股票價格監控：在金融系統中，觀察者模式可以讓股票價格的變化自動通知所有依賴該數據的系統。
- 社交媒體的通知機制：當用戶發布新動態時，所有關注者都會收到通知。
七、優缺點
優點
- 解耦性高：主題和觀察者之間是松耦合的關系。主題只需要知道觀察者實現了更新方法，而不需要了解觀察者的具體細節。這樣可以方便地添加、刪除和替換觀察者，同時也使得主題和觀察者可以獨立地進行修改和擴展。
- 支持廣播通信：主題可以同時通知多個觀察者，使得系統能夠方便地實現一對多的消息傳遞機制，提高了信息傳播的效率。
缺點
- 可能導致性能問題：如果觀察者數量過多，當主題狀態發生變化時，通知所有觀察者可能會消耗較多的時間和資源。特別是在一些對性能要求較高的場景下，可能需要對通知機制進行優化，比如采用異步通知等方式。
- 存在循環依賴風險：如果觀察者在更新自己狀態的過程中又對主題進行了操作，可能會導致循環依賴，使得系統的邏輯變得復雜，甚至出現死循環等問題。在設計和實現過程中需要特別注意避免這種情況。
