Home > Backend Development > PHP Tutorial > PHP design pattern JS implements observer pattern c observer pattern android observer pattern ios observer pattern

PHP design pattern JS implements observer pattern c observer pattern android observer pattern ios observer pattern

WBOY
Release: 2016-07-29 08:54:48
Original
986 people have browsed it

Observer mode Observer
java观察者设计模式,ios观察者设计模式,设计模式中观察者模式,设计模式之观察者模式,观察者模式,观察者模式 java,c 观察者模式,android 观察者模式,ios 观察者模

Achieve the goal: change the select box to change the content area and advertising area
General idea
1: Determine the selected value
2: Go through the sequence and modify the content area according to the value
3: Modify the advertising area again.

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

So what are the problems:
1: Let you change the 3 areas when you select. Do you want to modify the if/elseif part?
2: If you choose a female style, but don’t change it to pink, as purple is now popular, do you need to modify the if elseif part?
The problem is: the control logic is severely coupled with the operated object.

This requires the observer pattern
JS implements the observer mode

We let the div object observe the change of select. When the select changes, these two objects will be notified. And cause changes in these two objects to implement the observer pattern.
java观察者设计模式,ios观察者设计模式,设计模式中观察者模式,设计模式之观察者模式,观察者模式,观察者模式 java,c 观察者模式,android 观察者模式,ios 观察者模

The following is the solution
The select object is responsible for attach, detach, notifyObservers, and is decoupled from specific object changes.
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>
Copy after login

2. The js part in 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>
Copy after login

Summary:

  1. When another observation object is added, just add one directly
  2. Reduces the coupling between the subject object and the observer object
  3. Good design patterns will not enter your code directly, but enter your brain
').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); });

The above introduces the JS implementation of the observer pattern in PHP design patterns, including the observer pattern and design patterns. I hope it will be helpful to friends who are interested in PHP tutorials.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template