!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變化就會(huì)通知這個(gè)2個(gè)對象，并引起這2個(gè)對象的變化，實(shí)現(xiàn)觀察者模式。
 -->
 h1>用觀察者模式切換頁面風(fēng)格/h1>
 select>
     option value="male">男式風(fēng)格/option>
     option value="female">女士風(fēng)格/option>
 /select>
 button onclick="t1()">觀察學(xué)習(xí)區(qū)/button>
 button onclick="t2()">不觀察學(xué)習(xí)區(qū)/button>
 div id="content">我是內(nèi)容/div>
 div id="ad">我是廣告/div>
 div id="study">學(xué)習(xí)/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);
    //新增監(jiān)聽study區(qū)
    var study = document.getElementById('study');
    study.update = function(ob){
        if (ob.value == 'male') {
            this.innerHTML = '學(xué)習(xí)計(jì)算機(jī)';
        }else if(ob.value == 'female'){
            this.innerHTML = '學(xué)習(xí)美容';
        }
    }
    sel.attach('study',study);
    function t1(){
        sel.attach('study',study);
    }
    function t2(){
        sel.detach('study');
    }
/script>
/html>

?php
//php實(shí)現(xiàn)觀察者
//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 '好好學(xué)習(xí)br>';
        }
    }
}
//實(shí)施觀察
// $user = new User('sports');
$user = new User('study');
$user->attach(new Safe());
$user->attach(new Ad());
$user->login();//登錄