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. PorterDuffXferMode不对的真正原因PorterDuffXferMode深入试验)

    菜鸡wing遇敌PorterDuffXferMode,不料过于轻敌,应战吃力. 随后与其大战三天三夜.三百余回合不分胜负. 幸得 @咪咪控 相助,侥幸获胜. keyword:PorterDuffXfe ...

  2. MS SQL 分类汇总参数 grouping(**)=1 rollup cubt

    转:http://www.111cn.net/database/mssqlserver/43368.htm 本文章介绍了关于sql多级分类汇总实现方法及数据结构,有碰到问题的同学可参考一下. 据库结构 ...

  3. Lua string文件类型判断和内容解析

    [1]文件名称类型判断和解析 local fileName = "shanxi201904npsdr1_200000.zip" print("len : " . ...

  4. js实现table内 某列的内容进行即时筛选

    往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选. 而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务器 ...

  5. 网络编程------socketserver模块以及socket模块的更多用法.

    socketserver模块 内置模块 (其实现原理为并发) socketserver这个模块主要是为了解决: TCP协议中,服务器不能同时连接多个客户端的问题 是处于socket抽象层和应用层之间的 ...

  6. eclipse tasks

    tasks可以在代码里增加标识,通过tasks view可以快速的找到这些标识的地方,有助于提高开发效率和代码管理. 通过Eclipse的 Window==>Show View==>Tas ...

  7. full stack on the road

    Full Stack, I'm coming. 有人说全栈只是个理想情况,但我不这么认为,因为好多思想是想通的, 比如 OO.函数式编程.设计模式... 也有人说搞全栈的人样样普通,可是为嘛我在学习j ...

  8. XmlDocument和XDocument转String

    1:XDocument转String直接使用ToString();XNode里面重写了ToString()方法 2:XmlDocument转String需要写代码 using System; usin ...

  9. sharding-jdbc从入门到出门(03)

    经过端午节这2天对 sharding-jdbc一直怀揣成梦想的去学习,还是有一些没有解决的问题: 上一张图:

  10. [luogu4255]公主の#18文明游戏

    [luogu4255]公主の#18文明游戏 luogu 发现没有连边,只有删边? 考虑倒着做 开map记M[i][j]表示编号为i的并查集,信仰j的人数 s[i]表示编号为i的并查集的总人数 首先询问 ...