head.js es una libreria que nos permite cargar los js que necesitemos en cada pagina en el orden deseado y si necesitamos podemos después ejecutar una función, esta ultima opción es muy útil sobretodo cuando en esa funciona necesitamos datos los cuales se solicitaron en js anteriores.
El uso de head.js es muy sencillo veamos unos ejemplos:
// Cargamos y ejecutamos un solo script.
head.js("/path/to/file.js");
// Cargamos el archivo e inmediatamente mandamos un mensaje de que ya fue cargado
head.js("/path/to/file.js", function() {
alert(‘file.js Cargado!’);
});
// O bien podemos mandar llamar múltiples archivos
head.js("file1.js", "file2.js", ... "fileN.js");
// Similar al ejemplo anterior pero la funcion se ejecuta después de cargar los dos archivos
head.js("file1.js", "file2.js", function() {
});
// Otras formas
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");
head.js("file1.js").js("file1.js").js("file3.js");
// Se manda llamar al file2.js despues de cargar los archivos anteriores
head.ready("file2.js", function() {
});
Etiquetando Scripts
Podemos etiquetar los script para después hacer uso de las librerias mediante esta etiqueta.
// En este ejemplo la funcion se ejecutara una vez que se cargue el script jquery.tools.min
head.ready("tools", function() {
// setup Tooltips
$(".tip").tooltip();
});
// Cargamos nuestros script y los etiquetamos
head.js(
{jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"},
{tools: "http://cnd.jquerytools.org/1.2.5/tiny/jquery.tools.min"},
{heavy: "http://a.heavy.library/we/dont/want/to/wait/for.js"},
// label is optional
<a href="http://can.be.mixed/with/unlabeled/files.js">http://can.be.mixed/with/unlabeled/files.js</a>
);
No solo sirve para los JS, si no también para los css.
head.js(
"js/jquery/plugins.js"
,"js/jquery/plugins.css"
);
Repositorio oficial
Sitio oficial