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. 用Python抓取漫画并制作mobi格式电子书

    想看某一部漫画,但是用手机看感觉屏幕太小,用电脑看吧有太不方面.正好有一部Kindle,决定写一个爬虫把漫画爬取下来,然后制作成 mobi 格式的电子书放到kindle里面看. 一.编写爬虫程序 用C ...

  2. Log4Net.Config配置信息《转》

    看了log4net的简单使用之一_log4net介绍 大家对log4net组件应该有了大概的了解,下面再近一步介绍其在项目中如何应用. 1．Logger 所有的记录器都必须实现 ILog 接口,该接口 ...

  3. php 微信开发之新增上传/获取下载临时素材

    php 微信开发之新增上传/获取下载临时素材 代码 <?php define("AppID","");//你的id define("AppSec ...

  4. Linux下文件的堵塞与非堵塞对部分系统调用的影响

    1.基本概念 所谓的堵塞,即内核在对文件操作I/O系统调用时.假设条件不满足(可能须要产生I/O),则内核会将该进程挂起.非堵塞则是发现条件不满足就会马上返回. 此外须要注意的是非堵塞并非轮询.不然就 ...

  5. RecyclerView Bug：IndexOutOfBoundsException: Inconsistency detected. Invalid view holder adapter的解决方案（转）

    转自:RecyclerView Bug:IndexOutOfBoundsException: Inconsistency detected. Invalid view holder adapter的解 ...

  6. 创建一个动态Web项目:

    开始你的Eclipse,然后进入“文件”>“新建”>“动态Web项目,然后输入项目名称为HelloWorldStruts2和设置其他的选项,在下面的屏幕: 选择在屏幕上的所有默认选项,最后 ...

  7. 网页上10秒倒计时，完了后就自动跳转到另一个网页上html代码

    用html代码的话就这样: <meta http-equiv="Refresh" content="10;URL=http://www.baidu.com" ...

  8. history命令使用方法详解

    history是一条非常实用的shell命令,可以显示出之前在shell中运行的命令,配合last显示之前登录的用户,就可以追溯是哪个用户执行了某些命令.以下详细说明history使用中常见的命令或技 ...

  9. iOS 7 修改默认布局从status bar 底部开始

    最近在对公司的一个老项目进行版本升级,添加了导航栏和tabBar,并且在个人中心界面隐藏navigationBar,于是在控制器里添加了如下对象方法: - (void)viewWillAppear:( ...

  10. lumen手记：自定义Validate表单验证

    版权声明:本文为博主原创文章,未经博主允许不得转载. 今天开始跳lumen的表单验证Validate类的坑,确实好坑!!! 首先,lumen的表单验证返回是无状态的json格式api,这... 所有开 ...