Come combinare JavaScript esterno

April 29

Come combinare JavaScript esterno


JavaScript possono essere combinati per fare un caricamento delle pagine Web più veloce, riducendo le richieste di "http" e rendendo l'utilizzo della rete più efficiente. Le seguenti istruzioni sono costituiti da una pagina HTML principale chiamato "iceCream.html" che emette il prezzo di un oggetto utente selezionato. Esso utilizza tre Javascript esterni: "functions.js", "flavor.js" e "holder.js". Si dovrebbe avere una comprensione di JavaScript prima di tentare questo progetto.

istruzione

Impostazione del codice di esempio

1 Copiare e incollare il seguente codice in Blocco note, quindi salvarlo come "iceCream.html" sul desktop. Si noti che "style.css" non viene utilizzato, ma il suo legame è incluso qui come esempio.

<Html> <head>

< 'Style.css' link rel = "stylesheet" href = type = 'text / css'>

<Script>

var aFlavors = [ "Vanilla 1.00", "Chocolate 1,50", "Strawberry 1,70"];

var aHolders = [ "Single-cono 1", "doppio cono 2", "piatto 3"];

</ Script>

</ Head>

<Body>

<Div id = 'dvInfo'> Benvenuti alla Gelateria </ div>

< 'Text / javascript' script type = src = 'functions.js'> <script />

< 'Text / javascript' script type = src = 'flavor.js'> <script />

< 'Text / javascript' script type = src = 'holder.js'> <script />

</ Body> </ html>

2 Copiare e incollare il seguente codice in Blocco note, quindi salvarlo come "functions.js" sul desktop. Si noti che "loadSelect ()" la funzione carica un oggetto di selezione e "showPrice ()" funzione calcola e genera il prezzo della voce selezionata.

Funzione loadSelect (array, selObj) {

for (var i = 0; i <array.length; i ++) {

aLine=array[i].split(' ');

selObj [i + 1] = nuova opzione (aLine [0], aLine [1]);

}

}

Funzione showPrice () {

if ((slFlavor.value> 0) && (slHolder.value> 0)) {

price=slFlavor.value * slHolder.value;

var dvInfo = document.getElementById ( 'dvInfo');

dvInfo.innerHTML = slFlavor.options [slFlavor.selectedIndex] .text +

'A' + slHolder.options [slHolder.selectedIndex] .text +

'@ $' + Price.toFixed (2);

}

}

3 Copiare e incollare il seguente codice in Blocco note, quindi salvarlo come "flavor.js" sul desktop. Si noti che questo crea l'oggetto di selezione di gelato sapore, e popola dalla matrice "aFlavors" in "iceCream.html".

var oSlFlavor = document.createElement ( 'selezionare');

oSlFlavor.setAttribute ( 'id', 'slFlavor');

document.body.appendChild (oSlFlavor);

var slFlavor = document.getElementById ( 'slFlavor');

slFlavor [0] = nuova opzione ( 'Select sapore ...', '0');

var b1stFlavor = true;

slFlavor.onmouseover = function () {

if (b1stFlavor == true) {

b1stFlavor=false;

loadSelect (aFlavors, slFlavor);

}

}

slFlavor.onchange = function () {showPrice (); }

4 Copia e incolla il seguente codice nel blocco note. Salvarlo come "holder.js" sul desktop. Si noti che questo crea l'select ghiaccio oggetto titolare crema, e popola dalla matrice aHolders in "iceCream.html".

var oSlHolder = document.createElement ( 'selezionare');

oSlHolder.setAttribute ( 'id', 'slHolder');

document.body.appendChild (oSlHolder);

var slHolder = document.getElementById ( 'slHolder');

slHolder [0] = nuova opzione ( 'Select Holder ...', '0');

var b1stHolder = true;

slHolder.onmouseover = function () {

if (b1stHolder == true) {

b1stHolder=false;

loadSelect (aHolders, slHolder);

}

}

slHolder.onchange = function () {showPrice (); }

5 Aprire "iceCream.html" nel browser e testarlo. Vedere se è possibile identificare quelle parti del codice che sono richiesto al caricamento della pagina, e quelli che non sono necessari fino a dopo la pagina è stata caricata.

Combinando i tuoi JavaScript

