Troverai molte applicazioni per questi due modelli, quindi assicurati di avere una solida comprensione di come funzionano e quando usarli.
I modelli di progettazione JavaScript forniscono soluzioni collaudate a problemi comuni nello sviluppo del software. Comprendere e applicare questi modelli ti consentirà di scrivere codice JavaScript migliore e più efficiente.
Introduzione ai modelli di progettazione JavaScript
I concetti contenuti nei modelli di progettazione JavaScript servono a guidarti su come superare i problemi comuni che dovrai affrontare come sviluppatore JavaScript.
Dovresti comprendere le astrazioni sottostanti dietro i modelli, in modo da poterle applicare al tuo particolare problema. Dovresti anche essere in grado di identificare quando uno di questi schemi può essere utile per il tuo codice.
Il modello del modulo
Il pattern Module, che fornisce l'incapsulamento, fa parte di Il sistema di moduli di JavaScript. Fornisce un modo per proteggere i dati privati e il comportamento all'interno di un modulo esponendo un'API pubblica. Consente di creare oggetti modulo autonomi con livelli di accesso privato e pubblico.
Questo è un po' come puoi usa i modificatori di accesso su una classe in un linguaggio come Java o C++.
In JavaScript, puoi implementare il pattern Module usando le chiusure.
Utilizzando una chiusura per racchiudere membri privati (funzioni, variabili, dati), si crea un ambito in cui questi membri sono accessibili ma non direttamente esposti al mondo esterno. Questo aiuta a ottenere l'incapsulamento, mantenendo i dettagli interni nascosti dal codice esterno.
Inoltre, la restituzione di un'API pubblica dalla chiusura consente l'accesso privato a determinate funzioni o proprietà che si desidera esporre come parte dell'interfaccia del modulo.
Questo ti darà il controllo su quali parti del modulo sono accessibili ad altre parti della base di codice. Ciò mantiene un chiaro confine tra funzionalità pubblica e privata.
Ecco un esempio:
cost CarrelloModulo = (funzione () {
// Dati privati
permettere carrelloItems = [];// Metodo privato
funzionecalcolareTotalItems() {
ritorno cartItems.reduce((totale, articolo) => totale + articolo.quantità, 0);
}// API pubblica
ritorno {
addItem (elemento) {
cartItems.push (oggetto);
},getTotalItems() {
ritorno calcolaTotalItems();
},Cancella il carrello() {
carrelloItems = [];
}
};
})();// Esempio di utilizzo
ShoppingCartModule.addItem({ nome: "Prodotto 1", quantità: 2 });
ShoppingCartModule.addItem({ nome: "Prodotto 2", quantità: 1 });consolare.log (ShoppingCartModule.getTotalItems()); // Uscita: 3
ShoppingCartModule.clearCart();
consolare.log (ShoppingCartModule.getTotalItems()); // Uscita: 0
In questo esempio, il CarrelloModulo rappresenta un modulo creato utilizzando il pattern del modulo. L'esecuzione del codice va così:
- IL IIFE esegue il wrapping dell'intero blocco di codice, creando una funzione che viene eseguita immediatamente dopo la dichiarazione. Ciò stabilisce un ambito privato per i membri del modulo.
- carrelloItems è un array privato. Non è direttamente accessibile dall'esterno del modulo.
- calcolaTotalItems() è un metodo privato che calcola il numero totale di articoli nel carrello. Utilizza il ridurre() metodo per iterare sul carrelloItems matrice e sommare le quantità di tutti gli elementi.
- Il modulo restituisce la sua API pubblica come oggetto letterale, esponendo tre metodi pubblici: Aggiungi articolo(), getTotalItems(), E Cancella il carrello().
- All'esterno del modulo, puoi accedere ai metodi pubblici del modulo per interagire con la funzionalità del carrello degli acquisti.
Questo esempio dimostra come il pattern del modulo consente di incapsulare dati privati (carrelloItems) e comportamento (calcolareTotalItems) all'interno del modulo fornendo un'interfaccia pubblica (Aggiungi articolo, getTotalItems, E Cancella il carrello) per interagire con il modulo.
Il modello dell'osservatore
Il pattern Observer stabilisce una dipendenza uno-a-molti tra gli oggetti. Quando lo stato di un oggetto cambia, notifica tutti i suoi dipendenti e si aggiornano automaticamente. Questo modello è particolarmente utile per gestire le interazioni guidate dagli eventi o per disaccoppiare i componenti in un sistema.
In JavaScript, puoi implementare il pattern Observer utilizzando il componente aggiuntivo addEventListener, dispatchEvent metodi, o qualsiasi meccanismi di gestione degli eventi. Iscrivendo gli osservatori ad eventi o argomenti, puoi notificarli e aggiornarli quando si verificano eventi specifici.
Ad esempio, puoi utilizzare il modello Observer per implementare un semplice sistema di notifica:
// Implementazione del modello dell'osservatore
funzioneSistema di notifica() {
// Elenco degli abbonati
Questo.abbonati = [];// Metodo per sottoscrivere le notifiche
Questo.iscriviti = funzione (abbonato) {
Questo.subscribers.push (abbonato);
};// Metodo per annullare l'iscrizione alle notifiche
Questo.unsubscribe = funzione (abbonato) {
cost indice = Questo.subscribers.indexOf (abbonato);Se (indice !== -1) {
Questo.subscribers.splice (indice, 1);
}
};// Metodo per notificare gli abbonati
Questo.notifica = funzione (Messaggio) {
Questo.abbonati.perOgni(funzione (abbonato) {
subscriber.receiveNotification (messaggio);
});
};
}// Oggetto abbonato
funzioneAbbonato(nome) {
// Metodo per ricevere e gestire le notifiche
Questo.receiveNotification = funzione (Messaggio) {
consolare.log (nome + ' notifica ricevuta: ' + messaggio);
};
}// Esempio di utilizzo
cost notificaSistema = nuovo Sistema di notifica();// Crea abbonati
cost abbonato1 = nuovo Abbonato('Abbonato 1');
cost abbonato2 = nuovo Abbonato('Abbonato 2');// Sottoscrivi gli abbonati al sistema di notifica
NotificationSystem.subscribe (abbonato1);
NotificationSystem.subscribe (abbonato2);
// Notifica gli abbonati
notificaSistema.notifica('Nuova notifica!');
L'obiettivo qui è consentire a più abbonati di ricevere notifiche quando si verifica un evento specifico.
IL Sistema di notifica la funzione rappresenta il sistema che invia le notifiche e il Abbonato La funzione rappresenta i destinatari delle notifiche.
Il NotificationSystem ha un array chiamato iscritti per memorizzare gli iscritti che vogliono ricevere le notifiche. IL sottoscrivi Il metodo consente agli abbonati di registrarsi aggiungendo se stessi all'array di abbonati. IL Annulla l'iscrizione metodo rimuoverà i sottoscrittori dall'array.
IL notificare Il metodo in NotificationSystem scorre l'array dei sottoscrittori e chiama il metodo ricevereNotifica metodo su ciascun abbonato, consentendo loro di gestire le notifiche.
Le istanze della funzione Subscriber rappresentano gli abbonati. Ogni abbonato ha un metodo receiveNotification che determina come gestisce le notifiche ricevute. In questo esempio, il metodo registra il messaggio ricevuto nella console.
Per utilizzare il modello Observer, crea un'istanza di NotificationSystem. È quindi possibile creare istanze di Subscriber e aggiungerle al sistema di notifica utilizzando il metodo subscribe.
L'invio di una notifica attiverà il metodo receiveNotification per ciascun sottoscrittore e registrerà il messaggio per ciascun sottoscrittore.
Il modello Observer consente un accoppiamento libero tra il sistema di notifica e gli abbonati, consentendo flessibilità. Il modello promuove la separazione delle preoccupazioni che renderà più semplice la manutenzione nei sistemi guidati dagli eventi.
Utilizzo di modelli JavaScript avanzati
Ecco alcuni suggerimenti generali per utilizzare in modo efficace i pattern JavaScript avanzati:
- Considera le implicazioni sulle prestazioni: i modelli avanzati possono introdurre ulteriore complessità, che può influire sulle prestazioni. Sii consapevole delle implicazioni sulle prestazioni e ottimizzare dove necessario.
- Evita gli anti-schemi: comprendi a fondo gli schemi ed evita di cadere in anti-schemi o di abusarne. Usa i modelli dove hanno senso e in linea con i requisiti della tua applicazione.
- Segui le convenzioni di codifica: segui costantemente le convenzioni di codifica per mantenere la leggibilità e la coerenza in tutta la tua base di codice. Usa nomi di variabili e funzioni significativi e fornisci una documentazione chiara per i tuoi modelli.
Fai attenzione quando applichi questi modelli
Il pattern Module consente l'incapsulamento e promuove la riservatezza dei dati, l'organizzazione del codice e la creazione di moduli autonomi.
D'altra parte, il pattern Observer facilita la comunicazione tra i componenti stabilendo una relazione soggetto-abbonato.
Dovresti essere consapevole di potenziali insidie ed errori comuni durante l'implementazione di modelli JavaScript avanzati. Evitare l'uso eccessivo di modelli in cui esistono soluzioni più semplici o la creazione di codice eccessivamente complesso. Rivedi e rifattorizza regolarmente il tuo codice per assicurarti che rimanga gestibile.
