Carga de librerias JS - Gestionar dependencias correctamente
December 19, 07 by TomcaskVia anieto2k , descubre una manera muy sencilla de gestionar las dependencias de las diferentes librerias js de un proyecto web.
Corto y pego del blog de anieto para poder tenerlo guardadito aquí.
En el artículo nos muestra un ejemplo de como podría ser una gestión de componentes para nuestra aplicación javascript.
var myAwesomeApp = {
components :{
formcheck:{
url:'formcheck.js',
loaded:false
},
dynamicnav:{
url:'dynamicnav.js',
loaded:false
},
gallery:{
url:'gallery.js',
loaded:false
},
lightbox:{
url:'lightbox.js',
loaded:false
}
},
addComponent:function(component){
var c = this.components[component];
if(c && c.loaded === false){
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src',c.url);
document.getElementsByTagName('head')[0].appendChild(s);
}
},
componentAvailable:function(component){
this.components[component].loaded = true;
if(this.listener){
this.listener(component);
};
}
};
Esta posibilidad además de permitirnos gestionar las dependecias de nuestra aplicación nos permite llevar un mayor control de la aplicación que estamos desarrollando. En caso de necesitar añadir dependencias podríamos usar la siguiente forma que nos evitará tener que tocar el código ya escrito.
myAwesomeApp.listener = function(component){
if(component === ‘bespokecomponent’){
myAwesomeApp.addComponent(’bespokelabels’);
};
if(component === ‘bespokelabels’){
myAwesomeApp.addComponent(’bespokedata’);
};
if(component === ‘bespokedata’){
myAwesomeApp,bespokecomponent.init();
};
};
myAwesomeApp.components.bespokecomponent = {
url:’bespoke.js’,
loaded:false
};
myAwesomeApp.components.bespokelabels = {
url:’bespokelabels.js’,
loaded:false
};
myAwesomeApp.components.bespokedata = {
url:’bespokedata.js’,
loaded:false
};
myAwesomeApp.addComponent(’bespokecomponent’);
Insisto en hacer referencia a su autor anieto2k .
