我的开源
观察者模式--设计模式之js运用
1、观察者模式
当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。
2、js实现
1）实现一个被观察主题
/**
* 被观察者
* @constructor
*/
function Subject(){
this.observers = [];
this.state = 0;
}
Subject.prototype.setState=function(val){
this.state = val;
this.notifyAllObservers();
}
//添加观察者对象
Subject.prototype.addObs=function(obj){
this.observers.push(obj);
}
//触发通知
Subject.prototype.notifyAllObservers = function(){
for(var i in this.observers){
this.observers[i].update();
}
}
2）实现几个观察者
/**
* 观察者1
* @param subject
* @constructor
*/
function FirstObserver(subject){
this.subject = subject;
subject.addObs(this);
}
FirstObserver.prototype.update=function(){
console.log("first observer:"+this.subject.state);
};
/**
- 观察者2
*/
function SecondObserver(subject){
this.subject = subject;
subject.addObs(this);
}
SecondObserver.prototype.update=function(){
console.log("second observer:"+this.subject.state);
};
3）测试
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="FirstObserver.js"></script>
<script src="SecondObserver.js"></script>
<script src="Subject.js"></script>
</head>
<body>
<script>
var sub = new Subject();
var fo = new FirstObserver(sub);
var so = new SecondObserver(sub);
sub.setState("222");
</script>
</body>
</html>
结果
标题：观察者模式--设计模式之js运用
作者：hugh0524
地址：https://blog.uproject.cn/articles/2016/06/01/1464752821518.html
0 0