Hace poco estuve desarrollando un formulario de inscripción de usuarios para el sitio web de mi empresa, y hallé solución a un problema que si bien me había sucedido antes había solucionado más o menos guarramente pero que me tenía inquieto.
Como regla general cuando dentro de un sitio web queremos incluir un formulario nos encontramos con el problema de las dichosas funciones para validar en javascript y de que solemos tener hojas de estilo propias para maquetar estos formularios y que hay que incluirlas para que estos funcionen y tengan la apariencia que nosotros deseamos.
Para esto la solución obvia es cargarlos en la sección <HEAD> de nuestro documento mediante etiquetas <LINK />, <STYLE> y/o <SCRIPT>, el problema de esto es que al cargar cualquier módulo nos incluirá estos archivos .js y .css que ralentizarán en gran medida la carga de la página y que no se van a usar para nada.
Para esto y basándome en un diseño modular de la web, desarollé la siguiente solución de forma que sólo se carquen estos archivos cuando sean necesarios, o sea en aquellos módulos que los requieran y no en todos.
En primer lugar debemos modificar nuestra variable de configuración (por defecto la llamaré $conf), de la siguiente forma:
$conf['noticia'] = array(
'archivo' => 'noticia.php',
'title' => 'Las noticias más actuales',
'js' => array('javascript/validador.js','javascript/detallitos.js'),
'css' => 'formularios.php'
);
De esta forma asociaremos a cada módulo si lo necesitase sus hojas de estilos personalizadas y sus librerias de funciones javascript.
Para vincularlas crearíamos 2 funciones que serían una para los javascript y otra para los css (con un poco de paciencia se puede dejar en una que valga para los dos).
Estas funciones comprueban si es un archivo o varios y generan el código HTML necesario para vincularlos al documento. Estás funciones las podemos guardar en nuestra biblioteca de funciones php o donde cada uno quiera recordando simpre recuperarla al inicio.
// Incluye tantos archivos css como correspondan al módulo
function VinculaCss($css)
{
if(is_array($css)) {
foreach ($css as $k => $v) echo "<link rel='stylesheet' href='".$v."' media='screen' type='text/css' />\r\n";
}
else
echo "<link rel='stylesheet' href='".$css."' media='screen' type='text/css' />\r\n";
}
// Incluye tantos archivos javascript como correspondan al módulo
function VinculaJs($js)
{
if(is_array($js)) {
foreach ($js as $k => $v) echo "<script type='text/javascript' src='".$v."'></script>\r\n";
}
else
echo "<script type='text/javascript' src='".$js."'></script>\r\n";
}
Ya sólo nos quedaría añadir dentro de la sección <HEAD> un codigo parecido al siguiente:
<HEAD>
<title>Ejemplo de carga de archivos css y js dinamicamente</title>
<link rel="stylesheet" href="estilos.css" media="screen" type="text/css" />
<?
if(isset($conf[$modulo]['css'])) VinculaCss($conf[$modulo]['css']);
if(isset($conf[$modulo]['js'])) VinculaJs($conf[$modulo]['js']);
?>
</HEAD>
<BODY>
Mi documento
</BODY>
Espero que ayude si encontrais alguna mejora ya sabeis comentario al canto
Un saludo