Javascript Common Design Patterns
-
Upload
pham-huy-tung -
Category
Engineering
-
view
454 -
download
3
Transcript of Javascript Common Design Patterns
![Page 1: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/1.jpg)
JavaScript Design Patterns
2014 – Pham Tung
![Page 2: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/2.jpg)
Contents
• What is Design Pattern?• Why Design Pattern?• Types of Design Pattern• Explore some patterns
1. Singleton Pattern2. Factory Pattern3. Module Pattern4. Decorator Pattern5. Command Pattern6. Observer Pattern
![Page 3: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/3.jpg)
What is Design Pattern
• A general reusable solution to a commonly occurring problem in software design.
• Not a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations.
![Page 4: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/4.jpg)
Why Design Patterns
Building diagram?No need!
![Page 5: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/5.jpg)
Why Design Patterns
![Page 6: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/6.jpg)
Why Design Patterns
• To design a new software system quickly and efficiently.
• To understand a existing software system.• Speed up the development process by providing
tested, proven development paradigms.• Help to prevent subtle issues that can cause major
problems, code readability.• Allow developers to communicate using well-
known, well understood names for software interactions.
![Page 7: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/7.jpg)
Types of Design Pattern
• Creational– Object creation.
• Structural– Relationship between entities.
• Behavioral– Communication between objects.
![Page 8: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/8.jpg)
Periodic Table of Patterns
![Page 9: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/9.jpg)
Patterns we are going to explore
Creational
● Singleton
● Factory
Structural
● Decorator
Behavioral
● Command
● Observer
● Module
![Page 10: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/10.jpg)
Singleton Pattern
Creational:
1
![Page 11: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/11.jpg)
Singleton Pattern
• Ensure a class has only one instance, and provide a global point of access to it.
• Encapsulated “just-in-time initialization” or “initialization on first use”.
• Reduce the need for global variables which is particularly important in JavaScript because it limits namespace pollution and associated risk of name collisions.
• The Module pattern is JavaScript's manifestation of the Singleton pattern.
![Page 12: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/12.jpg)
Singleton Pattern1. var Singleton = (function () {2. var instance;3. function createInstance() {4. var object = new Object("I am the instance");5. return object;6. }7. return {8. getInstance: function () {9. if (!instance) {10. instance = createInstance();11. }12. return instance;13. }14. };15. })();16. var instance1 = Singleton.getInstance();17. var instance2 = Singleton.getInstance();18. alert("Same instance? " + (instance1 === instance2));
![Page 13: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/13.jpg)
Singleton Pattern1. function MySingletonClass() {
2. if ( arguments.callee._singletonInstance )3. return arguments.callee._singletonInstance;4. arguments.callee._singletonInstance = this;
5. this.Foo = function() {6. // ...7. }8. }
9. var a = new MySingletonClass()10. var b = MySingletonClass()
11. console.log( a === b ); // prints: true
![Page 14: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/14.jpg)
Factory Patterns
Creational:
2
![Page 15: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/15.jpg)
Factory Patterns
Classes should be open for extension, but closed for modification.
Dependency Inversion Principle
Depend upon abstractions. Do not depend upon concrete classes.
![Page 16: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/16.jpg)
Factory Patterns
● Simple Factory
● Factory Method
● Abstract Factory
![Page 17: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/17.jpg)
Factory Patterns
I want to buy a Doraemon book.
Oh, yes yes! Please send me that Rabbit book.
![Page 18: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/18.jpg)
Factory Patterns
![Page 19: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/19.jpg)
Factory Patterns
![Page 20: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/20.jpg)
Factory Patterns
OMG!
IS IT FUNNY!
![Page 21: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/21.jpg)
Factory Patterns(Simple Factory)
● Is a class with a public static method which will actually do the object creation task according to the input it gets.
![Page 22: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/22.jpg)
Factory Patterns(Simple Factory)
function orderBook(var type){ var book;
if (type === 'comic') {book = new
ComicBook();} else if (type === 'history') {
book = new HistoryBook();} else if (type === 'Science') {
book = new ScienceBook();}
book.prepare();book.box();return book;
}
We need to modify the entire code whenever a new type is added.
And this code is consistent. We don’t need to make a change.
But only this highlight code need to be modified.
![Page 23: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/23.jpg)
Factory Patterns(Simple Factory)
function orderBook(type){ var book;
book.prepare();book.box();return book;
}
var Factory = {getBook : function (type){
var book;if (type === 'comic') {
book = new ComicBook();
} else if (type === 'history') {book = new
HistoryBook();} else if (type === 'Science') {
book = new ScienceBook();
}return book;
}};
Factory.getBook("comic");
book = Factory.getBook(type)
So, why don’t we move this mess to another place?
![Page 24: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/24.jpg)
Factory Patterns(Factory Method Pattern)
• Define an interface for creating an object, but let subclasses decide which class to instantiate. Factory lets a class defer instantiation to subclasses.
![Page 25: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/25.jpg)
Factory Patterns(Factory Method Pattern)
![Page 26: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/26.jpg)
Factory Patterns(Factory Method Pattern)
function BookFactory(){this.getBook = function (type){
var book;if (type === 'comic') {
book = new ComicBook();
} else if (type === 'hisoty') {book = new
HistoryBook();} else if …
return book;}
}
var factory = new BookFactory();var book = factory.getBook( 'comic');
![Page 27: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/27.jpg)
Factory Patterns(Abstract Factory Pattern)
• Abstract Factory offers the interface for creating a family of related objects, without explicitly specifying their classes.
![Page 28: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/28.jpg)
Factory Patterns(Abstract Factory Pattern)
![Page 29: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/29.jpg)
Factory Patterns(Abstract Factory Pattern)
![Page 30: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/30.jpg)
Factory Patterns(Abstract Factory Pattern)
function EnglishBookFactory(){this.getBook = function(type){
// …return book;
};this.getNewspaper = function(){
// … return newspaper;
};}function VietnameseBookFactory(){
// …}
var factory = new EnglishBookFactory();var store = new XyzBookStore(factory);store.comeIntoOperations();
![Page 31: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/31.jpg)
Factory Patterns
Create only one product.
Exposes a method to the client for creating the object.
Factory Method Abstract Factory
Creating families of related or dependent products.
Expose a family of related objects which may consist of these Factory methods.
2
1
![Page 32: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/32.jpg)
Factory Patterns
Hides the construction of single object.
Uses inheritance and relies on derived class or sub class to create object.
Hides the construction of a family of related objects.
Uses composition to delegate responsibility of creating object to another class.
Factory Method Abstract Factory
3
4
![Page 33: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/33.jpg)
Factory Patterns
Differences (when to use):● Factory Method
○ There is a need to decouple a client from a particular product that it uses
○ To relieve a client of responsibility for creating and configuring instances of a product.
● Abstract Factory○ Clients must be decoupled from product classes.
Especially useful for program configuration and modification.
○ Can also enforce constraints about which classes must be used with others.
![Page 34: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/34.jpg)
Factory Patterns
• When To Use:– When your object's setup requires a high level of
complexity.– When you need to generate different instances
depending on the environment.– When you're working with many small objects that share
the same properties.– When composing classes with instances of other classes
that need only satisfy an API contract (aka, duck typing) to work. This is useful for decoupling.
![Page 35: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/35.jpg)
Module Pattern
Creational, Structural:
3
![Page 36: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/36.jpg)
Module Pattern
function
private members
public members
object
![Page 37: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/37.jpg)
Module Pattern
function
private members
public members
objectreturn
![Page 38: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/38.jpg)
Module Pattern
public members
object
Module
![Page 39: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/39.jpg)
Module Pattern
public members
Module
Closure
private members
![Page 40: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/40.jpg)
Module Pattern
• Provide both private and public encapsulation for classes.
• Emulate the concept of classes: able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope. ☛ Reduce names conflicting with other functions defined in additional scripts on the page.
![Page 41: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/41.jpg)
Module Pattern1. var TestModule = (function () {2. var counter = 0; // private member3. return {4. incrementCounter: function () {5. return counter++;6. },7. resetCounter: function () {8. console.log('counter value prior to reset:' + counter);9. counter = 0;10. }11. };12. })();13. // test14. TestModule.incrementCounter();15. TestModule.resetCounter();
![Page 42: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/42.jpg)
Module Pattern
testModule.printCounter = function(){console.log(counter);
};
1. var testModule = (function () {2. var counter = 0; // private member3. return {4. incrementCounter: function () { ... },5. resetCounter: function () { ... }6. };7. })();
What will happen if I dynamically add a new function to the testModule variable.
Like this.
![Page 43: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/43.jpg)
Module Pattern
WTF
testModule.printCounter = function(){console.log(counter);
};testModule.printCounter();
![Page 44: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/44.jpg)
Module Pattern• Advantages
– Cleaner for developers coming from an object-oriented background than the idea of true encapsulation.
– Supports private data.• Disadvantages
– Hard to change visibility of members.– Can't access private members in methods that are added
to the object at a later point (dynamically add method).– Inability to create automated unit tests for private
members and additional complexity.
![Page 45: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/45.jpg)
Decorator Pattern
Structural:
4
![Page 46: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/46.jpg)
Decorator Pattern
Classes should be open for extension, but closed for modification.
Open-Closed Principle
Classes should be open for extension, but closed for modification.
![Page 47: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/47.jpg)
Decorator Pattern
5 $
7 $
DecoratorComponent
![Page 48: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/48.jpg)
Decorator Pattern7 $
![Page 49: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/49.jpg)
Decorator Pattern7 $
![Page 50: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/50.jpg)
Decorator Pattern7 $
Waiter: NOT BAD!LIKE A BOSS
![Page 51: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/51.jpg)
Decorator Pattern99 $
29 $
89 $7 $
Waiter: Here is your bill, sir
7 + 89 + 99 + 29 = 224 $
![Page 52: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/52.jpg)
Decorator Pattern
WormChickenRice
WormRice
ChickenWormRice
EggRice
WormEggRice
ChickenEggRice
ScorpionEggRice
ChickenWormEggRice
ScorpionRice
BeerChickenEggRice
ChickenEggRice
BeerEggRice
ChickenScorpionRice
Way 1:
![Page 53: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/53.jpg)
Decorator Pattern
Beer (+ 29$)
Chicken (+99$)
Worm (+89$)
Rice (7$)
Way 2:
![Page 54: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/54.jpg)
Decorator Pattern
• Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality.
• Multiple decorators can add or override functionality to the original object.
![Page 55: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/55.jpg)
Decorator Pattern
![Page 56: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/56.jpg)
Decorator Patternfunction Rice(){ this.cost = 7;}
function WormDecorator(rice){ rice.cost += 89; }
function ChickenDecorator(rice){ rice.cost += 99;}
function BeerDecorator(rice){ rice.cost += 29;}
var rice = new Rice(); WormDecorator(rice); ChickenDecorator(rice); BeerDecorator(rice);alert(rice.cost);// 224
![Page 57: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/57.jpg)
Command Pattern
Behavioral:
5
![Page 58: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/58.jpg)
Command Pattern
• Encapsulate requests/actions as objects.• Command objects allow for loosely coupled
systems by separating the objects that issue a request from the objects that actually process the request.
• These requests are called events and the code that processes the requests are called event handlers.
![Page 59: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/59.jpg)
Command Pattern
![Page 60: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/60.jpg)
Command Pattern
- ConcreteCommand: implementing the Execute method by invoking the corresponding operations on Receiver.
- Client: creates a ConcreteCommand object and sets its receiver.
- Invoker: asks the command to carry out the request.
- Receiver: knows how to perform the operations;
![Page 61: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/61.jpg)
Command Pattern
CHÉÉÉÉÉM4
52
1
3
![Page 62: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/62.jpg)
Command Pattern
Receiver
Invoker
Prisoner
Client
Command
CHÉÉÉÉÉM
![Page 63: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/63.jpg)
Command Pattern
![Page 64: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/64.jpg)
Command Pattern// Receiver.function Sword() { this.cut = function() { console.log("Sword: YAAAA! YOU'RE DEAD!"); } }// Command.function CutCommand(sword){ this.execute = function() { sword.cut(); }}// Invoker (may have a lot of commands)function Executioner() { this.cutHead = function(command) { command.execute(); }}
// Clientfunction King() { this.run = function(){ var sword = new Sword(); var command = new CutCommand (sword); var executioner = new Executioner();
executioner.cutHead(command); }}
(new King()).run();
DEMO
![Page 65: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/65.jpg)
Command Pattern1. var Agent = {2. sayHello: function(name) { alert("Hello " + name); },3. sayGoodbye: function(name) { alert("Good bye " + name); },4. execute: function (name) {5. return Agent[name] && Agent[name].apply(Agent, [].slice.call(arguments, 1));6. }7. };
8. Agent.execute("sayHello", "Bill");
![Page 66: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/66.jpg)
Command Pattern1. var Agent = {2. sayHello: function(name) { alert("Hello " +
name); },3. sayGoodbye: function(name) { alert("Good
bye " + name); },4. execute: function (name) {5. return Agent[name] &&
Agent[name].apply(Agent, [].slice.call(arguments, 1));
6. }7. };
8. Agent.execute("sayHello", "Bill");
It seems I have and will never use this pattern in Javascript.
Oh, really?
![Page 67: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/67.jpg)
Command Patternvar button = document.getElementById('myBtn');
// add event listenerbutton.addEventListener('click', function(event) { closeWindow();});
...
What about this?
![Page 68: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/68.jpg)
Command Patternvar button = document.getElementById('myBtn');
// add event listenerbutton.addEventListener('click', function(event) { closeWindow();});
...
![Page 69: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/69.jpg)
Command Pattern
Command Pattern Event Driven
Command object
Receiver
Invoker
Source
Event object
Target object
![Page 70: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/70.jpg)
Command Pattern
http://en.wikipedia.org/wiki/Command_pattern
Command Pattern Event Driven
Command object
Receiver
Invoker
Source
Event object
Target object
![Page 71: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/71.jpg)
Command Pattern
Client Server
Add
Update
Delete
Normal way
![Page 72: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/72.jpg)
Server
Command Pattern
Client
Add
Update
Delete
Invoker
Add
Update
Delete
![Page 73: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/73.jpg)
Observer Pattern(Publish/Subscribe pattern)
Behavioral:
6
![Page 74: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/74.jpg)
Observer Pattern
Hello, I’m Putin. I’d like to make an annual subscription.
register/subscribe
Subject
Aye aye sir.
![Page 75: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/75.jpg)
Observer Pattern
ObserversONE TO MANY RELATIONSHIP
Subject
![Page 76: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/76.jpg)
Observer Pattern
Observers
publish
Subject
![Page 77: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/77.jpg)
Observer Pattern
Observers
I want to cancel my subscription ‘cause I’m tired to death.
remove/unsubscribe
Subject
![Page 78: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/78.jpg)
Observer Pattern
Observers
Subject
Kicker
OK, take care, sir.
![Page 79: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/79.jpg)
Observer Pattern
• Allows an object (subscriber or observer) to watch another object (publisher or subject).
• Subscribers are able to register/unregister (subscribe/unsubscribe) to receive topic notifications from the publisher.
• Publisher can notify observers by broadcasting (publishing) a notification to each observer.
![Page 80: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/80.jpg)
Observer Pattern
![Page 81: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/81.jpg)
Observer Pattern
![Page 82: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/82.jpg)
Observer Pattern function Subject() { this.observers = [];} Subject.prototype = { subscribe: function(observer) { this.observers.push(observer); }, unsubscribe: function(name) { // remove observer from subscribers }, notify: function(message) { for (var i =0; i < this.observers.length; i++) { this.observers[i].callback(message); } }};
function Observer(name) { this.name = name; this.callback = function(message){ console.log(message) };}
// Here's where it gets used.var subject = new Subject();subject.subscribe(new Observer("Putin"));subject.subscribe(new Observer("Mary"));subject.subscribe(new Observer("Binladen"));subject.notify('Hello!');
![Page 83: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/83.jpg)
Observer Pattern <input id='button1' type='button' value='Publish'><input class='subscriber' type='text'><input class='subscriber' type='text'>
$(function(){ function publish(){ $('.subscriber').trigger('/getnews', 'Hello!'); } $('.subscriber').on('/getnews', function(event, message){ this.value = message; }); $('#button1').click(publish);});
Javascript (jQuery):
More example: http://jsfiddle.net/rajeshpillai/xQkXk/22/
![Page 84: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/84.jpg)
Observer Pattern
• The power of Loose Coupling– The only thing the subject knows about an observer
is that it implements a certain interface.– We can add new observers at any time.– We never need to modify the subject to add new
types of observers.– We can reuse subjects or observers independently of
each other.– Changes to either the subjects or an observer will no
affect the other.
![Page 85: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/85.jpg)
Observer Pattern I found that the Observer pattern is so much like the Event-driven approach.
Are they the same?
Staff
Staff
Staff
Boss
notify
Hmm...
![Page 86: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/86.jpg)
Observer Pattern
Staff
Staff
Staff
Event
Boss
Well, the main difference between them is the word “Event”.
![Page 87: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/87.jpg)
Observer Pattern
Staff
Staff
Staff
Event
Boss
When Boss provides the instruction, the event will be responsible for transferring it to staff.
And Boss doesn’t care who the hell will receive his instruction.
![Page 88: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/88.jpg)
Observer Pattern
As you well know, Leader works closely to the others...
In Observer, Leader knows all who will receive his instruction.
Member (Observer)
Member (Observer)
Member (Observer)
Leader (Subject)
![Page 89: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/89.jpg)
Observer Pattern
So, Event-driven is more loose coupling than Observer pattern?
Yep! And actually, no one prevents you to implement Observer using Event-drivent.
Member (Observer)
Member (Observer)
Member (Observer)
Leader (Subject)
![Page 90: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/90.jpg)
References
Finally
7
![Page 91: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/91.jpg)
References
1. Learning JavaScript Design Patterns - Addy Osmani2. Head First Design Patterns - Eric Freeman & Elisabeth Freeman with
Kathy Sierra & Bert Bates3. OODesign - oodesign.com4. Javascript Design Pattern - ww.dofactory.com/javascript-pattern.aspx
![Page 92: Javascript Common Design Patterns](https://reader035.fdocuments.us/reader035/viewer/2022062406/55c4c797bb61eb61708b4870/html5/thumbnails/92.jpg)
The end!Thank you for your attention