Comments on: MPR Preparation Part 2 http://www.delusionworld.com/mootools/mpr-preparation-part-2/ my MooTools, TYPO3 and FLOW3 experiences Sat, 10 Apr 2010 08:26:52 -0500 http://wordpress.org/?v=2.8.2 hourly 1 By: Greg Houston http://www.delusionworld.com/mootools/mpr-preparation-part-2/comment-page-1/#comment-37 Greg Houston Wed, 11 Mar 2009 20:25:57 +0000 http://www.delusionworld.com/?p=16#comment-37 Things become a bit more complicated however if the plugin being loaded on the fly also uses $require to load another plugin that it extends, and even more complicated if that plugin in turn needs to first load yet another plugin that it extends. Generally it is fine if the CSS loads after the plugin is ran, but in some cases the CSS needs to be loaded first such as when the plugin uses getStyle() or custom functions like getCSSRule(). So this would be yet another situation where a more complicated callback system would be required than the code above by itself. So in some cases it would be nice if there was an onload callback telling us ALL the required assets have been loaded. This lazy loader has a feature something along those lines, though I don't think it checks for nested dependencies: http://ajaxian.com/index.php?s=lazy+load&searchbutton=Go Things become a bit more complicated however if the plugin being loaded on the fly also uses $require to load another plugin that it extends, and even more complicated if that plugin in turn needs to first load yet another plugin that it extends.

Generally it is fine if the CSS loads after the plugin is ran, but in some cases the CSS needs to be loaded first such as when the plugin uses getStyle() or custom functions like getCSSRule(). So this would be yet another situation where a more complicated callback system would be required than the code above by itself.

So in some cases it would be nice if there was an onload callback telling us ALL the required assets have been loaded.

This lazy loader has a feature something along those lines, though I don’t think it checks for nested dependencies:
http://ajaxian.com/index.php?s=lazy+load&searchbutton=Go

]]> By: Greg Houston http://www.delusionworld.com/mootools/mpr-preparation-part-2/comment-page-1/#comment-36 Greg Houston Wed, 11 Mar 2009 18:45:07 +0000 http://www.delusionworld.com/?p=16#comment-36 I just started playing with MPR. A fun thing I discovered is if you add the onload argument to $require then you can set it up so that trying to run certain plugin methods will first load the plugin and then retry running the method along with whatever arguments were initially passed. The following goes in the core JavaScript file of "MyLibrary". If someone tries to use the tab plugin by running MyLibrary.initializeTabs(el) and the plugin has not been loaded yet, then the plugin is loaded. The plugin overwrites MyLibrary.initializeTabs, and then the function the user tried to run is ran again, passing their arguments right along. <code> var MyLibrary = new Hash({ // ... initializeTabs: function(arg){ $require(MyLibrary.options.path.source + 'Components/Tabs.js', function(){MyLibrary.initializeTabs(arg)}); }, // ... }); </code> The modified MPR code: <code> function $require(source, onload) { if ( MyLibrary.files[source] ) return true; // console.log('require ', source); MyLibrary.files[source] = 1; switch ( source.match(/\.\w+$/)[0] ) { case '.js': return Asset.js(source, {'onload': onload ? onload : $empty}); case '.css': return Asset.css(source); case '.jpg': case '.png': case '.gif': return Asset.image(source); } alert('The required file "' + source + '" could not be loaded'); } Asset.extend({ js: function(source, properties) { var a = new Request({ url: source, async: false, evalResponse: true, method: 'get' }).send(); return Asset.javascript(source, properties); } }); </code> Crosses fingers that code tags work. I just started playing with MPR. A fun thing I discovered is if you add the onload argument to $require then you can set it up so that trying to run certain plugin methods will first load the plugin and then retry running the method along with whatever arguments were initially passed.

The following goes in the core JavaScript file of “MyLibrary”. If someone tries to use the tab plugin by running MyLibrary.initializeTabs(el) and the plugin has not been loaded yet, then the plugin is loaded. The plugin overwrites MyLibrary.initializeTabs, and then the function the user tried to run is ran again, passing their arguments right along.


var MyLibrary = new Hash({

// ...

initializeTabs: function(arg){
$require(MyLibrary.options.path.source + 'Components/Tabs.js', function(){MyLibrary.initializeTabs(arg)});
},

// ...

});

The modified MPR code:

function $require(source, onload) {
if ( MyLibrary.files[source] ) return true;
// console.log('require ', source);
MyLibrary.files[source] = 1;

switch ( source.match(/\.\w+$/)[0] ) {
case '.js': return Asset.js(source, {'onload': onload ? onload : $empty});
case '.css': return Asset.css(source);
case '.jpg':
case '.png':
case '.gif': return Asset.image(source);
}

alert('The required file "' + source + '" could not be loaded');
}

Asset.extend({
js: function(source, properties) {
var a = new Request({ url: source, async: false, evalResponse: true, method: 'get' }).send();
return Asset.javascript(source, properties);
}
});

Crosses fingers that code tags work.

]]>