PHP設計模式之JS實作觀察者模式 c 觀察者模式 android 觀察者模式 ios 觀察者模

觀察者模式 Observer

實現目標：變換select框來變動內容區和廣告區
一般思路
1:判斷選取的值
2:順序下來,根據值,修改內容區域
3:再修改廣告區域.

<code><span>if</span>(v == <span>'男'</span>) <span>{
   内容区背景变灰
   广告区内容变成男人话题
}</span><span>else</span><span>if</span>(v == <span>'女'</span>)<span>{
   内容区背景变粉
   广告区内容变成女人话题
}</span></code>

那麼問題有哪些：
1:讓你選擇時引起3個區域的變化,是否要修改if/elseif部分
2:如果選擇女性樣式,但不要變粉,現在流行變紫色,是否又要修改if elseif部分?
問題在於: 控制邏輯與被操作對象耦合嚴重.

這是就需要觀察者模式
js實作觀察者模式

我們讓div物件觀察select的變化,select變化,就會通知到這兩個物件。並引起這2個對象的變化,實現觀察者模式。

下邊是解決效果
select物件負責attach,detach,notifyObservers,與具體的物件變化解耦。
1.index.html

<code><span><<span>body</span>></span><span><<span>select</span><span>name</span>=<span>''</span><span>id</span>=<span>""</span>></span><span><<span>option</span><span>value</span>=<span>'male'</span>></span>男士风格<span></<span>option</span>></span><span><<span>option</span><span>value</span>=<span>'female'</span>></span>女士风格<span></<span>option</span>></span><span></<span>select</span>></span><span><<span>input</span><span>type</span>=<span>'button'</span><span>value</span>=<span>"观察学习区"</span><span>onclick</span>=<span>"t1();"</span>></span><span><<span>input</span><span>type</span>=<span>'button'</span><span>value</span>=<span>"不再观察学习区"</span><span>onclick</span>=<span>"t2();"</span>></span><span><<span>div</span><span>id</span>=<span>'content'</span>></span>我是内容<span></<span>div</span>></span><span><<span>div</span><span>id</span>=<span>'ad'</span>></span>我是广告<span></<span>div</span>></span><span><<span>div</span><span>id</span>=<span>'study'</span>></span>我是学习区<span></<span>div</span>></span><span></<span>body</span>></span></code>

2.index.html中js部分

<code><span><<span>script</span>></span><span><span>//获取对象</span><span>var</span> sel = document.getElementsByTagName(<span>'select'</span>)[<span>0</span>];
    <span>//定义方法</span>
    sel.observers={};
    <span>//增加某个方法</span>
    sel.attach = <span><span>function</span><span>(key,obj)</span>{</span><span>this</span>.observers[key] = obj;
    }
    <span>//卸掉某个方法</span>
    sel.detach = <span><span>function</span><span>(key)</span>{</span><span>delete</span><span>this</span>.observers[key];
    }
    <span>//通知</span>
    sel.onchange = sel.notify = <span><span>function</span><span>()</span>{</span><span>for</span>(<span>var</span> key <span>in</span><span>this</span>.observers){
            <span>this</span>.observers[key].update(<span>this</span>);<span>//去调用对象的update方法</span>
        }
    }

    <span>//客户端</span><span>var</span> content = document.getElementById(<span>'content'</span>);
    <span>var</span> ad = document.getElementById(<span>'ad'</span>);
    <span>//内容区变化效果</span>
    content.update = <span><span>function</span><span>(observer)</span>{</span><span>if</span>(observer.value==<span>'male'</span>){
            <span>this</span>.style.backgroundColor=<span>'gray'</span>;
        }<span>else</span><span>if</span>(observer.value==<span>'female'</span>){
            <span>this</span>.style.backgroundColor=<span>'pink'</span>;
        }
    }
    <span>//广告区变化效果</span>
    ad.update = <span><span>function</span><span>(observer)</span>{</span><span>if</span>(observer.value==<span>'male'</span>){
            <span>this</span>.innerHTML=<span>'汽车'</span>;
        }<span>else</span><span>if</span>(observer.value==<span>'female'</span>){
            <span>this</span>.innerHTML=<span>'减肥'</span>;
        }
    }
    <span>//确定谁来监视变化</span>
    sel.attach(<span>'content'</span>,content);
    sel.attach(<span>'ad'</span>,ad);

    study = document.getElementById(<span>'study'</span>);
    sel.attach(<span>'study'</span>,study);<span>//默认为观察学习区</span>
    study.update = <span><span>function</span><span>(observer)</span>{</span><span>if</span>(observer.value==<span>'male'</span>){
            <span>this</span>.innerHTML=<span>'学习计算机'</span>;
        }<span>else</span><span>if</span>(observer.value==<span>'female'</span>){
            <span>this</span>.innerHTML=<span>'学习减肥'</span>;
        }
    }
    <span>//增加学习区的观察</span><span><span>function</span><span>t1</span><span>()</span>{</span>
        sel.attach(<span>'study'</span>,study);
    }
    <span>//取消学习区的观察</span><span><span>function</span><span>t2</span><span>()</span>{</span>
        sel.detach(<span>'study'</span>);
    }
</span><span></<span>script</span>></span></code>

總結：

1. 當有另一個觀察對象加入的時候直接添加一個就好
2. 降低了主題對象和觀察者對象的耦合度
3. 好的設計模式不會直接進入你的程式碼中，而是進入你的大腦中

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); });

以上就介紹了PHP設計模式之JS實現觀察者模式，包括了觀察者模式,設計模式方面的內容，希望對PHP教程有興趣的朋友有所幫助。