ubiquitour.com

Cómo combinar archivos JavaScript externo

Cómo combinar archivos JavaScript externo

JavaScript se puede combinar para hacer una página Web carga más rápido, reduciendo el "http" peticiones y haciendo uso de la red más eficiente. Las instrucciones consisten en una página HTML principal llamada "iceCream.html" que el precio de un producto seleccionado por el usuario. Utiliza tres archivos JavaScript externo: "functions.js", "flavor.js" y "holder.js". Usted debe tener una comprensión de JavaScript antes de intentar este proyecto.

Instrucciones

Configurar el código de ejemplo

1 Copiar y pegar el código siguiente en Bloc de notas y guardarlo como "iceCream.html" en el escritorio. Nota que "style.css" no se utiliza, pero su vínculo se incluye aquí como un ejemplo.

< html >< cabeza >

< link rel = tipo de 'stylesheet' href='style.css = ' text/css' >

< script >

var aFlavors = ["vainilla 1,00", "Chocolate 1.50", "fresa 1,70"];

var aHolders = ["solo cono 1", "doble cono 2", "Plato 3"];

< /script >

< /HEAD >

< cuerpo >

< div id = 'dvInfo' > ¡ Bienvenido a la heladería < / div >

< script tipo = 'texto javascript' src='functions.js' >< / script >

< script tipo = 'texto javascript' src='flavor.js' >< / script >

< script tipo = 'texto javascript' src='holder.js' >< / script >

< cuerpo / >< / html >

2 Copiar y pegar el código siguiente en Bloc de notas y guardarlo como "functions.js" en su escritorio. Tenga en cuenta que la función "loadSelect()" carga un objeto select y la función "showPrice()" calcula y salidas el precio del elemento seleccionado.

función loadSelect (matriz, selObj) {}

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

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

selObj[i+1]=new Option(aLine[0], aLine[1]);

}

}

función showPrice() {}

Si ((slFlavor.value>0) & &(slHolder.value>0)) {}

price=slFlavor.value * slHolder.value;

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

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

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

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

}

}

3 Copiar y pegar el código siguiente en Bloc de notas y guardarlo como "flavor.js" en el escritorio. Observe que esto crea el objeto select de sabor de helado y rellena de la matriz de "aFlavors" "iceCream.html".

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

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

document.body.appendChild(oSlFlavor);

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

slFlavor [0] = nueva opción ('Seleccione sabor...', '0');

var b1stFlavor = true;

{slFlavor.onmouseover=function()}

Si (b1stFlavor == true) {}

b1stFlavor=false;

loadSelect(aFlavors, slFlavor);

}

}

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

4 Copie y pegue el código siguiente en Bloc de notas. Guárdelo como "holder.js" en el escritorio. Observe que esto crea el objeto select de titular de helado y rellena de la matriz de aHolders en "iceCream.html".

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

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

document.body.appendChild(oSlHolder);

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

slHolder [0] = nueva opción ('Seleccione titular...', '0');

var b1stHolder = true;

{slHolder.onmouseover=function()}

Si (b1stHolder == true) {}

b1stHolder=false;

loadSelect(aHolders, slHolder);

}

}

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

5 Abrir "iceCream.html" en tu navegador y prueba. Vea si puede identificar las partes del código que se requiere en la carga de la página y aquellos que no son necesarios hasta después de que la página se ha cargado.

Combina tus JavaScripts

6 Copia las líneas en "flavor.js" de "var oSlFlavor=document.createElement('select');" para

«slFlavor [0] = nueva opción ('Seleccione sabor...', '0'); "y pega esto en un nuevo archivo en Bloc de notas. Guarde el archivo a "pageLoad.js" en el escritorio.

7 Copia las líneas en "holder.js" de "var oSlHolder=document.createElement('select');" a "slHolder [0] = nueva opción ('Select titular...', '0');" y pegar esto en el fondo de "pageLoad.js". Guardar el "pageLoad.js".

8 Copia las líneas en "flavor.js" de "var b1stFlavor = true;" a "slFlavor.onchange=function() {showPrice();}" y pega esto en un nuevo archivo en Bloc de notas. Guarde el archivo a "afterPageLoad.js" en el escritorio.

9 Copia las líneas en "holder.js" de "var b1stHolder = true;" a "slHolder.onchange=function() {showPrice();}" y pegar esto en el fondo de "afterPageLoad.js".

10 Copiar todo el contenido de "functions.js" y pega esto en el fondo de "afterPageLoad.js".

11 Presentar copia "iceCream.html" a "iceCream2.html". Abrir "iceCream2.html" en el Bloc de notas. Cortar las líneas de dos matriz a partir de "var aFlavors =" y "var aHolders =" y pegarlos en la parte superior de "afterPageLoad.js". Guardar el "afterPageLoad.js".

12 Quitar el "< script >" y etiquetas "< /script >" en la sección head del HTML "iceCream2", tan allí no es sólo el final "< / cabeza >" etiqueta y "< body >" inician etiqueta entre el enlace CSS y el cuerpo del html. Esto acelera la carga de las páginas.

13 Quitar los enlaces de etiqueta "< script >" "function.js", "flavor.js" y "holder.js" en "iceCream2.html". Agregue la siguiente línea por encima de la etiqueta "< /body >" del final. Guardar el "iceCream2.html".

< script tipo = ''texto javascript' src='pageLoad.js >< / script >

Añadir código de evento para llamar a "afterPageLoad.js"

14 Copiar y pegar las líneas siguientes en la parte inferior de "pageLoad.js" y guardar "pageLoad.js". Note que esta función de evento incluye "afterPageLoad.js" después de que la página se ha cargado.

{Document.onreadystatechange=function()}

Si (document.readyState=="complete") {}

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

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

}

}

15 Abrir "iceCream2.html" en su navegador. Debería funcionar igual que en "iceCream.html". Tenga en cuenta que ahora hace solo dos peticiones de "http": uno durante la carga de la página y otra después de la carga de la página. Lo tres archivos JavaScript anterior podría se han combinado en conjunto en un solo "pageLoad.js." Pero en una página rica en contenido, esto podría retrasar el proceso de renderizado de la página.

16 Copie y pegue el código siguiente en la parte inferior de "functions.js". Guardar "function.js".

startDt = new Date ();

{Document.onreadystatechange=function()}

endDt = new Date ();

ALERT (' tiempo de carga de página: ' + (endDt.getTime() - startDt.getTime()) + 'milisegundos.');

}

17 Agregue la línea "startDt = new Date ();" por encima de la línea de la función del evento "document.onreadystatechange", entonces las siguientes líneas justo por encima de la función "document.onreadystatechange" fin apoyo. Guardar el "pageLoad.js".

endDt = new Date ();

ALERT (' tiempo de carga de página: ' + (endDt.getTime() - startDt.getTime()) + 'milisegundos.');

18 Ejecutar "iceCream.html" y "iceCream2.html" en su navegador. Observe la diferencia en milisegundos entre dos páginas.

Consejos y advertencias

  • Para reducir el tiempo de espera de usuario, considere cambiar "document.onreadystatechange=function() {" a "document.body.onmouseover=function() {" en "pageLoad.js". Esto asegura que el "afterPageLoad.js" no se carga hasta después de que un usuario realiza una primera respuesta. Usted necesitará agregar funcionalidad que pruebas y establece una variable booleana para asegurar que el código de la función se llama sólo una vez.