7、观察者模式

原创 2016年05月30日 23:12:24
1:判断选中的值
2:顺序下来,根据值,修改内容区域
3:再修改广告区域.

if(v == '男') {
   内容区背景变灰
   广告区内容变成男人话题
} else if(v == '女'){
   内容区背景变粉
   广告区内容变成女人话题
}

问题在哪儿?
1:让你选择时引起3个区域的变化,
是否要修改if/elseif部分

2:如果选择女性样式,但不要变粉,现在流行变紫色,是否又要修改if elseif部分?

问题在于: 控制逻辑与被操作对象耦合严重.


我们让div对象观察select的变化,select变化,就会通知道这两个对象.
并引起这2个对象的变化,实现观察者模式

<html>
<meta charset="utf-8" />
<style>
	div{
		margin: 10px;
		width: 500px;
		height: 200px;
	}
	#content 
	{
		border: 1px solid red;
	}
	#ad
	{
		border: 1px solid blue;
	}
	#study
	{
		border: 1px solid blue;
	}
</style>
	<body>
		<h1>用观察者模式来切换</h1>
		<select name="" id="">
			<option value="male">男士风格</option>
			<option value="female">女士风格</option>
		</select>
		<div id="content">我是内容</div>
		<div id="ad">我是广告</div>
		<div id="study">学习区</div>
		<input type="button" value="观察尾部" onclick="t1()">	
		<input type="button" value="别观察尾部" onclick="t2()">	
	</body>
</html>

<script type="text/javascript">
	var sel = document.getElementsByTagName('select')[0];
	sel.observer = {};
	sel.attach = function(key, obj) {
		this.observer[key] = obj;
	}
	sel.detach = function(key)
	{
		delete this.observer[key];
	}
	sel.onchange = sel.notify = function()
	{
		for(var key in this.observer)
		{
			this.observer[key].update(this);
		}
	}

	//客户端
	var content = document.getElementById('content');
	var ad = document.getElementById('ad');
	content.update = function(observer)
	{
		if(observer.value == 'male')
		{
			this.style.backgroundColor = 'gray';
		}else if(observer.value == 'female')
		{
			this.style.backgroundColor = 'pink';
		}
	}
	ad.update = function(observer)
	{
		if(observer.value == 'male')
		{
			this.innerHTML = '汽车';
		}else if(observer.value == 'female')
		{
			this.innerHTML = '减肥';
		}
	}

	//让content观察select的变化
	sel.attach('content', content)
	sel.attach('ad', ad);

	var study = document.getElementById('study');
	study.update = function(observer)
	{
		if(observer.value == 'male')
		{
			this.innerHTML = '学习计算机';
		}else if(observer.value == 'female')
		{
			this.innerHTML = '学习美容';
		}
	}
	sel.attach('study', study);

	function t1()
	{
		sel.detach('study', study);
	}
	function t2()
	{
		sel.detach('study', study);
	}
</script>

版权声明:本文为博主原创文章,未经博主允许不得转载。

观察者模式的浅析

观察者模式的浅析 简单地说,观察者模式定义了一个一对多的依赖关系,让一个或多个观察者对象监察一个主题对象。这样一个主题对象在状态上的变化能够通知所有的依赖于此对象的那些观察者对象,使...
  • Lucky_bo
  • Lucky_bo
  • 2016年06月29日 17:34
  • 694

浅谈为什么设计模式要有观察者模式--观察者模式的意义

设计模式可以说是一种代码规范,也可以说是一种前人总结的奇技淫巧,对于后来编程者,学习设计模式可以对编程思路有一些启发,其中也包括经验启发. php相对java形式比较随意,所以对于模式设计更需要多花时...
  • h330531987
  • h330531987
  • 2017年09月03日 14:23
  • 384

一个用观察者模式解决实际问题的例子

前几天组里接到一个以前开发的已上线项目的维护任务,要求把其中的一些数据定时通过webservice接口上传到当地某市某平台上面,基本上算是个体力活儿了。 时间仓促只好加班加点,搜集比对 -->拼写S...
  • u012763117
  • u012763117
  • 2014年03月09日 02:31
  • 1486

JavaScript设计模式--观察者模式

一、定义观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 在JavaScript中,一般使用事件模型来替代传统的观察者模式...
  • ligang2585116
  • ligang2585116
  • 2015年12月20日 19:22
  • 5103

观察者模式(看完马士兵视频的总结)

例子就是一个小孩在睡觉,当小孩醒过来之后,爸爸要喂奶,爷爷要
  • oWuGuanFengYue123
  • oWuGuanFengYue123
  • 2014年05月06日 11:45
  • 1617

JAVA中观察者模式示例

观察者模式是关于多个对象想知道一个对象中数据变化情况的一种成熟模式。观察者模式中有一个称作“主题”的对象和若干个称作“观察者”的对象,“主题”和“观察者”之间是一种一对多的依赖关系 。当“主题”...
  • qq7342272
  • qq7342272
  • 2011年10月26日 15:36
  • 6919

设计模式介绍之七:观察者模式(observer)

观察者模式(又称发布/订阅模式)定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新...
  • foruok
  • foruok
  • 2014年02月18日 19:55
  • 7375

设计模式实战应用之二:观察者模式

观察者模式的定义         观察者模式是应用最普遍的设计模式之一。著名的 MVC 模式就是观察者模式的应用之一。Gof 把观察者模式归类到对象行为型模式,《设计模式:可复用面向对象软件的基础》对...
  • defonds
  • defonds
  • 2013年12月04日 18:42
  • 5898

线程安全的观察者模式的设计

观察者模式的应用,主要的行为就是注册和移除观察者(observer),以及通知所有已注册的Observers。这里介绍的是Chromium项目中实现的线程安全的观察者管理及通知的基础类Observer...
  • HorkyChen
  • HorkyChen
  • 2015年08月05日 01:12
  • 2914

Unity设计模式:观察者模式

初学编程的时候内容比较少没有数据交互,等内容多到需要多个文件多个类协同运行的时候就涉及到类之间的数据交互了。比较简单的数据交互是这些类之间互相引用,直接或间接传值或调用,但是这样类之间的耦合性太高了,...
  • ylbs110
  • ylbs110
  • 2016年12月31日 08:36
  • 545
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:7、观察者模式
举报原因:
原因补充:

(最多只允许输入30个字)