PHP 設計パターン JS はオブザーバー パターンを実装します。 c オブザーバー パターン android オブザーバー パターン ios オブザーバー パターン

オブザーバーモード オブザーバー

目標を達成する: 選択ボックスを変更してコンテンツエリアと広告エリアを変更します
一般的なアイデア
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: if/elseif 部分を変更しますか? を選択すると、3 つの領域を変更できます。 2: 女性スタイルを選択したが、現在紫が人気なのでピンクに変更しない場合、if elseif 部分を変更する必要がありますか? 問題は、制御ロジックが操作対象オブジェクトと密接に結合していることです。

これにはオブザーバー パターンが必要です

JS はオブザーバー モードを実装します

select の変更を div オブジェクトに監視させます。select が変更されると、これら 2 つのオブジェクトに通知されます。そして、これら 2 つのオブジェクトに変更を加えて、オブザーバー パターンを実装します。

以下が解決策です

select オブジェクトはアタッチ、デタッチ、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>

index.html

<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>

の2.js部分概要:

別の観測オブジェクトを追加する場合は、直接追加するだけです

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 チュートリアルに興味のある友人に役立つことを願っています。