Tecnología

Inicio

Cómo combinar archivos JavaScript externos

Cómo combinar archivos JavaScript externos


JavaScript se pueden combinar para hacer una carga de la página Web más rápido, reduciendo las solicitudes "http" y haciendo uso de la red más eficiente. Las siguientes instrucciones consisten en una página HTML principal llamado "iceCream.html" que emite el precio de un artículo seleccionado por el usuario. Utiliza tres archivos JavaScript externos: "functions.js", "flavor.js" y "holder.js". Usted debe tener una comprensión de JavaScript antes de realizar este proyecto.

Instrucciones

Configuración del Código Ejemplo

1 Copia y pega el código siguiente en el Bloc de notas, a continuación, guardarlo como "iceCream.html" en el escritorio. Tenga en cuenta que "style.css" no se usa, pero su relación se incluye aquí como un ejemplo.

<Html> <head>

< 'Style.css' link rel = '' de hojas de estilo href = type = "text / css">

<Script>

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

aHolders var = [ "Single-cono 1", "doble cono 2", "3 de platos"];

</ Script>

</ Head>

<Body>

<Div id = "dvInfo '> Bienvenido a la sala de helado </ div>

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

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

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

</ Body> </ html>

2 Copia y pega el código siguiente en el Bloc de notas, a continuación, guárdelo como "functions.js" en el escritorio. Tenga en cuenta que "loadSelect ()" función carga un objeto de seleccionar y "showPrice ()" función calcula y muestra el precio del artículo seleccionado.

función loadSelect (array, selObj) {

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

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

selObj [i + 1] = new Opción (Aline [0], Aline [1]);

}

}

showPrice función () {

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

price=slFlavor.value * slHolder.value;

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

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

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

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

}

}

3 Copia y pega el código siguiente en el Bloc de notas, a continuación, guárdelo como "flavor.js" en el escritorio. Tenga en cuenta que esto crea la elija objeto helado sabor, y lo llena de la matriz "aFlavors" en "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 ( 'Select Sabor ...', '0');

var b1stFlavor = true;

slFlavor.onmouseover = function () {

si (b1stFlavor == true) {

b1stFlavor=false;

loadSelect (aFlavors, slFlavor);

}

}

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

4 Copia y pega el código siguiente en el Bloc de notas. Guardarlo como "holder.js" en el escritorio. Tenga en cuenta que esto crea la elija objeto hielo titular de crema, y ​​lo llena de la matriz 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 ( 'Seleccionar Holder ...', '0');

var b1stHolder = true;

slHolder.onmouseover = function () {

si (b1stHolder == true) {

b1stHolder=false;

loadSelect (aHolders, slHolder);

}

}

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

5 Abrir "iceCream.html" en su navegador y probarlo. Ver si se puede identificar aquellas partes del código que se requiere en la carga de la página, y aquellos que no son necesarios hasta que la página se ha cargado.

Combinando sus archivos JavaScript

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

"SlFlavor [0] = nueva opción ( 'Select Sabor ...', '0');" y pega esto en un nuevo archivo en el Bloc de notas. Guarde el archivo en "pageLoad.js" en el escritorio.

7 Copiar las líneas en "holder.js" de "var = oSlHolder document.createElement ( 'select');" a "slHolder [0] = new Opción ( 'Seleccionar Holder ...', '0');" y pega este en la parte inferior de la "pageLoad.js". Guardar "pageLoad.js".

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

9 Copiar las líneas en "holder.js" de "var b1stHolder = true;" a "slHolder.onchange = function () {showPrice ();}" y pega este en la parte inferior de la "afterPageLoad.js".

10 Copiar todo el contenido de la "functions.js" y pega este en la parte inferior de la "afterPageLoad.js".

11 copia de archivos "iceCream.html" a "iceCream2.html". Abrir "iceCream2.html" en el Bloc de notas. Cortar las dos líneas de la matriz que empiezan por "aFlavors var =" y "aHolders var =", y pegarlas en la parte superior de la "afterPageLoad.js". Guardar "afterPageLoad.js".

12 Retire el "<script>" y "</ script>" etiquetas en la sección de cabecera del .html "iceCream2", por lo que no hay más que la etiqueta "</ head>" etiqueta de cierre y "<body>" se inicia entre la CSS enlace y el cuerpo hTML. Esto acelera la carga de las páginas.

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

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

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

14 Copiar y pegar las líneas de abajo en la parte inferior de la "pageLoad.js," Guardar "y luego" pageLoad.js. Tenga en cuenta que esta función evento incluye "afterPageLoad.js" después de que la página se ha cargado.

document.onreadystatechange = function () {

si (== document.readyState "completo") {

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

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

}

}

15 Abrir "iceCream2.html" en su navegador. Se debe trabajar el mismo que en "iceCream.html". Tenga en cuenta que ahora hace sólo dos "http" solicitudes: uno durante la carga de la página y otra después de carga de la página. Los tres archivos JavaScript anteriores podrían haber sido combinados en un único conjunto "pageLoad.js." Pero en una página de contenido rico, esto podría retrasar el proceso de renderización de páginas.

dieciséis Copia y pega el siguiente código en la parte inferior de la "functions.js". Guardar "function.js".

startDt = new Date ();

document.onreadystatechange = function () {

endDt = new Date ();

alert ( 'el tiempo de carga:' + (endDt.getTime () - startDt.getTime ()) + '. milisegundos');

}

17 Agregue la línea "startDt = new Date ();" por encima de la línea de la función de eventos "document.onreadystatechange", a continuación, las siguientes líneas justo por encima de la "document.onreadystatechange" corsé finales función. Guardar "pageLoad.js".

endDt = new Date ();

alert ( 'el tiempo de carga:' + (endDt.getTime () - startDt.getTime ()) + '. milisegundos');

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

Consejos y advertencias

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