PHP版本

<?php

/**

 * 观察者模式

 * 观察者模式能够便利的创建查看目标对象状态的对象，并且提供与核心对象非耦合的指定性功能。

 *

 * 为软件添加由某个动作或状态变化激活的，但是松散耦合的新功能时，应当创建基于观察者模式的对象。

 *

 * SPL：Standard PHP Library PHP标准库

 */

class User implements SplSubject{

    public $lognum;

    public $hobby;

    protected $_observers = NULL;

    public function __construct($hobby) {

        $this->lognum = rand(1,10);

        $this->hobby = $hobby;

        $this->_observers = new SplObjectStorage();

    }

    public function login() {

        $this->notify();

    }

    public function attach(SplObserver $observer) {

        $this->_observers->attach($observer);

    }

    public function detach(SplObserver $observer) {

        $this->_observers->detach($observer);

    }

    public function notify() {

        $this->_observers->rewind();

        while ($this->_observers->valid()) {

            $observer = $this->_observers->current();

            $observer->update($this);

            $this->_observers->next();

        }

    }

}

/**

 * 功能模块

 */

class Login implements SplObserver{

    public function update(SplSubject $subject) {

        echo "登录次数：".$subject->lognum.'<br>';

    }

}

//实施观察

$user = new User('学习');

$user->attach(new Login());

$user->login();

//添加模块

class Hobby implements SplObserver{

    public function update(SplSubject $subject) {

        echo "爱好：".$subject->hobby;

    }

}

$hobby = new Hobby;

$user->attach($hobby);

$user->login();

echo '<br>';

//删除观察模块

$user->detach($hobby);

$user->login();

JS版本

<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

    <head>

        <title>观察者模式</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>

            div{border:solid gray 1px;margin-top:10px;height: 100px;width: 200px;}

        </style>

    </head>

    <body>

        <h1>观察者模式</h1>

        <select>

            <option value="1">风格1</option>

            <option value="2">风格2</option>

        </select>

        <button onclick="detachC()">不观察C</button>

        <button onclick="attachC()">观察C</button>

        <!--模块一-->

        <div id="A">A</div>

        <!--模块二-->

        <div id="B">B</div>

        <!--模块三-->

        <div id="C">C</div>

        <script>

            //观察者

            var sel = document.getElementsByTagName('select')[0];

            sel.observers = {}

            sel.attach = function(key, obj) {

                this.observers[key] = obj;

            }

            sel.detach = function(key) {

                delete this.observers[key];

            }

            sel.onchange = sel.notify = function() {

                for (var key in this.observers) {

                    this.observers[key].update(this);

                }

            }

            //被观察对象及操作

            var a = document.getElementById('A');

            var b = document.getElementById('B');

            a.update = function(observe) {

                if (1 == observe.value) {

                    this.innerHTML = 'A模块：风格1';

                }

                if (2 == observe.value) {

                    this.innerHTML = 'A模块：风格2';

                }

            }

            b.update = function(observe) {

                if (1 == observe.value) {

                    this.innerHTML = 'B模块：风格1';

                }

                if (2 == observe.value) {

                    this.innerHTML = 'B模块：风格2';

                }

            }

            //开启观察

            sel.attach('a', a);

            sel.attach('b', b);

            //添加观察C模块

            var c = document.getElementById('C');

            c.update = function(observe) {

                if (1 == observe.value) {

                    this.innerHTML = 'C模块：风格1';

                }

                if (2 == observe.value) {

                    this.innerHTML = 'C模块：风格2';

                }

            }

            sel.attach('c', c);

            //取消观察

            function attachC(){

                sel.attach('c',c);

            }

            function detachC(){

                sel.detach('c');

            }

        </script>

    </body>

</html>

