Domanda di progettazione OI dell'interfaccia utente JavaScript

0

Sono un po 'nuovo di OOP, quindi nutro ancora qualche dubbio quando si tratta di come oggetti diversi dovrebbero comunicare tra loro. Ho un caso concreto in cui non riesco a capire quale sia il miglior design tra i due che mi è venuto in mente.

Fondamentalmente, sto costruendo un'interfaccia utente web (HTML + javascript) in cui ci sono tre giocatori principali:

  • un mucchio di oggetti multimediali (foto, video)
  • un MediaManager (un contenitore per l'Italia media, carica nuovi media quando necessario, ecc.),
  • e un MediaViewer (uno stage a schermo intero che mostra i contenuti multimediali a schermo intero, quando vengono cliccati).

Ora, facendo clic su un media si attiverà il suo metodo view () che apre MediaViewer e imposta il suo contenuto su quello del Media su cui è stato fatto clic.

Una volta che il Viewer è aperto, l'utente può navigare ulteriormente attraverso i media usando i tasti freccia della tastiera. Il media successivo o precedente da mostrare, quando si fa clic su una freccia, viene deciso dal MediaManager: il gestore ha una proprietà .currentlyViewed con il media corrente che viene visualizzato, oltre a un elenco di tutti i media, in modo che sappia quale media viene Il prossimo.

Il mio dubbio riguarda il modo migliore per mantenere aggiornata questa proprietà .currentlyViewed.

Opzione 1:

Passa un riferimento dell'istanza di MediaManager a ciascun oggetto multimediale durante l'istanziazione e, nel loro metodo view (), fai qualcosa di simile

mediaManager.currentlyViewed = media.id

Questo è quello che sto facendo in questo momento, tuttavia mi sembra sbagliato che gli oggetti multimediali debbano sapere quali proprietà hanno i loro "genitori" e cambiare così direttamente quell'oggetto. Questo è mantenibile a lungo termine, quando avrò bisogno di aggiungere altre funzionalità?

Opzione2:

Rendi i media "osservabili" per le modifiche nel loro stato di visualizzazione, cioè implementa un metodo "registerOnViewCallback".

Quindi è il MediaManager che fa qualcosa del tipo:

media.registerOnViewCallback( 
function( mediaId ) { 
    mediaViewer.currenctlyViewed = mediaId; 
} );

ora i media non hanno più bisogno di sapere quali proprietà ha il MediaManager, eseguiranno ciecamente qualunque sia il loro callback. Tuttavia, questo codice è più indiretto e potrebbe essere più dettagliato.

Qual è lo schema migliore, quali problemi si presentano con l'altro e perché?

Grazie.

    
posta Daniel 09.08.2016 - 18:33
fonte

1 risposta

1

Ogni volta che stai progettando alcune classi, pensa: "chi dovrebbe essere responsabile di cosa"? Se si mantengono le cose semplici e si pensa a ciò che è logico che certe classi facciano o siano, allora arriverete naturalmente a progetti chiari, facili da capire e disaccoppiati.

Nel tuo caso specifico, non penso che abbia senso avere "view", che sta causando questo imbarazzo con cui stai avendo problemi. Sembra più naturale per lo spettatore essere quello che "mostra" (viste) un determinato elemento multimediale e il gestore di essere quello che gli dice cosa mostrare e quando (es. Quando l'utente preme "entra").

Ecco come penso alla tua situazione (che è principalmente quella che hai già detto):

  • Il supporto ha tutti i dati su un elemento multimediale.
  • Viewer ha tutti i controlli e la logica per visualizzare un elemento multimediale. Il visualizzatore potrebbe utilizzare i getter di un media per mostrare dettagli specifici su un singolo media.
  • Manager ha raccolta Media; ascolta l'input da tastiera / mouse e seleziona l'elemento multimediale appropriato. Utilizza un Viewer per visualizzare il supporto attualmente selezionato.

Questi possono essere tradotti direttamente in campi membro e funzioni in ogni classe / oggetto.

Il tuo intuito sulle opzioni 1 e 2 è giusto. L'opzione 1 è un accoppiamento non necessario; L'opzione 2 è una complessità non necessaria. Il Viewer sa come "vedere" le cose e Manager gestisce tutto; Il supporto contiene solo tutti i dati relativi a un singolo articolo.

Spero che questo aiuti e buona fortuna.

    
risposta data 09.08.2016 - 23:13
fonte

Leggi altre domande sui tag