Welcome back to series about design pattern in JavaScript. This is an article about Observer design pattern.
If you are interested in the topic of design pattern in JavaScript. These are the articles on the topic of design pattern. Design pattern in JavaScript series.
Table of
contents:
- What is Observer design pattern?
- How to implements Observer design pattern?
- Practical application
Let’s go to
the contents.
What is
Observer design pattern?
The Observer
pattern is a behavioral design pattern.
The Observer
design pattern describe how to solve recurring design challenges to design
flexible and reusable object-oriented software, i.e., objects which are easier
to implement, change, test, and reuse.
What
problems can be the Observer design pattern solve:
A one-to-many
dependency between objects should be defined without making the objects tightly
coupled.
It should be
ensured that when one object changes state, an open-ended number of dependent
objects are updated automatically.
It should be
possible that one object can notify an open-ended number of other objects.
How to
implements Observer design pattern?
Observer
pattern user three actor classes: Subject, Observer and Client.
Subject is
an object having methods to attach and detach observers to a client object.
We have created an abstract class Observer and a concrete class Subject that is extending class Observer.
 |
| Observer UML class diagram |
Practical application
Observer
design pattern is a design pattern that is widely used on the internet. You use
social networks; you subscribe or follow individuals or channels. Every time
they release a new product, you immediately know it. New notifications are
immediately notified to you.
So, let's
create our own social media channel. Here users will subscribe to publishers to
receive notifications for publisher products.
First, we
will create Subject object, these are the methods for users when using social
networks will have.
function Subject() {
this.observer = []
}
Subject.prototype = {
subscribe: function (func) {
this.observer.push(func)
},
unsubscribe: function (funcToRemove) {
this.observer = this.observer.filter((func) => {
return func !== funcToRemove
})
},
notify: function () {
this.observer.forEach((func) => {
func.call()
})
}
}
You can see
we have a Subject object that has methods: subscribe(), unsubscribe() and
notify(). subscribe() method for users who want to follow the channels they are
interested in. unsubscribe() method is for users who unsubscribe and don't want
to follow those publishers anymore. The notify() method is a way for users to
know that when the publisher makes a change, they will receive a notification.
Next, we
will create product release channels.
function ObserverComicBook() {
console.log('We release the comic book one time a week!')
}
function ObserverHorrorBook() {
console.log('We have the best horror book. Subcribe to see
more ')
}
function ObserverLoveBook() {
console.log('If you are falling in love with someone else,
choosing us to read the best love story.')
}
We have
three channels that publish books by themes: comic, horror, and love. And now,
we will have the first customers to experience this social network and
subscribe to channels with topics they are interested in.
const client1 = new Subject()
client1.subscribe(ObserverComicBook)
client1.subscribe(ObserverHorrorBook)
Client1 has
been created and subscribed to comic books and horror books. Now let's see if
our function is working properly.
client1.notify()
// => We release the comic book one time a
week!
// => We have the best horror book.
Subcribe to see more
Awesome! For
channels that client1 subscribes to, client1 will receive notifications. For
other channels, client1 does not receive notifications.
Let's
continue with another client to see if the functions work as we want.
const client2 = new Subject()
client2.subscribe(ObserverLoveBook)
client2.subscribe(ObserverComicBook)
client2.notify()
// => If you are falling in love with
someone else, choosing us to read the best love story.
// => We release the comic book one time a
week!
Great!
Client2 subscribes to other channels and receives different notifications from
client1. After a while, client2 doesn't want to subscribe to love book but
wants to change to horror book. Let's see what the result will be.
const client2 = new Subject()
client2.subscribe(ObserverLoveBook)
client2.subscribe(ObserverComicBook)
client2.unsubscribe(ObserverLoveBook)
client2.subscribe(ObserverHorrorBook)
client2.notify()
// => We release the comic book one time a week!
// => We have the best horror book.
Subcribe to see more
Perfect! The
functions work as we originally wanted. Let's go to the analysis of Observer
design pattern.
Pros:
Open/Closed
principle. You can introduce new subscriber classes without having to change
the publisher’s code.
You can
establish relations between object at runtime.
Cons:
Subscribers
are notified in random order.
Conclusion
Observer
design pattern is an extremely cool and widely adopted design pattern. It's not
just about notifying users. The Observer pattern can also display the shopping
cart to the user. Display weather, temperature changes continuously. If
possible, consider using the Observer design pattern.
If you have
any ideas feel free to comment below. Thank you for joining with me. Having a
good day!
0 Nhận xét