[Tutorial]Introducción al nuevo ScriptLoader de ASP.NET AJAX Library
Hola!, yo de nuevo :), hoy quería hablar de un control de la libería de ajax de ASP.NET que se llama ScriptLoader, el cual en breves palabras nos va a servir para reducir la complejidad a la hora de cargar script y resolver sus dependencias. De hecho la librería Microsoft Ajax Client-Side está dividida en múltiples archivos Javascript, permintiéndonos el ScriptLoader descargar solo los que necesitemos.
Dentro de sus características principales podemos encontrar:
- Resolución Automática de dependencias
- Carga Perezosa (Lazy loading)
- Carga de Script convinados
- Carga de Script Personalizados
Veamos con un ejemplo cada Caso:
1) Resolución Automática de dependencias
Vamos a realizar con el siguiente código nuestro análisis:
<html>
<title>ScriptLoader Demo 1</title>
<head>
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js"
type="text/javascript"></script>
<script type="text/javascript">
//Habilitar debugging
Sys.Debug = true;
//Resolver Dependencias
Sys.require([Sys.scripts.DataContext]);
</script>
</head>
<body>
</body>
</html>
Como podemos ver la referencia hacia la librería que contiene al ScriptLoader src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js , luego utilizamos Sys.require para y especificamos el nombre del componente cliente (o un arreglo de componentes cliente) que queremos cargar. Este control descarga todos los script necesarios en paralelo , permitiendo que la carga sea más rápida que lo normal (normalmente no hay descarga de script en paralelo), evitando bloquear la pagina mientras se renderiza. Cuando están cargados todos los script, se llama al método Sys.onready.
Al ejecutar el ejemplo 1 vamos a ver lo siguiente cuando analicemos el tráfico con Firebug:
Como ves, se estan cargando los script y sus correspondientes dependencias y en paralelo :)
2) Carga Perezosa de Script
Como no todo hay que cargarlo siempre al inicio, ya que por algún motivo, es posible que debido a la lógica de nuestro front-end. Veamos el Script:
<html>
<title>ScriptLoader Demo 2</title>
<head>
<script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
type="text/javascript"></script>
<script type="text/javascript">
Sys.Debug = true;
//Carga Demorada
function doSomething() {
alert('Carga Demorada');
Sys.require([Sys.scripts.DataContext]);
};
</script>
</head>
<body>
<input type="button" onclick="doSomething()" value="ClickMe!" />
</body>
</html>
En este caso, al momento de presionar el botón, se van a cargar los archivos :), mostrando el mismo resultado que la foto tomada con FireBug anteriormente.
3) Carga de Script Combinados
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
type="text/javascript"></script>
<script type="text/javascript">
Sys.Debug = true;
//Carga normal
function cargaNormal() {
Sys.require([Sys.scripts.Core]);
Sys.require([Sys.scripts.ComponentModel]);
Sys.require([Sys.scripts.Network]);
Sys.require([Sys.scripts.Serialization]);
Sys.require([Sys.scripts.History]);
Sys.require([Sys.scripts.Globalization]);
Sys.require([Sys.scripts.WebServices]);
}; //Script Combinados
function cargaCombinado() {
Sys.require([
Sys.scripts.Core,
Sys.scripts.ComponentModel,
Sys.scripts.Network,
Sys.scripts.Serialization,
Sys.scripts.History,
Sys.scripts.Globalization,
Sys.scripts.WebServices
]);
};
</script>
</head>
<body>
<input type="button" onclick="cargaNormal()" value="cargaNormal" />
<br />
<input type="button" onclick="cargaCombinado()" value="cargaCombinado" />
</body>
</html> Podemos darnos cuenta de la diferencia de la sentencia, en el primer caso son Sys.require independientes , en el segundo caso, que sería el de Script Combinados es solo un Sys.require que recibe una colección de componentes clientes.
Veamos la diferencia con FireBug:
Opción carga normal:
Opción Scripts Combinados
En este caso hay una pequeña reducción de tiempo (medio segundo), la mayoría de este tiempo es parte de resolver al servidor y obtener los archivos individuales.
4) Carga de Script Personalizados
Muchas aplicaciones basadas en Ajax tienen comportamientos que no se ejecutan al iniciar la página, por lo que no es necesario cargar todos los script de la página en un inicio, solo cuando se necesita, evitando el retrazo del render hasta que se carguen todos los scripts.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ScriptLoader Demo CustomScript</title>
<script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
type="text/javascript"></script>
<script type="text/javascript">
function Saludar() {
Sys.loadScripts(["MyScripts/Script1.js",
"MyScripts/Script2.js",
"MyScripts/Script3.js"],
function () {
Saludo1();
Saludo2();
Saludo3();
});
}
</script>
</head>
<body>
<input type="button" onclick="Saludar()" value="Saludar" />
<br />
</body>
</html>
En este caso tengo 3 Script que tienen una función que se llama Saludo1, Saludo2 y Saludo3 respectivamente, por ejemplo el código del Script1
 |
function Saludo1() {
alert("Hola desde Script1.js!");
}
|
Ahora ejecutamos , presionamos el botón saludar y revisamos nuevamente en FireBug:
Existe la posiblidad tambien, que veremos más adelante, podemos especificar las dependecias de nuestros propios script, pero eso lo vamos a ver en otro post :)
Saludos!
Gonzalo