php设计模式课程---4、观察者模式的好处是什么

一、总结

一句话总结:

方便选择之后去控制监听的板块数:比如选择男士之后,我可以决定监听广告里面的第二和第三板块。

1、为什么有观察者模式?

错误理解:根据不同的选择有不同的功能,比如选择男士,会有男士广告,选择女士,会有女士广告
正确理解:可以决定选择变化之后监听哪些板块,比如选择男士之后,我可以决定监听广告里面的第二和第三板块。

2、观察者模式如何实现(或者叫通知者模式更加合适)?

把监听的板块的名字放到一个数组,如果选择的对象发生变化,遍历数组更新对应的板块(执行对应板块的选择方法)。比如板块三,如果是男的,就选择汽车,是女的就选择化妆品
test3.update =  function (sel) {
if(sel.value == '1') {
this.innerHTML = '大众汽车';
} else if (sel.value == '0') {
this.innerHTML = '化妆品好好好';
}
}

二、观察者模式的好处是什么

1、截图

 

2、代码

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="布尔教育">
<title>Document</title>
</head>
<style>
div {
width: 80%;
height: 200px;
border: 1px solid blue;
margin: 10px;
}
</style>
<body>
<select name="sel" id="sel">
<option value="0">女式风格</option>
<option value="1">男式风格</option>
</select>
<input type="button" onclick="drop();" value="不引起广告的变化了">
<br><br><br><br>
<div id="test2">新闻</div>
<div id="test3">广告</div>
</body>
<script> var sel = document.getElementById('sel');
sel.observes = [];
sel.attach = function(obj) {
this.observes[this.observes.length] = obj;
} sel.detach = function(obj) {
for(var i=0; i<this.observes.length; i+=1) {
if(this.observes[i] === obj) {
delete this.observes[i];
}
}
} sel.onchange = sel.notify = function() {
for(var i=0; i<this.observes.length; i+=1) {
this.observes[i].update(this);
}
} var test2 = document.getElementById('test2');
var test3 = document.getElementById('test3');
test2.update = function (sel) {
if(sel.value == '1') {
this.innerHTML = '足球新闻';
} else if (sel.value == '0') {
this.innerHTML = '宋明星来了';
}
} test3.update = function (sel) {
if(sel.value == '1') {
this.innerHTML = '大众汽车';
} else if (sel.value == '0') {
this.innerHTML = '化妆品好好好';
}
} sel.attach(test2);
sel.attach(test3); function drop() {
sel.detach(test3);
} </script>
</html>

没加监听者模式的选择后改变的代码

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="布尔教育">
<title>Document</title>
</head>
<style>
div {
width: 80%;
height: 200px;
border: 1px solid blue;
margin: 10px;
}
</style>
<body>
<select name="sel" id="sel">
<option value="0">女式风格</option>
<option value="1">男式风格</option>
</select>
<div id="test1">1</div>
<div id="test2">新闻</div>
<div id="test3">广告</div>
</body>
<script>
var sel = document.getElementById('sel');
sel.onchange = function() {
if( this.value == '1' ) {
document.getElementById('test2').innerHTML = '足球新闻';
document.getElementById('test3').innerHTML = '大众汽车';
} else if(this.value == '0') {
document.getElementById('test2').innerHTML = '宋重鸡来华';
document.getElementById('test3').innerHTML = '化妆品';
}
}
</script>
</html>
 

