Trying to write better JavaScript, woohoo!
First step for me: YUILoader dependency loader so all of my custom code is available to use at a reliable point in time.
My current environment:
- YUI (2.8.1) library path: C:\wamp\www\lib\js\yui\2\build\ (http://localhost/lib/js/yui/2/build/)
- All YUI min, debug and raw files located in above location
- Custom library path: C:\wamp\www\lib\js\ (http://localhost/lib/js/)
- Custom Module ‘fln-min.js’ located in above location
- Testing in Chrome
Notes:
Below is my example HTML page, my custom module follows the HTML code. No CSS or anything funky yet, I just want to get this working as a proof of concept. If you run my code, you’ll see that both onSuccess events fire, but in the nested callback data is null, and my custom module seems to be unavailable. I’ve tried a few things, like the path concatenation, hence ‘base’ in the first YUILoader instance, and the commented out 2nd ‘fullpath’ in the 2nd YUILoader instance.
Demo HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External file Loader</title>
<script src="/lib/js/yui/2/build/yuiloader/yuiloader-min.js"></script>
<script>
new YAHOO.util.YUILoader({
base: '/lib/js/yui/2/build/',
require: ['yahoo-dom-event'],
// require: ['yahoo-dom-event','reset-fonts-grids','container'],
// allowRollup: true,
// combine: true,
onSuccess: function() {
alert('YAHOO: '+YAHOO);
var loader = new YAHOO.util.YUILoader();
//
loader.addModule({
name:'FLN',
// varName:'FLN',
type:'js',
fullpath:'/lib/js/fln-min.js'
// fullpath:'../../../fln-min.js'
});
loader.onSuccess = function(o) {
//
alert('o.data: '+YAHOO.lang.dump(o.data));
alert('FLN: '+FLN);
//
};
loader.onFailure = function(o) {
//
alert('Error: '+YAHOO.lang.dump(o));
//
};
loader.insert();
}
}).insert();
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
Custom module (fln-min.js):
var FLN = function(){
var _debug = false ;
var _masterDebug = false ;
return {
loaded: function(){ return true; }
}
}();
alert('...');
The correct answer was:
new Loader()#1’s config object was missing the custom module key nameFLNfrom itsrequiresarray.