From f28b0316f4b5397ce204ccd17e6a30321866df3c Mon Sep 17 00:00:00 2001 From: Michael Teeuw Date: Thu, 31 Mar 2016 13:05:23 +0200 Subject: [PATCH] Improved module loader. --- js/loader.js | 152 +++++++++------------ js/module.js | 80 +++++++++-- modules/calendar/calendar.js | 2 +- modules/clock/clock.js | 2 +- modules/compliments/compliments.js | 2 +- modules/currentweather/currentweather.js | 2 +- modules/helloworld/helloworld.js | 2 +- modules/newsfeed/newsfeed.js | 4 +- modules/weatherforecast/weatherforecast.js | 2 +- 9 files changed, 138 insertions(+), 110 deletions(-) diff --git a/js/loader.js b/js/loader.js index 45129589..192a15bc 100644 --- a/js/loader.js +++ b/js/loader.js @@ -14,13 +14,10 @@ var Loader = (function() { /* Create helper valiables */ + var loadedModuleFiles = []; var loadedFiles = []; var moduleObjects = []; - var totalFiles = 0; - var moduleLoadCount = 0; - var fileLoadCount = 0; - /* Private Methods */ @@ -32,10 +29,19 @@ var Loader = (function() { var moduleData = getModuleData(); - for (var m in moduleData) { - var module = moduleData[m]; - loadModule(module); - } + var loadNextModule = function() { + if (moduleData.length > 0) { + var nextModule = moduleData[0]; + loadModule(nextModule, function() { + moduleData = moduleData.slice(1); + loadNextModule(); + }); + } else { + startModules(); + } + }; + + loadNextModule(); }; /* startModules() @@ -94,33 +100,28 @@ var Loader = (function() { /* loadModule(module) * Load modules via ajax request and create module objects. * + * argument callback function - Function called when done. * argument module object - Information about the module we want to load. */ - var loadModule = function(module) { - Log.log('Loading module: <' + module.name + '> from: ' + module.path + '/' + module.file); - + var loadModule = function(module, callback) { var url = module.path + '/' + module.file; - var moduleRequest = new XMLHttpRequest(); - moduleRequest.open("GET", url, true); - moduleRequest.onreadystatechange = function() { - if(this.readyState === 4) { - if(this.status === 200) { - // FIXME: - // Create the module by evaluating the response. - // This might not be the best way. - var ModuleDefinition = eval(this.response); - var moduleObject = new ModuleDefinition(); - - bootstrapModule(module, moduleObject); - moduleProcessed(); - } else { - Log.error("Could not load module: " + module.name); - moduleProcessed(); - } - } + var afterLoad = function() { + var moduleObject = Module.create(module.name); + bootstrapModule(module, moduleObject, function() { + callback(); + }); }; - moduleRequest.send(); + + if (loadedModuleFiles.indexOf(url) !== -1) { + afterLoad(); + } else { + loadFile(url, function() { + loadedModuleFiles.push(url); + afterLoad(); + }); + } + }; /* bootstrapModule(module, mObj) @@ -128,14 +129,21 @@ var Loader = (function() { * * argument module object - Information about the module we want to load. * argument mObj object - Modules instance. + * argument callback function - Function called when done. */ - var bootstrapModule = function(module, mObj) { + var bootstrapModule = function(module, mObj, callback) { Log.info('Bootstrapping module: ' + module.name); mObj.setData(module); - mObj.loadScripts(); - mObj.loadStyles(); + mObj.loadScripts(function() { + Log.log('Scripts loaded for: ' + module.name); + mObj.loadStyles(function(){ + Log.log('Styles loaded for: ' + module.name); + callback(); + }); + }); + moduleObjects.push(mObj); }; @@ -144,9 +152,9 @@ var Loader = (function() { * Load a script or stylesheet by adding it to the dom. * * argument fileName string - Path of the file we want to load. + * argument callback function - Function called when done. */ - var loadFile = function(fileName) { - totalFiles++; + var loadFile = function(fileName, callback) { var extension = fileName.slice((Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1); @@ -158,7 +166,7 @@ var Loader = (function() { script.type = "text/javascript"; script.src = fileName; script.onload = function() { - fileProcessed(); + if (typeof callback === 'function') {callback();} }; document.getElementsByTagName("body")[0].appendChild(script); @@ -172,7 +180,7 @@ var Loader = (function() { stylesheet.type = "text/css"; stylesheet.href = fileName; stylesheet.onload = function() { - fileProcessed(); + if (typeof callback === 'function') {callback();} }; document.getElementsByTagName("head")[0].appendChild(stylesheet); @@ -181,40 +189,6 @@ var Loader = (function() { }; - /* fileProcessed() - * Increase the fileLoadCount and check if we are ready to start all modules. - */ - var fileProcessed = function() { - fileLoadCount++; - prepareForStart(); - }; - - /* moduleProcessed() - * Increase the moduleLoadCount and check if we are ready to start all modules. - */ - var moduleProcessed = function() { - moduleLoadCount++; - prepareForStart(); - }; - - /* prepareForStart() - * Check if all files and modules are loaded. If so, start all modules. - */ - var prepareForStart = function() { - if (moduleLoadCount !== getAllModules().length) { - Log.log("Waiting for all modules to be loaded."); - return; - } - - if (fileLoadCount !== totalFiles) { - Log.log("Waiting for all files to be loaded."); - return; - } - - Log.info('Ready to start!'); - startModules(); - }; - /* Public Methods */ return { @@ -228,21 +202,24 @@ var Loader = (function() { /* loadFile() * Load a file (script or stylesheet). * Prevent double loading and search for files in the vendor folder. + * + * argument fileName string - Path of the file we want to load. + * argument module Module Object - the module that calls the loadFile function. + * argument callback function - Function called when done. */ - loadFile: function(fileName, module) { + loadFile: function(fileName, module, callback) { - if (fileName.indexOf(config.paths.modules + '/') === 0) { - // This is a module specific files. - // Load it and then return. - loadFile(fileName); + if (loadedFiles.indexOf(fileName.toLowerCase()) !== -1) { + Log.log('File already loaded: ' + fileName); + callback(); return; } - if (fileName.indexOf('/') !== -1) { - // This is an external file. - // External files will always be loaded. + if (fileName.indexOf('http://') === 0 || fileName.indexOf('https://') === 0 || fileName.indexOf('/') !== -1) { + // This is an absolute or relative path. // Load it and then return. - loadFile(fileName); + loadedFiles.push(fileName.toLowerCase()); + loadFile(fileName, callback); return; } @@ -250,19 +227,14 @@ var Loader = (function() { // This file is available in the vendor folder. // Load it from this vendor folder. loadedFiles.push(fileName.toLowerCase()); - loadFile(config.paths.vendor+'/'+vendor[fileName]); + loadFile(config.paths.vendor+'/'+vendor[fileName], callback); return; } - if (loadedFiles.indexOf(fileName.toLowerCase()) === -1) { - // File not loaded yet. - // Load it based on the module path. - loadedFiles.push(fileName.toLowerCase()); - loadFile(module.file(fileName)); - return; - } - - Log.log('File already loaded: ' + fileName); + // File not loaded yet. + // Load it based on the module path. + loadedFiles.push(fileName.toLowerCase()); + loadFile(module.file(fileName), callback); } }; diff --git a/js/module.js b/js/module.js index 34ae02e6..f77f288a 100644 --- a/js/module.js +++ b/js/module.js @@ -156,26 +156,50 @@ var Module = Class.extend({ /* loadStyles() * Load all required stylesheets by requesting the MM object to load the files. + * + * argument callback function - Function called when done. */ - loadStyles: function() { + loadStyles: function(callback) { + var self = this; var styles = this.getStyles(); - for (var s in styles) { - var style = styles[s]; - Loader.loadFile(style, this); - } + var loadNextStyle = function() { + if (styles.length > 0) { + var nextStyle = styles[0]; + Loader.loadFile(nextStyle, self, function() { + styles = styles.slice(1); + loadNextStyle(); + }); + } else { + callback(); + } + }; + + loadNextStyle(); }, /* loadScripts() * Load all required scripts by requesting the MM object to load the files. + * + * argument callback function - Function called when done. */ - loadScripts: function() { + loadScripts: function(callback) { + var self = this; var scripts = this.getScripts(); - for (var s in scripts) { - var script = scripts[s]; - Loader.loadFile(script, this); - } + var loadNextScript = function() { + if (scripts.length > 0) { + var nextScript = scripts[0]; + Loader.loadFile(nextScript, self, function() { + scripts = scripts.slice(1); + loadNextScript(); + }); + } else { + callback(); + } + }; + + loadNextScript(); }, /* updateDom(speed) @@ -208,6 +232,38 @@ var Module = Class.extend({ } }); -Module.create = function(moduleDefinition) { - return Module.extend(moduleDefinition); +Module.definitions = {}; + +Module.create = function(name) { + + //Define the clone method for later use. + function cloneObject(obj) { + if (obj === null || typeof obj !== 'object') { + return obj; + } + + var temp = obj.constructor(); // give temp the original obj's constructor + for (var key in obj) { + temp[key] = cloneObject(obj[key]); + } + + return temp; + } + + var moduleDefinition = Module.definitions[name]; + var clonedDefinition = cloneObject(moduleDefinition); + + // Note that we clone the definition. Otherwise the objects are shared, which gives problems. + var ModuleClass = Module.extend(clonedDefinition); + + return new ModuleClass(); + }; + +Module.register = function(name, moduleDefinition) { + Log.log('Module registered: ' + name); + Module.definitions[name] = moduleDefinition; +}; + + + diff --git a/modules/calendar/calendar.js b/modules/calendar/calendar.js index 373975d5..786b2aea 100644 --- a/modules/calendar/calendar.js +++ b/modules/calendar/calendar.js @@ -7,7 +7,7 @@ * MIT Licensed. */ -Module.create({ +Module.register('calendar',{ // Define module defaults defaults: { diff --git a/modules/clock/clock.js b/modules/clock/clock.js index f4ea72b6..df8ec2a5 100644 --- a/modules/clock/clock.js +++ b/modules/clock/clock.js @@ -7,7 +7,7 @@ * MIT Licensed. */ -Module.create({ +Module.register('clock',{ // Module config defaults. defaults: { diff --git a/modules/compliments/compliments.js b/modules/compliments/compliments.js index 3c9babba..865931cd 100644 --- a/modules/compliments/compliments.js +++ b/modules/compliments/compliments.js @@ -7,7 +7,7 @@ * MIT Licensed. */ -Module.create({ +Module.register('compliments',{ // Module config defaults. defaults: { diff --git a/modules/currentweather/currentweather.js b/modules/currentweather/currentweather.js index 1219a8d1..9c33a43b 100644 --- a/modules/currentweather/currentweather.js +++ b/modules/currentweather/currentweather.js @@ -7,7 +7,7 @@ * MIT Licensed. */ -Module.create({ +Module.register('currentweather',{ // Default module config. defaults: { diff --git a/modules/helloworld/helloworld.js b/modules/helloworld/helloworld.js index acd682fd..4b3af44e 100644 --- a/modules/helloworld/helloworld.js +++ b/modules/helloworld/helloworld.js @@ -7,7 +7,7 @@ * MIT Licensed. */ -Module.create({ +Module.register('helloworld',{ // Default module config. defaults: { diff --git a/modules/newsfeed/newsfeed.js b/modules/newsfeed/newsfeed.js index 7a37264a..e330665d 100644 --- a/modules/newsfeed/newsfeed.js +++ b/modules/newsfeed/newsfeed.js @@ -7,7 +7,7 @@ * MIT Licensed. */ -Module.create({ +Module.register('newsfeed',{ // Default module config. defaults: { @@ -35,6 +35,7 @@ Module.create({ this.activeItem = 0; this.fetchNews(); + }, // Override socket notification handler. @@ -53,7 +54,6 @@ Module.create({ // Override dom generator. getDom: function() { - var wrapper = document.createElement("div"); if (this.activeItem >= this.newsItems.length) { diff --git a/modules/weatherforecast/weatherforecast.js b/modules/weatherforecast/weatherforecast.js index f9f02867..7a1668c5 100644 --- a/modules/weatherforecast/weatherforecast.js +++ b/modules/weatherforecast/weatherforecast.js @@ -7,7 +7,7 @@ * MIT Licensed. */ -Module.create({ +Module.register('weatherforecast',{ // Default module config. defaults: {