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. （Frontend Newbie）Web三要素（二）

    上一篇简单介绍了HTML的基本知识以及一些在开发学习过程中容易忽视的知识点,本篇介绍Web三要素中另一个重要组成部分----层叠样式表(Cascading Style Sheets). CSS 按照一 ...

  2. JS之this那些事

    一直以来,对this的讨论都是热门话题.有人说掌握了this就掌握了JavaScript的80%,说法有点夸张,但可见this的重要性.至今记录了很多关于this的零碎笔记,今天就来个小结. 本人看过 ...

  3. 从函数作用域和块级作用域看javascript的作用域链

    在ES6之前,javascript只有全局作用域和函数作用域.所谓作用域就是一个变量定义并能够被访问到的范围.也就是说如果一个变量定义在全局(window)上,那么在任何地方都能访问到这个变量,如果这 ...

  4. 深入理解JavaScript系列（21）：S.O.L.I.D五大原则之接口隔离原则ISP

    前言 本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第4篇,接口隔离原则ISP(The Interface Segregation Principle). 英文原文:htt ...

  5. [转]Mysql几种索引类型的区别及适用情况

    此为转载文章,仅做记录使用,方便日后查看,原文链接:https://www.cnblogs.com/yuan-shuai/p/3225417.html Mysql几种索引类型的区别及适用情况   如大 ...

  6. PCA 降维算法详解 以及代码示例

    转载地址:http://blog.csdn.net/watkinsong/article/details/38536463 1. 前言 PCA : principal component analys ...

  7. IntelliJ IDEA 12 设置优化

    1.IntelliJ IDEA简介 IntelliJ IDEA是Eclipse之外又一强大的IDE,Google在今年发布了新的Android开发IDE---Android Studio就是基于Int ...

  8. javaSystem.out.println()输出byte[]和char[]异常的问题

    javaSystem.out.println()输出byte[]和char[]异常的问题 今天 突然有人问我他写的byte[]和char[],在用System.out.println()输出的时候所得 ...

  9. Flask插件---flask_script与flask_migrate

    import app from flask_script import Manager from flask_migrate import Migrate,MigrateCommand my_app ...

  10. 学习 JavaScript 树

    学习 JavaScript 树 树(Tree) 在计算机科学中,数据结构是一门研究非数值计算的程序设计问题中计算机的操作对象(数据元素)以及它们之间的操作和运算等的学科. 它包含三方面的内容: 数据的 ...