BackboneJS - Applicazioni

BackboneJS fornisce una struttura alle applicazioni web che consente di separare la logica di business e la logica dell'interfaccia utente. In questo capitolo, discuteremo lo stile architettonico dell'applicazione BackboneJS per l'implementazione delle interfacce utente. Il diagramma seguente mostra l'architettura di BackboneJS -

L'architettura di BackboneJS contiene i seguenti moduli:

  • Richiesta HTTP
  • Router
  • View
  • Events
  • Model
  • Collection
  • Fonte di dati

Parliamo ora in dettaglio di tutti i moduli.

Richiesta HTTP

Il client HTTP invia una richiesta HTTP a un server sotto forma di un messaggio di richiesta in cui browser web, motori di ricerca, ecc., Si comportano come client HTTP. L'utente richiede un file come documenti, immagini, ecc. Utilizzando il protocollo di richiesta HTTP. Nel diagramma sopra, puoi vedere che il client HTTP utilizza il router per inviare la richiesta del client.

Router

Viene utilizzato per instradare le applicazioni lato client e connetterle ad azioni ed eventi tramite URL. È una rappresentazione URL degli oggetti dell'applicazione. Questo URL viene modificato manualmente dall'utente. L'URL viene utilizzato dal backbone in modo che possa capire quale stato dell'applicazione deve essere inviato o presentato all'utente.

Il router è un meccanismo che può copiare gli URL per raggiungere la vista. Il router è necessario quando le applicazioni Web forniscono URL collegabili, segnalibri e condivisibili per posizioni importanti nell'app.

Nell'architettura sopra, il router che invia una richiesta HTTP alla vista. È una funzionalità utile quando un'applicazione richiede capacità di routing.

Visualizza

Le viste BackboneJS sono responsabili di come e cosa visualizzare dalla nostra applicazione e non contengono markup HTML per l'applicazione. Specifica un'idea alla base della presentazione dei dati del modello all'utente. Le visualizzazioni vengono utilizzate per riflettere "l'aspetto del modello di dati".

Le classi di visualizzazione non sanno nulla di HTML e CSS e ogni visualizzazione può essere aggiornata in modo indipendente quando il modello cambia senza dover ricaricare l'intera pagina. Rappresenta la parte logica dell'interfaccia utente nel DOM.

Come mostrato nell'architettura sopra, la Vista rappresenta l'interfaccia utente che è responsabile della visualizzazione della risposta alla richiesta dell'utente effettuata utilizzando il Router.

Eventi

Gli eventi sono le parti principali di qualsiasi applicazione. Associa gli eventi personalizzati dell'utente a un'applicazione. Possono essere combinati in qualsiasi oggetto e sono in grado di associare e attivare eventi personalizzati. È possibile associare gli eventi personalizzati utilizzando il nome desiderato di propria scelta.

In genere, gli eventi vengono gestiti in modo sincrono con il flusso del loro programma. Nell'architettura sopra, è possibile vedere quando si verifica un evento, rappresenta i dati del modello utilizzando la vista.

Modello

È il cuore dell'applicazione JavaScript che recupera e popola i dati. I modelli contengono i dati di un'applicazione, la logica dei dati e rappresentano l'oggetto dati di base nel framework.

I modelli rappresentano entità aziendali con alcune logiche aziendali e convalide aziendali. Sono utilizzati principalmente per l'archiviazione dei dati e la logica aziendale. I modelli possono essere recuperati e salvati nella memoria dati. Un modello prende la richiesta HTTP dagli eventi passati dalla vista utilizzando il router e sincronizza i dati dal database e invia la risposta al client.

Collezione

Una raccolta è un insieme di modelli che lega eventi, quando il modello è stato modificato nella raccolta. La raccolta contiene un elenco di modelli che possono essere elaborati nel ciclo e supporta l'ordinamento e il filtro. Quando si crea una raccolta, possiamo definire il tipo di modello che quella raccolta avrà insieme all'istanza delle proprietà. Qualsiasi evento attivato su un modello si attiverà anche sulla raccolta nel modello.

Prende anche la richiesta dalla vista, associa gli eventi e sincronizza i dati con i dati richiesti e invia la risposta al client HTTP.

Fonte di dati

È la connessione impostata a un database da un server e contiene le informazioni richieste dal client. Il flusso dell'architettura BackboneJS può essere descritto come mostrato nei seguenti passaggi:

  • Un utente richiede i dati utilizzando il router, che instrada le applicazioni agli eventi utilizzando gli URL.

  • La vista rappresenta i dati del modello per l'utente.

  • Il modello e la raccolta recuperano e popolano i dati dal database associando eventi personalizzati.

Nel prossimo capitolo capiremo il significato degli eventi in BackboneJS.