


PHP design pattern JS implements observer pattern c observer pattern android observer pattern ios observer pattern
Observer mode Observer
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>
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.
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>
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>
Summary:
- When another observation object is added, just add one directly
- Reduces the coupling between the subject object and the observer object
- Good design patterns will not enter your code directly, but enter your brain
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.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

In the Java framework, the difference between design patterns and architectural patterns is that design patterns define abstract solutions to common problems in software design, focusing on the interaction between classes and objects, such as factory patterns. Architectural patterns define the relationship between system structures and modules, focusing on the organization and interaction of system components, such as layered architecture.

The Adapter pattern is a structural design pattern that allows incompatible objects to work together. It converts one interface into another so that the objects can interact smoothly. The object adapter implements the adapter pattern by creating an adapter object containing the adapted object and implementing the target interface. In a practical case, through the adapter mode, the client (such as MediaPlayer) can play advanced format media (such as VLC), although it itself only supports ordinary media formats (such as MP3).

The decorator pattern is a structural design pattern that allows dynamic addition of object functionality without modifying the original class. It is implemented through the collaboration of abstract components, concrete components, abstract decorators and concrete decorators, and can flexibly expand class functions to meet changing needs. In this example, milk and mocha decorators are added to Espresso for a total price of $2.29, demonstrating the power of the decorator pattern in dynamically modifying the behavior of objects.

1. Factory pattern: Separate object creation and business logic, and create objects of specified types through factory classes. 2. Observer pattern: allows subject objects to notify observer objects of their state changes, achieving loose coupling and observer pattern.

Design patterns solve code maintenance challenges by providing reusable and extensible solutions: Observer Pattern: Allows objects to subscribe to events and receive notifications when they occur. Factory Pattern: Provides a centralized way to create objects without relying on concrete classes. Singleton pattern: ensures that a class has only one instance, which is used to create globally accessible objects.

The Guice framework applies a number of design patterns, including: Singleton pattern: ensuring that a class has only one instance through the @Singleton annotation. Factory method pattern: Create a factory method through the @Provides annotation and obtain the object instance during dependency injection. Strategy mode: Encapsulate the algorithm into different strategy classes and specify the specific strategy through the @Named annotation.

The advantages of using design patterns in Java frameworks include: enhanced code readability, maintainability, and scalability. Disadvantages include complexity, performance overhead, and steep learning curve due to overuse. Practical case: Proxy mode is used to lazy load objects. Use design patterns wisely to take advantage of their advantages and minimize their disadvantages.

TDD is used to write high-quality PHP code. The steps include: writing test cases, describing the expected functionality and making them fail. Write code so that only the test cases pass without excessive optimization or detailed design. After the test cases pass, optimize and refactor the code to improve readability, maintainability, and scalability.