php设计模式课程---4、观察者模式的好处是什么的更多相关文章

  1. php设计模式课程---1、什么是设计模式

    php设计模式课程---1.什么是设计模式 一.总结 一句话总结:经典场景的经典解决方法. 经典场景的经典解决方法 1.设计模式使用的通俗场景有哪些? 比如:拍电影时,常用设计模式 感情狗血剧:误会模 ...

  2. 北风设计模式课程---最少知识原则(Least Knowledge Principle)

    北风设计模式课程---最少知识原则(Least Knowledge Principle) 一.总结 一句话总结: 最少知识原则(Least Knowledge Principle),或者称迪米特法则( ...

  3. 北风设计模式课程---开放封闭原则(Open Closed Principle)

    北风设计模式课程---开放封闭原则(Open Closed Principle) 一.总结 一句话总结: 抽象是开放封闭原则的关键. 1."所有的成员变量都应该设置为私有(Private)& ...

  4. 设计模式学习之观察者模式(Observer,行为型模式)(7)

    1.观察者模式又叫做发布-订阅模式. 2.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 3 ...

  5. 设计模式 ( 十六 ) 观察者模式Observer(对象行为型)

    设计模式 ( 十六 ) 观察者模式Observer(对象行为型) 1.概述 一些面向对象的编程方式,提供了一种构建对象间复杂网络互连的能力.当对象们连接在一起时,它们就可以相互提供服务和信息. 通常来 ...

  6. Java设计模式之《观察者模式》及应用场景

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6513651.html 观察者模式,又可以称之为发布-订阅模式,观察者,顾名思义,就是一个监 ...

  7. Java设计模式百例 - 观察者模式

    观察者(Observer)模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,主体对象的状态变化会通知所有观察者对象.观察者模式又叫做发布-订阅(Publish/Subscribe ...

  8. php设计模式课程---6、策略模式如何使用

    php设计模式课程---6.策略模式如何使用 一.总结 一句话总结:比如代码需求,做一饭店,有南北方不同菜系,不同分店有不同的饭菜汤的需求,代码怎么设计 从饭店有特色过渡到厨师有特色(南方厨师(南方饭 ...

  9. php设计模式课程---7、装饰器模式如何使用

    php设计模式课程---7.装饰器模式如何使用 一.总结 一句话总结: 装饰器的核心是获取了文章类整个类,而不是获取了文章内容,有了这个文章类,我想给你加多少装饰就给你加多少装饰(将文章这个类封装进去 ...

随机推荐

  1. tomcat7与tomcat6引入标签taglib的区别:taglib definition not consistent with specification version

    org.apache.tomcat.util.digester.Digester startElement严重: Begin event threw exceptionjava.lang.Illega ...

  2. u-boot README--Memory Management&initialize

    Memory Management:------------------ U-Boot runs in system state and uses physical addresses, i.e. t ...

  3. 微信支付v3开发(6) 收货地址共享接口

    请看新版教程  微信支付开发(7) 收货地址共享接口V2 本文介绍微信支付下的收货地址共享接口的开发过程. 一. 简单介绍 微信收货地址共享,是指用户在微信浏览器内打开网页,填写过地址后,兴许能够免填 ...

  4. 在eclipse创建和myeclipse一样结构的web项目

    之前一直使用myeclipse,现在换成eclipse,但是创建的新项目让我很不习惯,下面这个方法可以解决. 创建好的项目结构如下图所示,不过看着还是很别扭,我们window→show view→ot ...

  5. OpenCv for Android 环境搭建

    最近工作需要这样的功能 如下图 要在类似功能在android上实现 然后实现成这样 这两张图来自博客:图像校正—透视变换 可惜他用的是C/C++语言写的调用opencv,我参考了下他写的方案就想到了a ...

  6. 批处理--复制,解压文件,goto,nul

    rem 复制文件 copy "D:\xxxx" "C:\xxxx" rem 复制文件夹 xcopy "D:\xxxx" "C:\x ...

  7. iOS 动画基础总结篇

    iOS 动画基础总结篇   动画的大体分类(个人总结可能有误) 分类.png UIView 动画 属性动画 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  8. 安装virtualBox 增强包

    1 在原始操作系统安装. 2 打开USB设置. 3 运行虚拟机中的Linux中,Device->install guest additions 再安装增强包. 4 插入U盘,如果这时可以看到U盘 ...

  9. 【BZOJ3331】[BeiJing2013]压力 Tarjan求点双

    [BZOJ3331][BeiJing2013]压力 Description 如今,路由器和交换机构建起了互联网的骨架.处在互联网的骨干位置的核心路由器典型的要处理100Gbit/s的网络流量.他们每天 ...

  10. [note]fhq_treap

    fhq_treap 这东西据说是某个叫范浩强的神仙搞出来的, 他的这种treap可以不用旋转并且资磁很多平衡树操作, 复杂度通过随机的键值来保证(树大致平衡,期望一次操作复杂度\(logn\)) 依靠 ...