观察者模式也叫做发布-订阅模式，这个设计模式定义了一个1对多的依赖关系。当一个对象的状态发生改变的时候，所有订阅了等等对象都会接到通知
例：汇率转换
人民币是一个发布者，当前只有人民币进行信息的发布，所有的外币，只有接收通知的功能
- 第一步要设置初始dom
- 人民币类，维护一个数组，内部存放的是订阅者列表的信息。然后提供相应的订阅方法subscribe，便于其他的实例进行订阅，让每一个外币在实例化的时候，顺便将自己维护到人民币的数组中
- 外币写一个listen方法，用来订阅rmb发布的信息，rmb设置监听的事件，作用就是用来发布信息的
<body>
<div id="box"></div>
</body>
</html>
<script src="jQuery.min.js"></script>
<script>
//RMB类
function RMB() {
//创建上树
this.$dom = $("<div><span>RMB：</span><input type='text'></div>")
$("#box").append(this.$dom);
//维护订阅者的数组
this.subscribers = [];
//初始化发布消息
this.bindEvent();
}
//RMB 订阅者维护到数组里
RMB.prototype.subscriber = function (o) {
this.subscribers.push(o);
}
//RMB 给每一个订阅者发布消息
RMB.prototype.bindEvent = function () {
//备份this
var self = this;
this.$dom.find("input").bind("input",function () {
//发布消息
for(var i = 0;i< self.subscribers.length;i++){
//给每一个订阅者发布消息，内容为 发布者rmb实时输入的val
self.subscribers[i].listen($(this).val());
}
})
}
//外币类
function ForeignCurrency(title,rate) {
//币种汇率
this.title= title;
this.rate = rate;
//创建节点 上树
this.$dom = $("<div><span>"+this.title+"</span><input type='text' disabled/></div>")
$("#box").append(this.$dom);
//订阅人民币
rmb.subscriber(this);
}
//外币收听方法 接收RMB发布的消息
ForeignCurrency.prototype.listen = function (val) {
var ret = val / this.rate;
this.$dom.find("input").val(ret);
}
var rmb = new RMB()
new ForeignCurrency("美元", '6.5');
new ForeignCurrency("英镑", '8.7');
new ForeignCurrency("日元", '0.063');
new ForeignCurrency("韩元", '0.0058');
</script>
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
