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>

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

设计模式深入学习IOS版(7)观察者模式

1 前言   观察者(Observer)模式也叫发布/订阅(Publish/Subscribe)模式,是MVC(模型-视图-控制器)模式的重要组成部分。在IOS的Cocoa Touch里面也有的广泛的...

设计模式: 7. 观察者模式(Observer)

1. 介绍1.1 针对的问题 相同内容多种展示形式一个内容, 可以有多种展示形式. 例如某各数据, 既可以用表格, 也可以用柱状图,饼状图来展示. 如何保证内容与展示统一, 且即时更新. 1.2 解决...

观察者模式for android demo

  • 2017年09月30日 11:09
  • 22MB
  • 下载

【观察者模式】(Observer)

【观察者模式】(Observer) 定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖者都会受到通知并自动更新。 (直观感觉有点类似于MQ中的Topic!,简单看了下实现,能...

Android基于观察者模式下载管理

  • 2017年11月08日 11:45
  • 459KB
  • 下载

Java的观察者模式

  • 2015年12月29日 21:59
  • 10KB
  • 下载

java:从消息机制谈到观察者模式

观察者模式,顾名思意就是观察与被观察的关系,比如你在烧开水得时时看着它开没开,你就是观察者,开水就是被观察者;再比如说你在带小孩,你关注她是不是饿了,是不是喝了,是不是撒尿了,你就是观察者,小孩就被观...

观察者模式练习

  • 2015年12月09日 20:35
  • 6KB
  • 下载

观察者模式框架2

  • 2017年08月11日 21:42
  • 48B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:7、观察者模式
举报原因:
原因补充:

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