!DOCTYPE html>
html>
head>
    title>/title>
    style type="text/css">
    div{width: 100px;height: 100px;border: 1px #999 solid;margin-bottom: 5px;}
    /style>
/head>
body>
!--
我们让div对象观察select的变化，selecte变化就会通知这个2个对象，并引起这2个对象的变化，实现观察者模式。
 -->
 h1>用观察者模式切换页面风格/h1>
 select>
     option value="male">男式风格/option>
     option value="female">女士风格/option>
 /select>
 button onclick="t1()">观察学习区/button>
 button onclick="t2()">不观察学习区/button>
 div id="content">我是内容/div>
 div id="ad">我是广告/div>
 div id="study">学习/div>
/body>
script type="text/javascript">
    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 content = document.getElementById('content');
    var ad = document.getElementById('ad');
    content.update = function(ob){
        if (ob.value == 'male') {
            this.style.backgroundColor = 'gray';
        }else if(ob.value == 'female'){
            this.style.backgroundColor = 'pink';
        }
    }
    ad.update = function(ob){
        if (ob.value == 'male') {
            this.innerHTML = '汽车';
        }else if(ob.value == 'female'){
            this.innerHTML = '减肥';
        }
    }
    //让content观察select的变化
    sel.attach('content',content);
    sel.attach('ad',ad);
    //新增监听study区
    var study = document.getElementById('study');
    study.update = function(ob){
        if (ob.value == 'male') {
            this.innerHTML = '学习计算机';
        }else if(ob.value == 'female'){
            this.innerHTML = '学习美容';
        }
    }
    sel.attach('study',study);
    function t1(){
        sel.attach('study',study);
    }
    function t2(){
        sel.detach('study');
    }
/script>
/html>

?php
//php实现观察者
//php5中提供观察者observer和被观察者subject的接口
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()
    {
        //操作session等
        $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 Safe implements SPLObserver
{
    public function update(SplSubject $subject)
    {
        if ($subject->lognum  3) {
            echo '这是第' . $subject->lognum . '次安全登录br>';
        }else{
            echo '这是第' . $subject->lognum . '次登录，异常br>';
        }
    }
}
//广告模块
class Ad implements SPLObserver
{
    public function update(SplSubject $subject)
    {
        if ($subject->hobby == 'sports') {
            echo '英超开始啦br>';
        }else{
            echo '好好学习br>';
        }
    }
}
//实施观察
// $user = new User('sports');
$user = new User('study');
$user->attach(new Safe());
$user->attach(new Ad());
$user->login();//登录