php设计模式--观察者模式(4.1)面向过程完成页面内容切换

简介: php设计模式--观察者模式(4.1)面向过程完成页面内容切换

观察者模式 也叫通知 监听者模式

如果没有设计模式我们只能一个一个改,新加一个就要改一次方法

 

<html>
<title>观察者模式</title>
<style>
 div{ width: 200px;height: 50px; border: 1px solid #ccc;}
</style>
<body>
    <select name="sel" id="sel">
        <option value="0">男式风格</option>
        <option value="1">女式风格</option>
    </select>
     <input type="button" onclick="drop()" value="不引起广告的变化">
    <div id="test1">11</div>
    <div id="test2">22</div>
    <div id="test3">广告</div>
</body>
<script>
/*var t=[];
console.log(t.length); //打印长度为0
t[t.length]='1'; //相当于 t[0]='1'
console.log(t.length);//打印长度为0
console.log(t);//打印 出数组
*/
    var sel = document.getElementById('sel');
    sel.observes = [];
    //添加一个观察者
    sel.attach = function(obj) {  
        this.observes[this.observes.length] = obj;
    //把对象放到数组里  数组的下标从0开始 数组为空时也就是 this.observes[0]=obj
    }
    //删除一个观察者
    sel.detach = function(obj) {
        for (var i = 0; i < this.observes.length; i+=1) {      
            if (this.observes[i] === obj) {
                delete this.observes[i];
            }
        }
    }
    //onchange 改变的时候通知
    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');
    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 = 'test3的女 口红';
        } else if (sel.value == '0') {
            this.innerHTML = 'test3的男0 足球';
        }
    }
    sel.attach(test2); //调用改变
    sel.attach(test3);
  //删除监听
  function drop(){
   sel.detach(test3);
  }
  
</script>
</html>

 

 

 

原理就是注册一个数组,把需要监听的放到数组里面 然后for循环调用改变 这样就灵活了

 

/****/

理解

 

目录
相关文章
|
30天前
|
设计模式 算法 PHP
php设计模式--策略模式(六)
php设计模式--策略模式(六)
17 0
|
30天前
|
设计模式 PHP
php设计模式--装饰模式(七)装饰模式完成文章编辑
php设计模式--装饰模式(七)装饰模式完成文章编辑
14 0
|
6天前
|
设计模式 前端开发 NoSQL
设计模式第八讲:观察者模式和中介者模式详解
 定义一个中介对象来封装一系列对象之间的交互,使原有对象之间的耦合松散,且可以独立地改变它们之间的交互。中介者模式又叫调停模式,它是迪米特法则的典型应用。
167 0
|
8天前
|
设计模式 消息中间件 存储
跟着GPT学设计模式之观察者模式
观察者模式是一种行为型设计模式,它定义了对象之间的一对多依赖关系,使得当一个对象的状态发生改变时,其依赖对象都能够收到通知并自动更新。一般情况下,被依赖的对象叫作被观察者(Observable),依赖的对象叫作观察者(Observer)。
13 1
|
28天前
|
设计模式 Java
Java一分钟之-设计模式:观察者模式与事件驱动
【5月更文挑战第17天】本文探讨了Java中实现组件间通信的观察者模式和事件驱动编程。观察者模式提供订阅机制,当对象状态改变时通知所有依赖对象。然而,它可能引发性能问题、循环依赖和内存泄漏。代码示例展示了如何实现和避免这些问题。事件驱动编程则响应用户输入和系统事件,但回调地狱和同步/异步混淆可能造成困扰。JavaFX事件驱动示例解释了如何处理事件。理解这两种模式有助于编写健壮的程序。
25 1
|
30天前
|
设计模式 JavaScript 前端开发
js设计模式-观察者模式与发布/订阅模式
观察者模式和发布/订阅模式是JavaScript中的两种设计模式,用于处理对象间的通信和事件处理。观察者模式中,一个主题对象状态改变会通知所有观察者。实现包括定义主题和观察者对象,以及在主题中添加、删除和通知观察者的功能。发布/订阅模式则引入事件管理器,允许发布者发布事件,订阅者通过订阅接收通知。
|
30天前
|
设计模式 算法 搜索推荐
【PHP开发专栏】PHP设计模式解析与实践
【4月更文挑战第29天】本文介绍了设计模式在PHP开发中的应用,包括创建型(如单例、工厂模式)、结构型和行为型模式(如观察者、策略模式)。通过示例展示了如何在PHP中实现这些模式,强调了它们在提升代码可维护性和可扩展性方面的作用。设计模式是解决常见问题的最佳实践,但在使用时需避免过度设计,根据实际需求选择合适的设计模式。
|
30天前
|
设计模式 Go
[设计模式 Go实现] 行为型~观察者模式
[设计模式 Go实现] 行为型~观察者模式
|
30天前
|
设计模式 消息中间件 存储
【设计模式系列笔记】观察者模式
观察者模式是一种设计模式,它允许一个对象(主题)维护一组依赖于它的对象(观察者)并在状态发生变化时通知它们。这种模式属于行为型模式。在观察者模式中,主题是被观察的对象,而观察者是依赖于主题的对象,当主题的状态发生变化时,所有注册的观察者都会得到通知并自动更新。
29 0
|
30天前
|
设计模式 Java
小谈设计模式(15)—观察者模式
小谈设计模式(15)—观察者模式