Separazione dell'interfaccia utente dalla logica nei moduli JavaScript

0

Sto rifattorizzando alcuni moduli JavaScript personalizzati scritti per supportare la nostra funzionalità di mappatura. Sto cercando di renderli molto più testabili e in grado di collegare i pezzi dentro e fuori più facilmente.

La mia domanda riguarda la manipolazione dell'interfaccia utente e la logica di business nello stesso modulo. So che avere la parte UI rende i test delle unità un po 'più difficili. Penserei anche che disaccoppiare la parte dell'interfaccia utente consentirebbe ad altre persone di aggiungere il proprio livello di interfaccia utente se volessero modificare l'aspetto e mantenere la funzionalità principale.

Modifica : lavoro di più con i moduli Dojo poiché ciò che l'API di mappatura è costruita sopra. Ho pensato che dal momento che Dojo ci fosse, lo useremmo. Sto scoprendo che i moduli Dojo non si prestano ad essere facilmente testati (ho provato ad usare Doh ed è il framework di testing più intuitivo con cui abbia mai lavorato). Sto pensando di creare più moduli JS vanilla e ho solo provato a usare ciò che ho assolutamente bisogno da Dojo. È lì che mi è venuta l'idea di separare il livello della UI dalla logica per ogni modulo.

Qualcuno ha suggerimenti su come possono essere disaccoppiati?

    
posta Justin Chmura 22.01.2014 - 00:37
fonte

1 risposta

1

Mantieni i tuoi dati in HTML, i tuoi stili in CSS e le tue interazioni in JS.

Ciò significa che dovrai cambiare i ganci per lo styling, come classi o attributi per cambiare lo stato dell'interfaccia utente. In questo modo, quando desideri modificare l'aspetto dell'interfaccia utente, devi solo aggiornare i CSS e in generale evitare le modifiche allo script.

Ci saranno alcuni casi in cui potrebbe essere necessario animare uno stile tramite JS. In particolare per il posizionamento. Cerca di mantenere il JavaScript focalizzato sullo stato del codice, piuttosto che su come dovrebbe apparire. Quando vai al test unitario, ti darà qualcosa di concreto da controllare. OSSIA innescare manualmente un evento su un elemento in un widget e verificare che il widget abbia inserito lo stato appropriato da quell'evento verificando che abbia le giuste classi e i valori degli attributi.

    
risposta data 22.01.2014 - 05:58
fonte

Leggi altre domande sui tag