这篇文章主要讲解了如何使用javascript中的观察者模式,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
观察者模式是使用频率最高的设计模式之一,用于建立一种对象与对象之间的依赖关系。
<强>定义:定义对象之间的之间的一种一对多依赖关系,使得每当一个对象状态发生改变时,其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅模式,模型,视图模式,监听模式或从属模式。观察者模式是一种对象行为型模式。
<>强场景:我们使用观察者模式做一个进制转换的小demo
<强>示例:
var主题=function () {
var观察者=[];
var _state;
这一点。getState=function () {
返回_state;
}
这一点。设置状态=function(状态){
_state=状态;
this.notifyAllObservers ();
}
这一点。附加=函数(ob) {
obServer.push (ob);
}
这一点。notifyAllObservers=function () {
obServer.map(函数(项){
item.update ();
}）;
}
}
var BinaryObserver=函数(主题){
var _subject=主题;
_subject.attach(这个);
这一点。更新=function () {
console.log(& # 39;二进制串:& # 39;+ _subject.getState () .toString (2));
}
}
var OctalObserver=函数(主题){
var _subject=主题;
_subject.attach(这个);
这一点。更新=function () {
console.log(& # 39;八进制字符串:& # 39;+ _subject.getState () .toString (8));
}
}
var HexaObserver=函数(主题){
var _subject=主题;
_subject.attach(这个);
这一点。更新=function () {
console.log(& # 39;十六进制字符串:& # 39;+ _subject.getState () .toString (16));
}
}
var=新的主题主题();
新HexaObserver(主题);
新OctalObserver(主题);
新BinaryObserver(主题);
subject.setState (15);//十六进制字符串:f//八进制字符串:17//二进制串:1111 在这个例子里面称主题为目标,它是被观察的对象,一个目标允许被多个观察者观察,这些观察者存放于观察者的数组中,当目标发生变化时通知所有观察者。
BinaryObserver OctalObserver, HexaObserver这三个类称为观察者,观察者将对目标的改变作出反应。在观察者中需要维护一个指向目标对象的引用。
<强>观察者模式总结:
<>强优点:
*观察者模式可以实现表示层和数据逻辑层的分离,定义了稳定的消息更新传递机制。
*观察者模式在观察目标和观察者者之间建立一个抽象的耦合。观察目标只需要维持一个抽象观察者的集合,无需了解其具体观察者。
*观察者模式支持广播通信,观察目标会向所有已注册的观察者发送通知,简化了一对多系统的设计难度
<强>缺点:
*在存在大量观察者时,对所有观察者的通知会花大量时间
*如果观察者和目标之间存在循环依赖,将会导致系统崩溃
<>强适用场景:
*系统中存在一个对象的改变将导致一个或多个其他对象也发生改变。
*系统中存在大量依赖链,一个影响B, B影响C, C影响D
看完上述内容,是不是对如何使用javascript中的观察者模式有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。
