我已经使用函数作为观察者实现了观察者模式,它似乎按预期工作:
const subjectElem = document.getElementById('subject');
const observerOneElem = document.getElementById('observer-1');
const observerTwoElem = document.getElementById('observer-2');
const subscribeOneElem = document.getElementById('subscribe-1');
const subscribeTwoElem = document.getElementById('subscribe-2');
const subject = new Subject();
// Using functions as Observers
const observer1 = function (data) {
observerOneElem.value = data;
};
const observer2 = function (data) {
observerTwoElem.value = data;
};
subscribeOneElem.addEventListener('change', event => {
if (event.target.checked) {
subject.add(observer1);
} else {
subject.remove(observer1);
}
});
subscribeTwoElem.addEventListener('change', event => {
if (event.target.checked) {
subject.add(observer2);
} else {
subject.remove(observer2)
}
});
subjectElem.addEventListener('keyup', event => {
// notify all subscribed observers
subject.setState(event.target.value);
});
function Subject() {
this.observers = []; // observers list
this._state = '';
}
Subject.prototype.add = function (observer) {
this.observers.push(observer);
}
Subject.prototype.remove = function (observer) {
let i = 0;
while (i < this.observers.length) {
if (this.observers[i] === observer)
break;
i++;
}
this.observers.splice(i, 1);
}
Subject.prototype.setState = function (data) {
this._state = data;
this.observers.forEach(observer => {
observer(data);
});
}
<!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">
<title>JS Sandbox</title>
<style>
.row {
background-color: cornflowerblue;
padding: 1%;
}
</style>
</head>
<h1>Observer Pattern</h1>
<div class="row">
<form>
<label for="subject">Subject:
<input type="text" id="subject">
</label>
</form>
</div>
<br>
<div class="row">
<form>
<label for="observer-1">Observer 1:
<input type="text" id="observer-1">
</label>
<label for="subscribe-1">Subscribe:
<input type="checkbox" id="subscribe-1" unchecked>
</label>
</form>
</div>
<br>
<div class="row">
<form>
<label for="observer-2">Observer 2:
<input type="text" id="observer-2">
</label>
<label for="subscribe-2">Subscribe:
<input type="checkbox" id="subscribe-2" unchecked>
</label>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
我想知道的是如何使用对象作为观察者,我的意思是如何将它们与HTML输入元素连接起来。我想到了这样的构造函数:
function Observer() {
this.notify = function (subject) {
let currentState = subject.getState();
this.value = currentState;
console.log(currentState); // logs current state (testing)
}
}
以及主题中的方法,如下所示:
Subject.prototype.getState = function () {
return this._state;
}
但我看不到如何将 input 元素(observerOneElem
和 observerTwoElem
)与 Observer
的实例连接起来。
答案 0 :(得分:0)
这并不难,只需在实例化 observer 时通过传递 id 来选择 Observer
构造函数中的元素。现在它与作为对象实现的观察者一起工作。 (没有小狗受到伤害,没有咨询图书馆)
const subjectElem = document.getElementById('subject');
const subscribeOneElem = document.getElementById('subscribe-1');
const subscribeTwoElem = document.getElementById('subscribe-2');
const subject = new Subject();
// Using objects as Observers
const observer1 = new Observer('observer-1');
const observer2 = new Observer('observer-2');
subscribeOneElem.addEventListener('change', event => {
if (event.target.checked) {
subject.add(observer1);
} else {
subject.remove(observer1);
}
});
subscribeTwoElem.addEventListener('change', event => {
if (event.target.checked) {
subject.add(observer2);
} else {
subject.remove(observer2)
}
});
subjectElem.addEventListener('keyup', event => {
// notify all subscribed observers
subject.setState(event.target.value);
});
function Subject() {
this.observers = []; // observers list
this._state = '';
}
Subject.prototype.add = function (observer) {
this.observers.push(observer);
}
Subject.prototype.remove = function (observer) {
let i = 0;
while (i < this.observers.length) {
if (this.observers[i] === observer)
break;
i++;
}
this.observers.splice(i, 1);
}
Subject.prototype.setState = function (data) {
this._state = data;
this.observers.forEach(observer => {
observer.notify(this);
});
}
Subject.prototype.getState = function () {
return this._state;
}
function Observer(id) {
this.observer = document.getElementById(id);
this.notify = function (subject) {
let currentState = subject.getState();
this.observer.value = currentState;
}
}