如何使用观察者模式?
How can I put the Observer Pattern to use?
我才刚刚开始了解观察者模式的工作原理。但现在我想把它用起来。我看到很多关于观察者模式的示例,但大多数只是简单地演示了该模式,并没有展示它是如何实现以完成任务的。
我了解观察者会收到主题的通知。但是,我怎样才能让观察者做某事呢?
下面的代码是一个普通的观察者模式程序。我看到它在通知观察者时执行 console.log (console.log("Observer " + number + " is notified!");
)。这是我可以 return 其他东西的地方吗:值、函数调用等?
我看过一些直观的示例,其中包含简单的数学运算,可以在通知观察者时更新计算(即,成本 + 税收 = 总计)。但是我找不到一个例子来说明代码是如何实现的。 1. how/where 是 returned 的新成本,并且 2. 因此观察者(函数?)会收到成本已更改的通知; how/where 函数是否收到更新后的费用?
我是新手,模式本身有点令人费解。我很想看到一个超级基本的示例程序。
var Subject = function() {
let observers = [];
return {
subscribeObserver: function(observer) {
observers.push(observer);
},
unsubscribeObserver: function(observer) {
var index = observers.indexOf(observer);
if(index > -1) {
observers.splice(index, 1);
}
},
notifyObserver: function(observer) {
var index = observers.indexOf(observer);
if(index > -1) {
observers[index].notify(index);
}
},
notifyAllObservers: function() {
for(var i = 0; i < observers.length; i++){
observers[i].notify(i);
};
}
};
};
var Observer = function(number) {
return {
notify: function() {
console.log("Observer " + number + " is notified!");
}
}
}
var subject = new Subject();
var observer1 = new Observer(1);
var observer2 = new Observer(2);
subject.subscribeObserver(observer1);
subject.subscribeObserver(observer2);
subject.notifyObserver(observer2);
subject.unsubscribeObserver(observer2);
subject.notifyAllObservers();
只需使用 RxJs 库即可。
const { Subject } = rxjs;
const subject$ = new Subject();
subject$.subscribe(val => { console.log(val); });
subject$.next('Hello');
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.1/rxjs.umd.min.js"></script>
The code below is a common Observer Pattern program. I see that it executes a console.log (console.log("Observer " + number + " is notified!");) when an observer is notified. Is this where I could, instead, return other things: values, function calls, etc.?
是的,当主体调用通知时,它可以传递数据而不是索引或将自身传递给观察者。通过这种方式,观察者可以检查 Subject 的状态并对其进行处理。 notifyObserver 方法变为:
notifyObserver: function(observer) {
var index = observers.indexOf(observer);
if(index > -1) {
observers[index].notify(this);
}
},
观察者是这样的:
var Observer = function(number) {
return {
notify: function(subject) {
// do something with subject
...
}
}
}
在最简单的形式中,Observer 只不过是一个由 Subject 调用的函数。更多 "complex" 观察者将是具有 "notify" 或类似功能的对象、错误处理程序和可能的 "done" 通知,具体取决于主题。
所以这里有一个非常基本的例子来证明这一点:
var Subject = function() {
let observers = [];
return {
subscribe: function(observer) {
observers.push(observer);
},
unsubscribe: function(observer) {
var index = observers.indexOf(observer);
if(index > -1) {
observers.splice(index, 1);
}
},
nextValue: function(value) {
// call every registered observer
for(var i = 0; i < observers.length; i++){
observers[i](value);
}
}
};
};
// now simply pass an observer function to the subject
const subject = new Subject();
subject.subscribe(value => {
// do whatever you want with the value, call functions etc.
console.log(value);
});
subject.nextValue('hello world!');
我才刚刚开始了解观察者模式的工作原理。但现在我想把它用起来。我看到很多关于观察者模式的示例,但大多数只是简单地演示了该模式,并没有展示它是如何实现以完成任务的。
我了解观察者会收到主题的通知。但是,我怎样才能让观察者做某事呢?
下面的代码是一个普通的观察者模式程序。我看到它在通知观察者时执行 console.log (console.log("Observer " + number + " is notified!");
)。这是我可以 return 其他东西的地方吗:值、函数调用等?
我看过一些直观的示例,其中包含简单的数学运算,可以在通知观察者时更新计算(即,成本 + 税收 = 总计)。但是我找不到一个例子来说明代码是如何实现的。 1. how/where 是 returned 的新成本,并且 2. 因此观察者(函数?)会收到成本已更改的通知; how/where 函数是否收到更新后的费用?
我是新手,模式本身有点令人费解。我很想看到一个超级基本的示例程序。
var Subject = function() {
let observers = [];
return {
subscribeObserver: function(observer) {
observers.push(observer);
},
unsubscribeObserver: function(observer) {
var index = observers.indexOf(observer);
if(index > -1) {
observers.splice(index, 1);
}
},
notifyObserver: function(observer) {
var index = observers.indexOf(observer);
if(index > -1) {
observers[index].notify(index);
}
},
notifyAllObservers: function() {
for(var i = 0; i < observers.length; i++){
observers[i].notify(i);
};
}
};
};
var Observer = function(number) {
return {
notify: function() {
console.log("Observer " + number + " is notified!");
}
}
}
var subject = new Subject();
var observer1 = new Observer(1);
var observer2 = new Observer(2);
subject.subscribeObserver(observer1);
subject.subscribeObserver(observer2);
subject.notifyObserver(observer2);
subject.unsubscribeObserver(observer2);
subject.notifyAllObservers();
只需使用 RxJs 库即可。
const { Subject } = rxjs;
const subject$ = new Subject();
subject$.subscribe(val => { console.log(val); });
subject$.next('Hello');
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.1/rxjs.umd.min.js"></script>
The code below is a common Observer Pattern program. I see that it executes a console.log (console.log("Observer " + number + " is notified!");) when an observer is notified. Is this where I could, instead, return other things: values, function calls, etc.?
是的,当主体调用通知时,它可以传递数据而不是索引或将自身传递给观察者。通过这种方式,观察者可以检查 Subject 的状态并对其进行处理。 notifyObserver 方法变为:
notifyObserver: function(observer) {
var index = observers.indexOf(observer);
if(index > -1) {
observers[index].notify(this);
}
},
观察者是这样的:
var Observer = function(number) {
return {
notify: function(subject) {
// do something with subject
...
}
}
}
在最简单的形式中,Observer 只不过是一个由 Subject 调用的函数。更多 "complex" 观察者将是具有 "notify" 或类似功能的对象、错误处理程序和可能的 "done" 通知,具体取决于主题。
所以这里有一个非常基本的例子来证明这一点:
var Subject = function() {
let observers = [];
return {
subscribe: function(observer) {
observers.push(observer);
},
unsubscribe: function(observer) {
var index = observers.indexOf(observer);
if(index > -1) {
observers.splice(index, 1);
}
},
nextValue: function(value) {
// call every registered observer
for(var i = 0; i < observers.length; i++){
observers[i](value);
}
}
};
};
// now simply pass an observer function to the subject
const subject = new Subject();
subject.subscribe(value => {
// do whatever you want with the value, call functions etc.
console.log(value);
});
subject.nextValue('hello world!');