What is the Observer Pattern ?
L'Observer pattern établit essentiellement une relation one-to-many entre les objets, de telle sorte que lorsque l'état d'un objet (subject) change, tous ses dépendants (observers) sont notifiés et mis à jour automatiquement. Ce modèle est idéal pour les scénarios où un changement d'état d'un objet devrait déclencher des actions spécifiques dans d'autres parties du code.
Cas d'utilisation réel : Tableau de bord en temps réel
La classe Observer
1class Observer {
2 constructor() {
3 this.observers = [];
4 }
5
6 subscribe(callback) {
7 this.observers.push(callback);
8 }
9
10 unsubscribe(callback) {
11 this.observers = this.observers.filter(observer => observer !== callback);
12 }
13
14 notify(data) {
15 this.observers.forEach(observer => observer(data));
16 }
17}
18
19export default Observer;
Dans cette implémentation, nous avons défini une classe Observer avec des méthodes pour s'abonner, se désabonner et notifier les observateurs.
Intégration de l'Observer Pattern
Maintenant, utilisons l'Observer pattern pour créer un tableau de bord en temps réel avec trois sources de données : les prix des actions, les mises à jour météorologiques et les alertes d'actualités.
Prix des actions
1const stockObserver = new Observer();
2
3function updateStockPrices(price) {
4 console.log(`Stock Price: $${price}`);
5}
6
7stockObserver.subscribe(updateStockPrices);
8
9// Simulate real-time updates
10setInterval(() => {
11 const newPrice = Math.random() * 100;
12 stockObserver.notify(newPrice);
13}, 2000);
Mises à jour météorologiques
1const weatherObserver = new Observer();
2
3function updateWeather(weatherData) {
4 console.log(`Weather Update: ${weatherData}`);
5}
6
7weatherObserver.subscribe(updateWeather);
8
9// Simulate real-time updates
10setInterval(() => {
11 const newWeather = 'Sunny';
12 weatherObserver.notify(newWeather);
13}, 3000);
Alertes d'actualités
1const newsObserver = new Observer();
2
3function updateNews(news) {
4 console.log(`News Alert: ${news}`);
5}
6
7newsObserver.subscribe(updateNews);
8
9// Simulate real-time updates
10setInterval(() => {
11 const headlines = ['Breaking News 1', 'Breaking News 2', 'Breaking News 3'];
12 const randomNews = headlines[Math.floor(Math.random() * headlines.length)];
13 newsObserver.notify(randomNews);
14}, 5000);
En mettant en œuvre l'Observer pattern, nous avons créé un tableau de bord en temps réel qui met à jour les prix des actions, les conditions météorologiques et les alertes d'actualités dès que de nouvelles données sont disponibles.
Aller plus loin avec un exemple plus complexe
1// Sujet (Subject) - Classe Blog pour représenter le blog
2class Blog {
3 constructor() {
4 this.subscribers = [];
5 }
6
7 // Méthode pour ajouter un abonné (observateur)
8 subscribe(subscriber) {
9 this.subscribers.push(subscriber);
10 }
11
12 // Méthode pour retirer un abonné
13 unsubscribe(subscriber) {
14 const index = this.subscribers.indexOf(subscriber);
15 if (index !== -1) {
16 this.subscribers.splice(index, 1);
17 }
18 }
19
20 // Méthode pour notifier tous les abonnés lorsqu'un nouvel article est publié
21 publishNewArticle(article) {
22 this.subscribers.forEach(subscriber => {
23 subscriber.notify(article);
24 });
25 }
26}
27
28// Observateur (Observer) - Classe Subscriber pour représenter un abonné
29class Subscriber {
30 constructor(name) {
31 this.name = name;
32 }
33
34 // Méthode pour recevoir une notification lorsqu'un nouvel article est publié
35 notify(article) {
36 console.log(`${this.name} a reçu une notification : Nouvel article publié - "${article}"`);
37 }
38}
39
40// Création du blog
41const myBlog = new Blog();
42
43// Création d'abonnés
44const subscriber1 = new Subscriber('Alice');
45const subscriber2 = new Subscriber('Bob');
46const subscriber3 = new Subscriber('Charlie');
47
48// Abonnement des abonnés au blog
49myBlog.subscribe(subscriber1);
50myBlog.subscribe(subscriber2);
51myBlog.subscribe(subscriber3);
52
53// Publication d'un nouvel article
54myBlog.publishNewArticle('Les dernières tendances en programmation');
55
56// Résultat : Tous les abonnés reçoivent une notification du nouvel article publié.
57
58// Désabonnement d'un abonné
59myBlog.unsubscribe(subscriber2);
60
61// Publication d'un autre nouvel article
62myBlog.publishNewArticle('Guide de démarrage rapide en développement web');
63
64// Résultat : Seulement Alice et Charlie reçoivent une notification du nouvel article publié.
Avantages du modèle Observateur
1 - Mises à jour en temps réel: L'Observer pattern permet des mises à jour en temps réel à travers diverses parties de votre application, offrant une expérience utilisateur fluide et réactive.
2 - Code isoleé: Les objets sont isoleés, ce qui facilite l'ajout ou la suppression d'observateurs sans affecter d'autres parties du code.
3 - Actions personnalisables: Les observateurs peuvent définir des actions personnalisées aux changements, permettant une flexibilité et une extensibilité.
Conclusion
L'Observer pattern est un atout précieux à votre boîte à outils JavaScript, en particulier lorsque vous avez besoin de mises à jour en temps réel et d'une communication efficace entre les composants. Comme le montre notre exemple de tableau de bord en temps réel, il garantit que les changements dans une partie de votre application affectent immédiatement d'autres parties dépendantes, ce qui se traduit par une expérience utilisateur plus interactive et dynamique.
Mon X
Mon portfolio
