观察者模式

最新推荐文章于 2024-02-28 11:31:22 发布

学习笔记666

最新推荐文章于 2024-02-28 11:31:22 发布

阅读量336

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/github_26672553/article/details/50000711

版权

PHP 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

1.用js实现观察者模式

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	div{width: 100px;height: 100px;border: 1px #999 solid;margin-bottom: 5px;}
	</style>
</head>
<body>
<!-- 
我们让div对象观察select的变化，selecte变化就会通知这个2个对象，并引起这2个对象的变化，实现观察者模式。
 -->
 <h1>用观察者模式切换页面风格</h1>

 <select>
 	<option value="male">男式风格</option>
 	<option value="female">女士风格</option>
 </select>

 <button οnclick="t1()">观察学习区</button>
  <button οnclick="t2()">不观察学习区</button>


 <div id="content">我是内容</div>
 <div id="ad">我是广告</div>
 <div id="study">学习</div>
</body>
<script type="text/javascript">
	var sel = document.getElementsByTagName('select')[0];
	sel.observers = {};
	sel.attach = function(key,obj){
		this.observers[key] = obj;
	}
	sel.detach = function(key){
		delete this.observers[key];
	}

	sel.onchange = sel.notify = function(){
		for(var key in this.observers){
			this.observers[key].update(this);
		}
	} 

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

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

	//新增监听study区
	var study = document.getElementById('study');
	study.update = function(ob){
		if (ob.value == 'male') {
			this.innerHTML = '学习计算机';
		}else if(ob.value == 'female'){
			this.innerHTML = '学习美容';
		}
	}
	sel.attach('study',study);


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

2.用php实现观察模式

<?php
//php实现观察者

//php5中提供观察者observer和被观察者subject的接口

class User implements SplSubject
{
	public $lognum;
	public $hobby;

	protected $observers = null;

	public function __construct($hobby)
	{
		$this->lognum = rand(1,10);
		$this->hobby = $hobby;
		$this->observers = new SplObjectStorage();
	}

	public function login()
	{
		//操作session等
		$this->notify();
	}

	public function attach(SPLObserver $observer)
	{
		$this->observers->attach($observer);
	}
	public function detach(SPLObserver $observer)
	{
		$this->observers->detach($observer);
	}
	public function notify()
	{
		$this->observers->rewind();
		while ($this->observers->valid()) {
			$observer = $this->observers->current();
			$observer->update($this);
			$this->observers->next();
		}
	}
}

//用户安全登录模块
class Safe implements SPLObserver
{
	public function update(SplSubject $subject)
	{
		if ($subject->lognum < 3) {
			echo '这是第' . $subject->lognum . '次安全登录<br>';
		}else{
			echo '这是第' . $subject->lognum . '次登录，异常<br>';
		}
	}
}

//广告模块
class Ad implements SPLObserver
{
	public function update(SplSubject $subject)
	{
		if ($subject->hobby == 'sports') {
			echo '英超开始啦<br>';
		}else{
			echo '好好学习<br>';
		}
	}
}


//实施观察
// $user = new User('sports');
$user = new User('study');
$user->attach(new Safe());
$user->attach(new Ad());


$user->login();//登录

学习笔记666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
观察者模式

1.用js实现观察者模式 div{width: 100px;height: 100px;border: 1px #999 solid;margin-bottom: 5px;}  用观察者模式切换页面风格男式风格女
复制链接

扫一扫