PHP 디자인 패턴 JS는 관찰자 패턴을 구현합니다. c 관찰자 패턴 안드로이드 관찰자 패턴 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: 선택 시 3개 영역을 변경할 수 있습니다.
부분을 수정하시겠습니까? 2: 여성스러운 스타일을 선택했지만, 요즘 보라색이 인기가 많아 핑크색으로 바꾸지 않는다면 if elseif 부분을 수정해야 하나요?
문제는 제어 로직이 조작 대상과 심하게 결합되어 있다는 것입니다.

이를 위해서는 관찰자 패턴이 필요합니다
JS는 관찰자 모드를 구현합니다

div 객체가 선택 변경을 관찰하도록 합니다. 선택이 변경되면 이 두 객체에 알림이 전달됩니다. 그리고 이 두 개체를 변경하여 관찰자 패턴을 구현합니다.

해결 방법은 다음과 같습니다
선택 개체는 연결, 분리, 통지 Observers를 담당하며 특정 개체 변경과 분리됩니다.
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('사전 번호 매기기').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); });

위 내용은 옵저버 패턴과 디자인 패턴을 포함하여 PHP 디자인 패턴에 옵저버 패턴을 JS로 구현하는 방법을 소개한 내용으로, PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.