这篇文章主要讲解了如何使用javascript中的观察者模式，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
观察者模式是使用频率最高的设计模式之一，用于建立一种对象与对象之间的依赖关系。
定义：定义对象之间的之间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅模式，模型-视图模式，监听模式或从属模式。观察者模式是一种对象行为型模式。
场景：我们使用观察者模式做一个进制转换的小demo
示例：
var Subject = function(){
var obServer = [];
var _state;
this.getState = function(){
return _state;
}
this.setState = function(state){
_state = state;
this.notifyAllObservers();
}
this.attach = function(ob){
obServer.push(ob);
}
this.notifyAllObservers = function(){
obServer.map(function(item){
item.update();
});
}
}
var BinaryObserver = function(subject){
var _subject = subject;
_subject.attach(this);
this.update = function(){
console.log('Binary String:' + _subject.getState().toString(2));
}
}
var OctalObserver = function(subject){
var _subject = subject;
_subject.attach(this);
this.update = function(){
console.log('Octal String:' + _subject.getState().toString(8));
}
}
var HexaObserver = function(subject){
var _subject = subject;
_subject.attach(this);
this.update = function(){
console.log('Hex String:' + _subject.getState().toString(16));
}
}
var subject = new Subject();
new HexaObserver(subject);
new OctalObserver(subject);
new BinaryObserver(subject);
subject.setState(15);
// Hex String:f
// Octal String:17
// Binary String:1111在这个例子里面Subject称为目标，它是被观察的对象，一个目标允许被多个观察者观察，这些观察者存放于obServer的数组中，当目标发生change时通知所有观察者。
BinaryObserver，OctalObserver，HexaObserver这三个类称为观察者，观察者将对目标的改变作出反应。在观察者中需要维护一个指向目标对象的引用。
观察者模式总结：
优点：
* 观察者模式可以实现表示层和数据逻辑层的分离，定义了稳定的消息更新传递机制。
* 观察者模式在观察目标和观察者者之间建立一个抽象的耦合。观察目标只需要维持一个抽象观察者的集合，无需了解其具体观察者。
* 观察者模式支持广播通信，观察目标会向所有已注册的观察者发送通知，简化了一对多系统的设计难度
缺点：
* 在存在大量观察者时，对所有观察者的通知会花大量时间
* 如果观察者和目标之间存在循环依赖，将会导致系统崩溃
适用场景：
* 系统中存在一个对象的改变将导致一个或多个其他对象也发生改变。
* 系统中存在大量依赖链，A影响B，B影响C，C影响D
看完上述内容，是不是对如何使用javascript中的观察者模式有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
