php设计模式课程---4、观察者模式的好处是什么
php设计模式课程---4、观察者模式的好处是什么
一、总结
一句话总结：
方便选择之后去控制监听的板块数：比如选择男士之后，我可以决定监听广告里面的第二和第三板块。
1、为什么有观察者模式？
错误理解：根据不同的选择有不同的功能，比如选择男士，会有男士广告，选择女士，会有女士广告
正确理解：可以决定选择变化之后监听哪些板块，比如选择男士之后，我可以决定监听广告里面的第二和第三板块。
2、观察者模式如何实现（或者叫通知者模式更加合适）？
把监听的板块的名字放到一个数组，如果选择的对象发生变化，遍历数组更新对应的板块（执行对应板块的选择方法）。比如板块三，如果是男的，就选择汽车，是女的就选择化妆品
test3.update = function (sel) {if(sel.value == '1') {this.innerHTML = '大众汽车';} else if (sel.value == '0') {this.innerHTML = '化妆品好好好';}
}二、观察者模式的好处是什么
1、截图
2、代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="keyword" content="布尔教育">
6 <title>Document</title>
7 </head>
8 <style>
9 div {10 width: 80%;
11 height: 200px;
12 border: 1px solid blue;
13 margin: 10px;
14 }
15 </style>
16 <body>
17 <select name="sel" id="sel">
18 <option value="0">女式风格</option>
19 <option value="1">男式风格</option>
20 </select>
21 <input type="button" onclick="drop();" value="不引起广告的变化了">
22 <br><br><br><br>
23 <div id="test2">新闻</div>
24 <div id="test3">广告</div>
25 </body>
26 <script>
27
28 var sel = document.getElementById('sel');
29 sel.observes = [];
30 sel.attach = function(obj) {
31 this.observes[this.observes.length] = obj;
32 }
33
34 sel.detach = function(obj) {
35 for(var i=0; i<this.observes.length; i+=1) {
36 if(this.observes[i] === obj) {
37 delete this.observes[i];
38 }
39 }
40 }
41
42 sel.onchange = sel.notify = function() {
43 for(var i=0; i<this.observes.length; i+=1) {
44 this.observes[i].update(this);
45 }
46 }
47
48
49 var test2 = document.getElementById('test2');
50 var test3 = document.getElementById('test3');
51 test2.update = function (sel) {
52 if(sel.value == '1') {
53 this.innerHTML = '足球新闻';
54 } else if (sel.value == '0') {
55 this.innerHTML = '宋明星来了';
56 }
57 }
58
59 test3.update = function (sel) {
60 if(sel.value == '1') {
61 this.innerHTML = '大众汽车';
62 } else if (sel.value == '0') {
63 this.innerHTML = '化妆品好好好';
64 }
65 }
66
67
68 sel.attach(test2);
69 sel.attach(test3);
70
71
72 function drop() {
73 sel.detach(test3);
74 }
75
76 </script>
77 </html>没加监听者模式的选择后改变的代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="keyword" content="布尔教育">
6 <title>Document</title>
7 </head>
8 <style>
9 div {10 width: 80%;
11 height: 200px;
12 border: 1px solid blue;
13 margin: 10px;
14 }
15 </style>
16 <body>
17 <select name="sel" id="sel">
18 <option value="0">女式风格</option>
19 <option value="1">男式风格</option>
20 </select>
21 <div id="test1">1</div>
22 <div id="test2">新闻</div>
23 <div id="test3">广告</div>
24 </body>
25 <script>
26 var sel = document.getElementById('sel');
27 sel.onchange = function() {
28 if( this.value == '1' ) {
29 document.getElementById('test2').innerHTML = '足球新闻';
30 document.getElementById('test3').innerHTML = '大众汽车';
31 } else if(this.value == '0') {
32 document.getElementById('test2').innerHTML = '宋重鸡来华';
33 document.getElementById('test3').innerHTML = '化妆品';
34 }
35 }
36 </script>
37 </html>View Code
转载于:https://www.cnblogs.com/Renyi-Fan/p/9417217.html
php设计模式课程---4、观察者模式的好处是什么相关推荐
- 北风设计模式课程---观察者模式
北风设计模式课程---观察者模式 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 1.观察者模式注意点? 1.观察者模式的别名发布-订阅(Publish/S ...
- 北风设计模式课程---2、工厂方法模式
北风设计模式课程---2.工厂方法模式 一.总结 一句话总结: 工厂方法模式相对于简单工厂模式只是修改了 [工厂核心类-将它变成接口],具体的创建产品的工作交给[工厂核心类的子类] 满足了开闭原则:不 ...
- 北风设计模式课程---创建模式、结构模式、行为模式的区别
北风设计模式课程---创建模式.结构模式.行为模式的区别 一.总结 一句话总结: 创建模式:[关注对象的创建]:创建型模式,就是创建对象的模式,抽象了实例化的过程. 结构模式:结构型模式是为解决[怎样 ...
- 设计模式 ( 十六 ) 观察者模式Observer（对象行为型）
设计模式 ( 十五 ) 观察者模式Observer(对象行为型) 1.概述 一些面向对象的编程方式,提供了一种构建对象间复杂网络互连的能力.当对象们连接在一起时,它们就可以相互提供服务和信息. 通常来 ...
- 北风设计模式课程---单一职责原则
北风设计模式课程---单一职责原则 一.总结 一句话总结: 视频教程网上一定能找到做好笔记的博客,很大几率都不需要自己做笔记.比如北风设计模式课程,https://www.cnblogs.com/xi ...
- 北风设计模式课程---深入理解［代理模式］原理与技术
北风设计模式课程---深入理解［代理模式］原理与技术 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 设计模式都是对生活的抽象,比如用户获得装备,我可以先装 ...
- 北风设计模式课程---7、建造者模式
北风设计模式课程---7.建造者模式 一.总结 一句话总结: 设计模式都是对生活中好的做事方法的一些抽象,使得各司其职,减少出错. 建造者模式可以看做模仿的生活中:设计师,施工队做复杂房子交给客户的场 ...
- 北风设计模式课程---13、享元模式
北风设计模式课程---13.享元模式 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 1.享元模式的核心是什么? 对象插入到一个池子里面去,如果池子里面没有 ...
- 北风设计模式课程---享元模式
北风设计模式课程---享元模式 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 1.享元模式的本质是什么? 池技术:各种缓存池都是享元模式的体现 说到享元模 ...
最新文章
- Python使用matplotlib函数subplot可视化多个不同颜色的折线图、在折线图上为每个数据点添加日期数据标签
- 如何写一个通用的README规范
- 提高你的Java代码质量吧：如果有必要，使用变长数组吧
- Python正则简单实例分析
- Python爬虫学习笔记（三）——正则表达式
- QT的QFormBuilder类的使用
- [PHP] 近期接手現有的企邮前端框架业务所遇困难
- [Qt教程] 第19篇 2D绘图（九）图形视图框架（上）
- workman php教程_workerman搭建websocket入门教程，简单实用
- 《魔鸟》：上帝可以宽恕，魔鬼却一个都不放过
- 有序数组中查找第一个比target大的数
- Linux 监控命令 iostat
- 电子科大计算机调试,电子科大计算机学院 汇编语言程序设计 实验报告 99分精品版.doc...
- 用组织分析框架分析阿里巴巴集团
- js 区分中英文输入法（如中英文括号）
- sigmoid函数导数的硬件实现(verilog)
- 张栋_机器学习的照片 - 微相册
- 什么样的耳机戴着舒服些、最好用的的几款骨传导蓝牙耳机推荐
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- [转载] 怎样应对一般的面试---Star 法则 - towerman