Buona strutturazione di JavaScript in un progetto?
-
27-09-2019 - |
Domanda
Quindi, sto abbastanza fatto con il JS nel mio sito ora. Essa implica jQuery (e come tale init .ready) La pagina ha due parti, la tomaia è principalmente Google Maps e minore è moduli di immissione.
Tutto questo è attualmente in una .js, funzioni, INIT, iterazioni, tutto. E 'bene struttura e tutto il resto, tutto è fatto correttamente.
La mia domanda è però: Che cosa è una buona struttura? Dovrei essere mettere la metà superiore in un unico file e il più basso in un altro? O devo mettere tutte le inizializzazioni necessarie sotto il .ready () e posizionare tutte le funzioni in un altro file? O devo tenere tutto in un file in continua crescita?
Soluzione
Dal punto di vista delle prestazioni, fornendo tutto il vostro JS in un unico file al browser come suggerito dalle altre risposte è ragionevole. Tuttavia, avendo il codice costruito in questo modo non è, ogni "classe" dovrebbe essere in un file separato, le cose frazionamento per entità e un file di controllo o due per gestire le chiamate di pagina effettivi - lo stesso come in qualsiasi altra lingua. Questi possono poi essere combinate in un unico file per condotta sia in anticipo, o dinamicamente -. Preferibilmente minimizzati
Altri suggerimenti
Mantenere le chiamate di script al minimo migliora il tempo di elaborazione - ogni script includono è un round-trip che aggiunge tempo. Così -. Preferenza personale, fintanto che non si preoccupano i tempi di caricamento delle pagine
Best Practices per accelerare inizia il vostro sito web via con Riduci a icona HTTP Le richieste :
80% del tempo di risposta dell'utente finale è trascorso sul front-end. La maggior parte di questo il tempo è legato a scaricare tutta la componenti nella pagina: immagini, fogli di stile, script, Flash, etc. Riducendo il numero di componenti sua volta riduce il numero di HTTP le richieste necessarie per il rendering della pagina. Questa è la chiave per le pagine più velocemente.
Un modo per ridurre il numero di componenti nella pagina è semplificare il design della pagina. Ma c'è un modo a pagine costruire con contenuti più ricchi ma anche di ottenere una risposta rapida volte? Qui ci sono alcune tecniche per riducendo il numero di richieste HTTP, pur sostenendo pagina ricchi disegni.
file combinati sono un modo per ridurre il numero di richieste HTTP combinando tutti gli script in un singolo script, e Allo stesso modo la combinazione di tutti i CSS in un singolo foglio di stile. La combinazione di file è più difficile quando gli script e fogli di stile variano da una pagina all'altra, ma facendo questa parte del suo rilascio processo migliora i tempi di risposta.
Personalmente, preferisco tenere tutto il codice in un unico file, in modo che il browser deve prendere solo un file e non due / tre / quattro / qualunque cosa.
Ma penso che sia fino a preferenze personali.