观察者（Observer）模式

     /*
       应用例子:　一个下拉框，下面有两个div.当选中"男"两个div背景色变成橙色和灰色,当选中"女"两个div背景色变成淡绿和粉色.
     */

    <select  id="select">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
   
    <div id="one">一区</div>
    <div id="two">二区</div>

在使用观察者模式前,我们使用普通的方式去做.然后再用观察者模式.

<script>
        // 在使用观察者模式前,我们使用普通的方式去做.然后再用观察者模式.
        var select = $(‘#select‘);   //下拉框对象
        var oneDiv = $(‘#one‘);      // div对象
        var twoDiv = $(‘#two‘);      // div对象
        
        select.bind(‘change‘,function(){
            var str = $(this).val();
            if(str == ‘男‘){
                  oneDiv.css(‘background‘,‘orange‘);
                  twoDiv.css(‘background‘,‘gray‘);
            }else{
                  oneDiv.css(‘background‘,‘lightgreen‘);
                  twoDiv.css(‘background‘,‘pink‘);
            }
        });
</script>

<script>
        该模式必须包含两个角色：观察者和被观察对象.
        观察者:将自己注册到被观察对象中，被观察对象将观察者存放在一个容器里。
        被观察者:被观察对象发生了某种变化,从容器中得到所有注册过的观察者,将变化通知观察者。
        
        var select = $(‘#select‘);   //下拉框对象,也就是被观察者.
        var oneDiv = $(‘#one‘);      //观察者   
        var twoDiv = $(‘#two‘);      //观察者
        

        //select对象(被观察者)建立一个容器.专门存放div对象(观察者)
        select.queue = {};

        //负责存放div对象(观察者)
        select.reg = function(key,value){
            select.queue[key] = value;
        }
         
        //效果
        oneDiv.update = function(str){
            if(str == ‘男‘){
               $(this).css(‘background‘,‘orange‘);
            }else{
               $(this).css(‘background‘,‘lightgreen‘);
            }
        }
       
       twoDiv.update = function(str){
                if(str == ‘女‘){
                    $(this).css(‘background‘,‘gray‘);
                }else{
                    $(this).css(‘background‘,‘pink‘);
                }
       }

        //被观察者的值发生改变后,立刻通知容器里的所有"观察者"
        select.bind(‘change‘,function(){
            var str = $(this).val();
            for(var i in select.queue){
                 select.queue[i].update(str);   //观察者做出对应的DOM操作        
            }
        });

        select.reg(‘one‘,oneDiv); //注册"观察者"
        select.reg(‘two‘,twoDiv); //注册"观察者"
    </script>

<?php
/*
场景: 用户登录
第一次密码错误: 提示密码错误
第二次密码错误: 出现验证码
第五次密码错误: 验证码难度加大
第十次密码错误: 锁定账号.

分析: 
用观察者模式前我们可能这样写.
if(登录错误){错误+1}
if(错误次数=1){
    提示密码错误
}else if(错误次数=2){
    出现验证码
}else if(错误次数=5){
    ........
}else{
    .........
}

这显然是不合理的.
登录模块应该只负责判断成功或者失败然后将结果返回.
至于登录失败后的操作其实与登录模块无关,应该属于"奖惩模块".  

下面我们用观察者模式
做之前要知道谁是"观察者"?谁又是"被观察者".
奖惩模块 - 监视着 - 登录模块.登录模块一旦有消息就去告诉奖惩模块,奖惩模块就根据消息去执行对应的操作.
*/


//用户登录接口
interface userInterface
{
    public function login(); //登录(被观察者)
    public function attach($key, $value); //注册观察者
    public function detach($key); //注销观察者
    public function notify(); //通知观察者

}

class user implements userInterface
{  
    //存放观察者
    public $queue = array();
    
    //登录(被观察者)
    public function login()
    {
       $msg =  rand(0,1);
       $this->notify($msg);
    }
    
    //注册观察者
    public function attach($key, $value)
    {
       $this->queue[$key] = $value;
    }
   
    //注销观察者
    public function detach($key)
    {
      unset($this->queue[$key]);
    }
   
    //通知观察者
    public function notify($msg)
    {
       foreach($this->queue as $v){
          $v->update($msg);
       }
    }
}

//奖惩模块
class deal{
    public function update($msg){
        if($msg){
           // ..........
        }
    }
}
$user = new user();
$deal = new deal();
$user->attach(‘deal‘,$deal);//注册 "监视者"
$user->login();//登录
?>