¿Cuantas funciones js hay en total en nuestro sitio web?
Conforme va creciendo nuestro sitio, necesitamos incluir funciones que normalmente solo serán utilizadas en un documento, y tenemos la tendencia de incluir el script en el propio documento o enlazarlo y meterlo en una carpeta con un gran número de archivos “js”.
El problema viene cuando queremos modificar algunas funciones y estas son compartidas en otros documentos.
Un método para tener controladas todas las funciones y en que documento se ejecutan es la mejor solución, todo en un único archivo, pero con la mejora de que solo se carguen las funciones en función de la url a la que que estamos accediendo, de esta forma evitamos tambien problemas al modificar archivos “js” que utilizan varios documentos.
Los archivos que necesitamos
Comenzamos creando tres documentos HTML, en ambos incluiremos un cdn para obtener la libreria jQuery e incluiremos un script para enlazar un archivo “funciones.js”, el contenido es el mismo para los tres archivos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="funciones.js"></script>
</head>
<body>
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
<div id="demo4"></div>
</body>
</html>Guardamos los archivos en una carpeta con los nombres: pagina1.html, pagina2.html y ventas.html
El archivo funciones.js
Ahora crearemos el archivo “js”, realmente es muy sencillo, en primer lugar creamos un contenedor para almacenar en una variable las rutas que recibiremos por un parametro.
El contenedor es un objeto en el que incluiremos identificadores, si quereis profundizar en el tema, os aconsejo leer más acerca de los inicializadores de objeto y los identificadores en el articulo Trabajando con objetos y en JavaScript orientado a objetos de Mozilla.
var act = {
rut : {},
pag : function(url, fun){
this.rut[url] = fun;
},
lan : function(){
jQuery.each(this.rut, function(par){
if(location.href.match(par)){
this();
}
});
}
}A continuación tenemos que escribir el código que hará que se ejecute cada función en la pagina correspondiente, para ello utilizaremos la siguiente sintaxis:
act.pag('PAGINA_EN_LA_QUE_SE_EJECUTA_LA_FUNCION', function(){
... codigo a ejecutar
});Para no hacer el ejemplo demasiado largo vamos a incluir un método sencillo en la función de cada una de las páginas en las que queremos ejecutar algo, utilizaremos el método “text()” para mostrar un string en cada uno de los contenedores de la página a que pagina pertenecen.
// Código que se ejecuta en la página "pagina1.html"
act.pag('pagina1.html', function(){
$(function(){
$('#demo1').text ('Pagina 1');
});
});
// Código que se ejecuta en la página "pagina2.html"
act.pag('pagina2.html', function(){
$(function(){
$('#demo1').text ('Pagina 2');
});
});
// Código que se ejecuta en la página "ventas.html"
act.pag('ventas.html', function(){
$(function(){
$('#demo1').text ('Pagina ventas');
});
});
act.lan(); Si visualizamos el resultado que muestra el div “demo1” en el navegador podemos ver que es el siguiente:
pagina1.html = Pagina 1
pagina2.html = Pagina 2
ventas.html = Pagina ventas
Compartir funciones en distintos documentos
Ahora ya tenemos un código más eficiente, que solamente nos lanzará en cada página la función que se le ha asignado a la misma, vamos a mejorarlo e incrementar su potencial, si necesitamos compartir funciones en distintas páginas, podemos trabajar con expresiones regulares para incluir determinadas páginas, por ejemplo, tenemos pagina1.html, pagina2.html y ventas.html, asignaremos una función a todos los archivos que contengan la cadena pagina como nombre de archivo:
// Código que se ejecuta en las páginas "pagina1.html" y "pagina2.html"
act.pag('.*pagina', function(){
$(function(){
$("#demo2").text("Pagina 1 y Pagina 2");
});
});Si visualizamos el archivo vemos que solamente en pagina1.html y en pagina2.html se ejecuta el código en el contenedor “demo2”, en la página ventas.html no se ejecuta porque su nombre de archivo no contiene la cadena “pagina”.
El uso de las expresiones regulares nos aporta un mayor control sobre el programa, ya que en este contexto podemos generar expresiones para buscar en los archivos nombres o cadenas completas, por ejemplo, si queremos ejecutar para el div “demo3” una orden en dos paginas concretas usaremos la siguiente expresión regular:
// Código que se ejecuta en las páginas "pagina1.html" y "ventas.html"
act.pag('.pagina1|ventas', function(){
$(function(){
$("#demo3").text("Pagina 1 y ventas");
});
}); El código anterior se ejecutará únicamente en pagina1.html y en ventas.html, aunque podríamos haber sido más específicos y haber incluido la expresión regular de esta forma:
pagina1.html|ventas.html
Ejecutar una función en todos los documentos
Si queremos crear una función para todos los documentos de nuestro sitio, podemos hacerlo con el carácter (*), por ejemplo haciendo referencia a la extensión de los archivos:
// Código que se ejecuta en todas las paginas
act.pag('.*.html', function(){
$(function(){
$("#demo4").text("Todos los archivos con extension \".html\"");
});
});En definitiva es un método muy potente para controlar todas las funciones de nuestro sitio en un único archivo y manejar en que documentos se ejecutan las mismas, como la mayoría de los artículos que publico he subido un repositorio público a Github desde donde podéis descargar todos los archivos, cualquier mejora en el código la podéis reportar desde Github o enviando un mensaje accediendo al formulario de contacto de esta página.
Github: Repositorio Ejecutar jquery en función de la URL
Espero que el articulo os haya sido de interés.
Edwin G. 3 junio, 2021
Excelente, muchas gracias.
Andrés Sanz 6 enero, 2021
¡Este material es excelente! Voy a usar esto para crear mi web mediante bloques.
Estoy cargando cada bloque, y estoy pensando en que tengan cada uno su propio html, css y js, y así tengo la web muy estructurada y puedo atacar cualquier cosa por separado y no encontrarme con js y css inmeeensos.
¿Qué te parece la idea?
Mil gracias por tan buen aporte, sigue así 😉
mikevzla 17 julio, 2020
interesante … como lo haria sin la libreria jquery