javascript中观察者模式

最新推荐文章于 2025-01-05 01:00:00 发布

原创最新推荐文章于 2025-01-05 01:00:00 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #设计模式 #jquery #测试

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文通过一个报社发送报纸的例子，详细解释了观察者模式的工作原理及其在JavaScript中的实现方式。此外，还介绍了如何将这一模式应用于实际开发中，比如jQuery中的事件绑定机制。

<script type="text/javascript">
/*
	观察者模式又称为发布者-订阅者模式
	实质就是对程序中的某个对象状态进行观察,并且在该对象发生改变时能得到通知
	
	这里用一个报社发送报纸的例子来说明.
*/
// 报社
var Paper = function() {
	this.customers = []; // 报社的订阅者
}

Paper.prototype.sendPaper = function(data) {
	for(var i=0,len=this.customers.length;i<len;i++) {
		this.customers[i].receive(data);
	}
}

// 订阅者
var Customer = function(param) {
	this.name = param.name;
}

// 订阅方法
Customer.prototype.subscibe = function(paper) {	
	var customers = paper.customers;
	var isExist = false;
	for(var i=0,len=customers.length;i<len;i++) {
		if(customers[i] == this) {
			isExist = true;
			break;
		}
	}

	if(!isExist) {
		customers.push(this);
	}

	return this;
}

// 接收方法
Customer.prototype.receive = function(data) {
	console.log(this.name + '接收了' + data.paperName);
}


// 测试

// 申明报社
var BeijingPaper = new Paper();
var TianjinPaper = new Paper();
var ShanghaiPaper = new Paper();

// 申明订阅人
var Jim = new Customer({name:"Jim"});
var Bily = new Customer({name:"Bily"});

// 订阅报纸
Jim.subscibe(BeijingPaper).subscibe(TianjinPaper); // 订阅了北京日报和天津日报
Bily.subscibe(ShanghaiPaper).subscibe(TianjinPaper); // 订阅了上海日报和天津日报

// 报社发送报纸
BeijingPaper.sendPaper({paperName:'北京日报'});
TianjinPaper.sendPaper({paperName:'天津日报'});
ShanghaiPaper.sendPaper({paperName:'上海日报'});

/*
输出:
Jim接收了北京日报
Jim接收了天津日报
Bily接收了天津日报
Bily接收了上海日报
*/
</script>

如果希望把人的行为和程序的行为分开,那么就可以利用观察者模式.
比如说jquery中的事件绑定机制:

$('#foo').bind('click', function() {
  alert($(this).attr('id'));
});

这里就是绑定了一个click事件,然后等待click的触发. 匿名函数可以看成一个回调函数,即订阅者的函数

-------
参考资料:《javascript设计模式》