È ancora importante mantenere i tag di script nel piè di pagina?

Question

È ancora importante mantenere i tag di script nel piè di pagina?

#1 da (3 voti)
#2 da (1 voti)

0

Lavorare in un'azienda che carica tutto il javascript alla fine del caricamento della pagina. Questo significa che non posso fare $(document).ready() sulla mia pagina, perché jquery non è caricato (gli script sono iniettati nel footer da qualche template o altro). Sono perplesso su come affrontare questo. Ho una pagina in cui voglio eseguire una funzione in uno script, ma lo script è caricato per ultimo. Se creo un caso per spostare lo script (i) in <head> , dovrò fare un argomento convincente per questo.

Ho esaminato il codice corrente e ogni pagina esegue una serie di metodi dopo che gli script sono stati dichiarati nel footer, che controllano ciascuno di essi sulla pagina pertinente e, in caso affermativo, eseguono. Quindi verrà eseguito ad esempio formatSearchResults() che controlla se siamo nella pagina SearchResults e in tal caso farà alcuni javascript, renderLoginPage() , setupProfilePage() ecc. Ecc. Ripeti questo uno per uno per ogni pagina che richiede javascript nella soluzione. Mi sembra una cattiva idea.

Storicamente posso forse capire perché, perché il download di tonnellate di script blocca il caricamento della pagina. Ma di questi tempi non riesco a capire perché questo sia un problema.

Gli script sono piccoli e caricano molto velocemente.
Una volta caricato lo script, non lo scarica di nuovo (a meno che non cambi) poiché il server chiede semplicemente al server web se il file è stato modificato.
Le librerie javascript complesse per la manipolazione della pagina come JQuery, ecc. non esistevano allora.
Le pagine sono molto più complesse al giorno d'oggi e javascript è generalmente utilizzato per il rendering e lo styling della pagina, piuttosto che essere qualcosa che aggiunge magia dietro le quinte alla fine.

Se devo mettere le chiamate per eseguire il mio codice desiderato nel footer, possibilmente tramite un meccanismo di callback complesso, in realtà gli script non vengono caricati nel footer e ho solo due corpi.

Mi chiedo se qualcuno potrebbe far luce su questo, e spiegare se sono mal guidato, mi manca qualcosa, se c'è dell'altro, ecc.

javascript

posta SLC 24.10.2017 - 11:49

fonte

2 risposte

Leggi altre domande sui tag javascript

La moltiplicazione non firmata e firmata (complemento a due) può essere eseguita sullo stesso hardware? [chiuso] Modifica la variabile da diverse librerie

score 3 · Answer 1

Puoi sempre usare l'equivalente javascript puro di $(document).ready(function(){}) che è document.addEventListener('DOMContentLoaded', function() {}) . In questo modo non devi mettere gli script nella sezione principale della pagina.

L'esecuzione di funzioni per ogni pagina anche se non è pertinente su quella pagina non è una buona pratica e forse dovresti pensare a separarle e caricare ogni funzione specifica nella pagina correlata.

score 1 · Answer 2

Per risolvere il problema immediato, sembra che i metodi siano stati aggiunti in modo arbitrario dopo il caricamento degli script, il che potrebbe essere ragionevole per uno o due metodi, ma se si vede che questo accade comunemente su ogni pagina, si dovrebbe adottare un altro approccio per astrarre il "quando".

Una buona tattica potrebbe essere semplicemente convertire le chiamate di funzione con un addEventListener che può essere posizionato ovunque nella pagina, non necessariamente dopo che gli script sono stati caricati. A questo punto, l'unica cosa che deve essere eseguita necessariamente dopo script carica è l'invio dell'evento per quell'evento. In sostanza, stai creando la tua versione di $(document).ready(function(){}) che funziona con il tuo codice esistente.

var event = new Event('scriptsLoaded');

// Listen for the event.
elem.addEventListener('scriptsLoaded', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

La soluzione a lungo termine dovrebbe ovviamente rimuovere la necessità di essere aggiunta dopo il caricamento della pagina. Se hai applicato la correzione sopra, allora questa modifica sarà semplice. Sposta il caricamento dello script nell'intestazione e chiama dispatchEvent per l'evento 'scriptsLoaded' te stesso in $(document).ready() . Anche se decidi di non fare la soluzione a lungo termine, imposta un precedente per aggiunte future e rende il tuo codice più flessibile.