I'm building a small web application and it's starting to get a bit complex. I have reached to a point where I have to run some tests and load some libraries.
I made it so I can use it in this way:
this.loadDependencies([
{
test : tests.JSON,
polyfill : self.polyfills.json
},
{
test : tests.Storage,
polyfill : self.polyfills.storage
}], self.libraries);
The first argument, the array, it's just a series of tests and polyfil loading, the second argument it's where I load the libraries. This is how the self.libraries looks:
libraries: {
underscore: {
enabled: true,
library: [directory + 'libraries/underscore/underscore-1.4.2.js']
},
handlebars: {
enabled: true,
library: [directory + 'libraries/handlebars/handlebars-1.0.rc.1.js']
},
hammer: {
enabled: true,
library: [directory + 'libraries/hammer/hammer.js', directory + 'libraries/hammer/jquery.specialevent.hammer.js']
},
bootstrap: {
transition: {
enabled: true,
library: [directory + 'libraries/bootstrap/bootstrap-transition.js']
},
alert: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-alert.js']
},
modal: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-modal.js']
},
dropdown: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-dropdown.js']
},
scrollspy: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-scrollspy.js']
},
tab: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-tab.js']
},
tooltip: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-tooltip.js']
},
popover: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-popover.js']
},
button: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-button.js']
},
collapse: {
enabled: true,
library: [directory + 'libraries/bootstrap/bootstrap-collapse.js']
},
carousel: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-carousel.js']
},
typeahead: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-typeahead.js']
},
affix: {
enabled: false,
library: [directory + 'libraries/bootstrap/bootstrap-affix.js']
}
}
}
The loadDependencies function takes that object and runs on each level, checks if the enabled exists and if it's true it loads the library that is defined on the same level.
The function that does the above is what I want to improve a bit, so I'm looking for any advice or tips on how I could improve that code:
Application.Dependencies.prototype.loadLibraries = function(polyfills, libraries, callback) {
var self = this,
libs = self.helpers.objectSize(libraries),
iterations = [],
loaded = [];
self.helpers.each(libraries, function(object) {
if(object.hasOwnProperty('enabled') && object.enabled === true) {
for(var i = object.library.length - 1; i >= 0; i--) {
iterations.push(object.library[i]);
};
} else if(self.helpers.objectSize(object) >= 0) {
self.helpers.each(object, function(obj) {
if(obj.hasOwnProperty('enabled') && obj.enabled === true) {
for(var i = obj.library.length - 1; i >= 0; i--) {
iterations.push(obj.library[i]);
};
};
});
};
});
return self.helpers.each(libraries, function(object) {
if(object.hasOwnProperty('enabled') && object.enabled === true) {
self.loadEngine(false, {
tests: (typeof object.enabled === 'array') ? (object.enabled.length === 1 ? false : true) : true ? object.enabled : self.helpers.reduceArray(object.enabled, function(initial, current) {
return initial && current;
}, 1),
libraries: object.library,
callback: function(url, result, key) {
loaded.push(url);
if(loaded.length === self.helpers.objectSize(iterations)) {
self.console(function() {
console.log('Libraries : ', loaded);
self.polyfillize(polyfills, function() {
return(typeof callback === 'function' && callback !== undefined) ? callback.apply(this, [this]) : console.log('Argument : Invalid [ Function Required ]');
});
});
};
}
});
} else if(self.helpers.objectSize(object) >= 0) {
self.helpers.each(object, function(obj) {
if(obj.hasOwnProperty('enabled') && obj.enabled === true) {
return self.loadEngine(false, {
tests: (typeof obj.enabled === 'array') ? (obj.enabled.length === 1 ? false : true) : true ? obj.enabled : self.helpers.reduceArray(obj.enabled, function(initial, current) {
return initial && current;
}, 1),
libraries: obj.library,
callback: function(url, result, key) {
loaded.push(url);
if(loaded.length === self.helpers.objectSize(iterations)) {
self.console(function() {
console.log('Libraries : ', loaded);
self.polyfillize(polyfills, function() {
return(typeof callback === 'function' && callback !== undefined) ? callback.apply(this, [this]) : console.log('Argument : Invalid [ Function Required ]');
});
});
};
}
});
};
});
};
});
};
1 Answer 1
One of the javascript code conventions I like to follow is to start each function with declaring all variables used in the function. Even the ones used inside For loops. The scope of these is the function body, declaring variables like this just clarify scope.
Your code is fairly readable and clean. But you do have code duplication where you call loadEngine(), which you can eliminate.