MPR Preparation Part 2
As I promised here is the script to use your MooTools Plugin Repository even more sufficient. It’s all about easy handling. I want to use all the Plugin I have without including a lot of script, css tags in my header. With this php code it’s really easy to do it.
First pls see the Screencast MPR Preparation Part 2.
Here you can see how I like to work – never write to much code. So by using autoload and the php file you don’t need to care about any javascript or css. Once you are done with your work – you can easily just save the content you get from the php script and upload it, so you don’t need to autocreate this on your server – just upload ONE javascript file and ONE css file and you it will contain all your plugins relevant code (except for the images :p).
My next plans:
- create a demo page where you can just write js/html/css code and don’t need to worry about file inclusion (a little playground)
- include a cache for the php script
- include a lot more plugins
- some other improvements for the script (find base tag, auto identify if the script is also used for css, …)
If you wanna try the things you have seen in the Screencast just download MPR.Preparation.Part2 extract it to a webserver (with php and curl) and look at the MPR.html.
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.
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