Carga tus scripts únicamente cuando tu vista lo requiera

Lo normal a la hora de cargar los scripts de javascript de tu proyecto suele ser colocar los «frameworks» base en el head y el resto de scripts justo antes de cerrar body, o lo que más se recomienda actualmente, poner todos justo antes de cerrar la etiqueta body, para que el sitio cargue más rápido. Si utilizas varios scripts pero quieres asegurarte que sólo se cargue su archivo js cuando exista un elemento en el DOM de la vista a la que se está accediendo, puedes hacerlo implícitamente en cada vista o en tu controller (depende cómo estés programando tu proyecto, siempre asumiendo que lo hagas bajo el patrón de diseño MVC), pero eso se convierte en una tarea tediosa y difícil de mantener en el tiempo.

La solución a la que llegué en un primer momento fue la de preguntar primero si el objeto existe en el DOM antes de ejecutar el código pertinente, pero claro, el archivo JS se cargaba en la memoria del cliente estuviera o no el elemento, y quería ir más allá. Voy a poner un ejemplo para que se me entienda mejor:

Supón que trabajas en un proyecto con jQuery, Fancybox y un date-picker. jQuery lo vas a utilizar prácticamente en todas las vistas, pero fancybox y date-picker sólo deberían cargarse en memoria y ejecutarse en las vistas que así lo requieran. Tenemos el archivo fancybox.min.js y datepicker,js que se deben cargar para que funcionen dichos componentes. Podemos hacer esto únicamente con Javascript, ahorrando un montón de requests a nuestro server.

El siguiente ejemplo comprueba si hay un elemento datepicker en el DOM, y si lo hay, carga el CSS y el JS y lo inicializa.

<script>
// Si hay un elemento en el DOM con la clase datepicker
if ($('.datepicker').length>0) {
css_url = '/bootstrap/addons/datepicker/css/bootstrap-datepicker.css';
js_url = '/bootstrap/addons/datepicker/js/bootstrap-datepicker.min.js';
// Append stylesheet links to document head
$('body').append('<link rel="stylesheet" href="'+libsURL+css_url+'" />');
// Load JS dinamically and initialize element if necessary
$.getScript(libsURL+js_url, function(){
// Init datepicker
$('.datepicker').datepicker({weekStart: 1,todayBtn:'linked',language:'es'});
});
}
</script>