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