PHP设计模式——观察者模式的更多相关文章

  1. 18. 星际争霸之php设计模式--观察者模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  2. linkin大话设计模式--观察者模式

    linkin大话设计模式--观察者模式 观察者模式定义了对象间的一对多依赖关系,让一个或者多个观察者观察一个对象主题.当主题对象的状态发生改变的时候,系统能通知所有的依赖于此对象的观察者对象,从而能自 ...

  3. java设计模式--观察者模式(Observer)

    java设计模式--观察者模式(Observer) java设计模式--观察者模式(Observer) 观察者模式的定义: 定义对象间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖于它的 ...

  4. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  5. 【设计模式】Java设计模式 - 观察者模式

    [设计模式]Java设计模式 - 观察者模式 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 @一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长 ...

  6. [Head First设计模式]山西面馆中的设计模式——观察者模式

    系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 引言 不知不自觉又将设计模式融入生活了,吃个饭也不得安生,也发现生活中的很多场景,都可以用设计模式来模拟.原来设计模式就在 ...

  7. javascript 设计模式-----观察者模式

    观察者模式在设计模式中被重点提到,因为它应用的场景非常多,而且在模块化设计当中扮演着非常重要的角色.MVC模式中最底层的就是观察者模式,当下流行的javascript框架backbone就是很好地运用 ...

  8. c#设计模式-观察者模式

    Observer 与 Subject 互为耦合,但是这种耦合的双方都依赖于抽象,而不依赖于具体. 一.观察者模式 目的 我们都知道解决一个问题有N种解决方式,但在面向对象的设计中如何能做到“高内聚,低 ...

  9. JAVA 设计模式 观察者模式

    用途 观察者模式 (Observer) 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象. 这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 观 ...

  10. IOS设计模式-观察者模式

    前言:23种软件设计模式中的观察者模式,也是在软件开发中,挺常用的一种设计模式.而在苹果开发中,苹果Cocoa框架已经给我们实现了这个设 计模式,那就是通知和KVO(Key-Value Observi ...

随机推荐

  1. sed命令——批量修改文件内容

    批量替换单个文件内容 命令格式:sed -i 's/旧内容/新内容/g' 文件路径 sed -i 's/oldString/newString/g' file 例如:我想替换cwx.txt文件中的 j ...

  2. oracle 备份恢复篇(三)---rman spfile的丢失

    一,环境准备 1, 拥有全备 数据 2, 查看spfile文件位置 SQL> SQL> SELECT NAME, VALUE, DISPLAY_VALUE FROM V$PARAMETER ...

  3. css 清除float的方法

    首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝 ...

  4. 从数组去重这个函数来体验es6的高效率

    前几天碰到一个题目,要求是这样的. 题目描述 为 Array 对象添加一个去除重复项的方法 示例1 输入 [false, true, undefined, null, NaN, 0, 1, {}, { ...

  5. 【读书笔记】C#高级编程（一）.NET体系结构

    写在前面:从业两年来,一直停留在会用的阶段,而没有去仔细思考过为什么这么用,之前也大致扫过<c#高级编程>一书,这次想借一袭脑海中的冲动,再次好好仔细过过这本书,夯实基础,温故知新. 一. ...

  6. node.js async/await 继发执行与并发执行

    async/await 继发执行与并发执行,看如何控制 两个异步函数 foo bar function foo() { return new Promise((resolve, reject) =&g ...

  7. select支持多查询，获取分页count

    在我们使用mybatis 时,当我们根据分页去查询数据集时,需要传入的参数有page(页码)和size(每页的条数),而我们期望获取到的数据有,小于或等于size的list数据集,同时我们还需要得到一 ...

  8. JS自定义手机端H5键盘

    在输入车牌号的时候,因为很多车牌号都是数字字母混合排列的,所以如果用输入法输入就需要频繁切换数字跟字母,有点麻烦. 在这里我们就用自定义一个弹出框代替键盘来使用. 1.首先,要禁止掉文本框弹出输入法, ...

  9. twaver拓扑图通道组织图（百分比使用率/水槽）效果实现

    功能介绍: 利用拓扑图实现:64条通道,根据每条通道是否承载业务,提供百分比展示 首先上图,功能效果如图: 废话不多,直接上代码: <!DOCTYPE html> <html> ...

  10. Ubuntu上使用vnc服务

    http://www.aichengxu.com/linux/8479752.htm 1. sudo apt-get install x11vnc 2. sudo x11vnc -storepassw ...