作者：晴梔
- 人生天地之間，若白駒之過隙，忽然而已，
觀察者模式
觀察者模式是這樣一種設計模式，一個被稱作被觀察者的物件，維護一組被稱為觀察者的物件，這些物件依賴于被觀察者，被觀察者自動將自身的狀態的任何變化通知給它們，
當一個被觀察者需要將一些變化通知給觀察者的時候，它將采用廣播的方式，這條廣播可能包含特定于這條通知的一些資料，
當特定的觀察者不再需要接受來自于它所注冊的被觀察者的通知的時候，被觀察者可以將其從所維護的組中洗掉， 在這里提及一下設計模式現有的定義很有必要，這個定義是與所使用的語言無關的，通過這個定義，最終我們可以更深層次地了解到設計模式如何使用以及其優勢，在四人幫的《設計模式:可重用的面向物件軟體的元素》這本書中，是這樣定義觀察者模式的:
一個或者更多的觀察者對一個被觀察者的狀態感興趣，將自身的這種興趣通過附著自身的方式注冊在被觀察者身上，當被觀察者發生變化，而這種便可也是觀察者所關心的，就會產生一個通知，這個通知將會被送出去，最后將會呼叫每個觀察者的更新方法，當觀察者不在對被觀察者的狀態感興趣的時候，它們只需要簡單的將自身剝離即可，
我們現在可以通過實作一個觀察者模式來進一步擴展我們剛才所學到的東西，這個實作包含一下組件：
- 被觀察者：維護一組觀察者， 提供用于增加和移除觀察者的方法，
- 觀察者：提供一個更新介面，用于當被觀察者狀態變化時，得到通知，
- 具體的被觀察者：狀態變化時廣播通知給觀察者，保持具體的觀察者的資訊，
- 具體的觀察者：保持一個指向具體被觀察者的參考，實作一個更新介面，用于觀察，以便保證自身狀態總是和被觀察者狀態一致的，
觀察者模式（Observer）
觀察者模式：定義了物件間一種一對多的依賴關系，當目標物件 Subject 的狀態發生改變時，所有依賴它的物件 Observer 都會得到通知，
簡單點：女神有男朋友了，朋友圈曬個圖，甜蜜宣言 “老娘成功脫單，希望你們歡喜”，各位潛藏備胎紛紛失戀，只能安慰自己你不是唯一一個，
模式特征
- 一個目標者物件
Subject，擁有方法：添加 / 洗掉 / 通知Observer； - 多個觀察者物件
Observer，擁有方法：接收Subject狀態變更通知并處理； - 目標物件
Subject狀態變更時，通知所有Observer，
Subject 添加一系列 Observer， Subject 負責維護與這些 Observer 之間的聯系，“你對我有興趣，我更新就會通知你”，
代碼實作
// 目標者類
class Subject {
constructor() {
this.observers = []; // 觀察者串列
}
// 添加
add(observer) {
this.observers.push(observer);
}
// 洗掉
remove(observer) {
let idx = this.observers.findIndex(item => item === observer);
idx > -1 && this.observers.splice(idx, 1);
}
// 通知
notify() {
for (let observer of this.observers) {
observer.update();
}
}
}
// 觀察者類
class Observer {
constructor(name) {
this.name = name;
}
// 目標物件更新時觸發的回呼
update() {
console.log(`目標者通知我更新了，我是：${this.name}`);
}
}
// 實體化目標者
let subject = new Subject();
// 實體化兩個觀察者
let obs1 = new Observer('前端開發者');
let obs2 = new Observer('后端開發者');
// 向目標者添加觀察者
subject.add(obs1);
subject.add(obs2);
// 目標者通知更新
subject.notify();
// 輸出：
// 目標者通知我更新了，我是前端開發者
// 目標者通知我更新了，我是后端開發者
優勢
- 目標者與觀察者，功能耦合度降低，專注自身功能邏輯；
- 觀察者被動接收更新，時間上解耦，實時接收目標者更新狀態，
不完美
觀察者模式雖然實作了物件間依賴關系的低耦合，但卻不能對事件通知進行細分管控，如 “篩選通知”，“指定主題事件通知” ，
比如上面的例子，僅通知 “前端開發者” ？觀察者物件如何只接收自己需要的更新通知？上例中，兩個觀察者接收目標者狀態變更通知后，都執行了 update()，并無區分，
“00后都在追求個性的時代，我能不能有點不一樣？”，這就引出我們的下一個模式，進階版的觀察者模式，“發布訂閱模式”，部分文章對兩者是否一樣都存在爭議，
僅代表個人觀點：兩種模式很類似，但是還是略有不同，就是多了個第三者，因 JavaScript 非正規面向物件語言，且函式回呼編程的特點，使得 “發布訂閱模式” 在 JavaScript 中代碼實作可等同為 “觀察模式”，
發布訂閱模式（Publisher && Subscriber）
發布訂閱模式：基于一個事件（主題）通道，希望接收通知的物件 Subscriber 通過自定義事件訂閱主題，被激活事件的物件 Publisher 通過發布主題事件的方式通知各個訂閱該主題的 Subscriber 物件，
發布訂閱模式與觀察者模式的不同，“第三者” （事件中心）出現，目標物件并不直接通知觀察者，而是通過事件中心來派發通知，
代碼實作
// 事件中心
let pubSub = {
list: {},
subscribe: function (key, fn) { // 訂閱
if (!this.list[key]) {
this.list[key] = [];
}
this.list[key].push(fn);
},
publish: function(key, ...arg) { // 發布
for(let fn of this.list[key]) {
fn.call(this, ...arg);
}
},
unSubscribe: function (key, fn) { // 取消訂閱
let fnList = this.list[key];
if (!fnList) return false;
if (!fn) {
// 不傳入指定取消的訂閱方法，則清空所有key下的訂閱
fnList && (fnList.length = 0);
} else {
fnList.forEach((item, index) => {
if (item === fn) {
fnList.splice(index, 1);
}
})
}
}
}
// 訂閱
pubSub.subscribe('onwork', time => {
console.log(`上班了：${time}`);
})
pubSub.subscribe('offwork', time => {
console.log(`下班了：${time}`);
})
pubSub.subscribe('launch', time => {
console.log(`吃飯了：${time}`);
})
// 發布
pubSub.publish('offwork', '18:00:00');
pubSub.publish('launch', '12:00:00');
// 取消訂閱
pubSub.unSubscribe('onwork');
發布訂閱模式中，訂閱者各自實作不同的邏輯，且只接收自己對應的事件通知，實作你想要的 “不一樣”，
DOM 事件監聽也是 “發布訂閱模式” 的應用：
let loginBtn = document.getElementById('#loginBtn');
// 監聽回呼函式（指定事件）
function notifyClick() {
console.log('我被點擊了');
}
// 添加事件監聽
loginBtn.addEventListener('click', notifyClick);
// 觸發點擊, 事件中心派發指定事件
loginBtn.click();
// 取消事件監聽
loginBtn.removeEventListener('click', notifyClick);
發布訂閱的通知順序：
- 先訂閱后發布時才通知（常規）
- 訂閱后可獲取過往以后的發布通知 （QQ離線訊息，上線后獲取之前的資訊）
觀察者模式簡單實作資料驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous">
<title>觀察者模式</title>
<style>
html,
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding: 50px;
min-height: 400px;
width: 600px;
border-radius: 30px;
background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
}
h1 {
text-align: center;
padding-bottom: 10px;
}
.boxs{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.box {
width: 80%;
padding: 10px;
background: white;
margin: 10px 0;
border-radius: 10px;
text-align: center;
font-weight: bold;
}
.active {
background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
}
</style>
</head>
<body>
<div class="container">
<h1>? ?觀察者模式 ? ?</h1>
<input type="text" class="form-control">
<div class="boxs"></div>
</div>
<script type="text/javascript">
class input{
constructor(el) {
// 觀察者集合
this.observers = new Set()
// 被觀察者
el.addEventListener('input',(e)=>{
// 通知觀察者
this.notityAll(e.target.value)
})
}
// 收集依賴
notityAll(value){
this.observers.forEach(observe =>{
observe.notity(value)
})
}
// 添加觀察者
addObserver(server){
this.observers.add(server)
}
}
// 觀察者
class observer extends DocumentFragment{
constructor(text) {
super();
this.div = document.createElement('div')
this.div.className = "box";
this.div.innerHTML = text;
document.querySelector('.boxs').append(this.div)
}
// 訂閱
notity(value) {
this.div.classList.toggle("active", this.handle(value))
}
}
// 默認字母觀察者
class defaultObserver extends observer {
constructor(text) {
super(text)
this.text = text;
}
handle(value) {
return value.indexOf(this.text) !== -1
}
}
// 對數字觀察者
class numberObserver extends observer {
constructor(text) {
super(text)
this.text = text;
}
handle(value) {
return /\d/.test(value)
}
}
// 系結被觀察者
const ipt = new input(document.querySelector('input'))
// 添加觀察者
ipt.addObserver(new defaultObserver('a'))
ipt.addObserver(new defaultObserver('b'))
ipt.addObserver(new defaultObserver('c'))
ipt.addObserver(new numberObserver("包含數字"))
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/260077.html
標籤：其他