6 Copiare le linee in "flavor.js" da "var oSlFlavor = document.createElement ( 'selezionare');" a

"SlFlavor [0] = nuova opzione ( 'Select sapore ...', '0');" e incollarlo in un nuovo file in Blocco note. Salvare il file "pageLoad.js" sul desktop.

7 Copiare le linee in "holder.js" da "var oSlHolder = document.createElement ( 'selezionare');" a "slHolder [0] = new Option ( 'Select Holder ...', '0');" e incolla questo in fondo "pageLoad.js". Salva "pageLoad.js".

8 Copiare le linee in "flavor.js" da "var b1stFlavor = true;" a "slFlavor.onchange = function () {showPrice ();}" e incollare questo in un nuovo file in Blocco note. Salvare il file "afterPageLoad.js" sul desktop.

9 Copiare le linee in "holder.js" da "var b1stHolder = true;" a "slHolder.onchange = function () {showPrice ();}" e incolla questo in fondo "afterPageLoad.js".

10 Copiare l'intero contenuto di "functions.js" e incollare questo in fondo "afterPageLoad.js".

11 Copia di file "iceCream.html" a "iceCream2.html". Apri "iceCream2.html" in Blocco note. Tagliare le due linee di matrice iniziano con "var aFlavors =" e "var =" aHolders, e incollarli nella parte superiore del "afterPageLoad.js". Salva "afterPageLoad.js".

12 Rimuovere la "<script>" e "</ script>" tag nella sezione head di "iceCream2" .html, quindi non c'è solo il "</ head>" tag di chiusura e "<body>" start tag tra i CSS collegamento e il corpo HTML. Questo accelera il caricamento della pagina.

13 Rimuovere le "<script>" link tag a "function.js", "flavor.js" e "holder.js" In "iceCream2.html". Aggiungere la seguente riga al di sopra del "</ body>" tag di chiusura. Salva "iceCream2.html".

< 'Text / javascript' script type = src = 'pageLoad.js'> <script />

Aggiungere codice evento di chiamare "afterPageLoad.js"

14 Copiare e incollare le righe sotto in fondo "pageLoad.js", quindi Salva "pageLoad.js". Si noti che questa funzione di evento comprende "afterPageLoad.js" dopo che la pagina è stata caricata.

document.onreadystatechange = function () {

if (document.readyState == "completare") {

var element=document.createElement('script');

element.src = 'afterPageLoad.js'; document.body.appendChild (elemento);

}

}

15 Apri "iceCream2.html" nel browser. Dovrebbe funzionare lo stesso come in "iceCream.html". Si noti che ora fa solo due "http" richieste: uno durante il caricamento della pagina e un altro dopo il caricamento della pagina. I tre JavaScript precedenti avrebbero potuto essere combinati tutto in un unico "pageLoad.js." Ma su una pagina ricca di contenuti, questo potrebbe ritardare il processo di rendering pagina.

16 Copiare e incollare il seguente codice nella parte inferiore della "functions.js". Salva "function.js".

startDt = new Date ();

document.onreadystatechange = function () {

endDt = new Date ();

alert ( 'Pagina tempo di caricamento:' + (endDt.getTime () - startDt.getTime ()) + ". millisecondi»);

}

17 Aggiungere la riga "startDt = new Date ();" sopra la linea funzione di evento "document.onreadystatechange", quindi le seguenti righe appena sopra la "document.onreadystatechange" End Function brace. Salva "pageLoad.js".

endDt = new Date ();

alert ( 'Pagina tempo di caricamento:' + (endDt.getTime () - startDt.getTime ()) + ". millisecondi»);

18 Run "iceCream.html" e "iceCream2.html" nel browser. Si noti la differenza in millisecondi tra le due pagine.

Consigli e avvertenze

  • Per ridurre il tempo di attesa dell'utente, pensare di cambiare "document.onreadystatechange = function () {" a "document.body.onmouseover = function () {" a "pageLoad.js". Questo assicura che i "afterPageLoad.js" non viene caricato solo dopo un utente effettua una prima risposta. Avrete bisogno di aggiungere funzionalità che mette alla prova e imposta una variabile booleana per garantire che il codice nella funzione viene chiamato una sola volta.