努力写更好的javascript,哇哦!
第一步:Yuiloader依赖加载程序,这样我的所有自定义代码都可以在可靠的时间点上使用。
我当前的环境:
-
yui(2.8.1)库路径:c:\wamp\www\lib\js\yui\2\build\(http://localhost/lib/js/yui/2/build/)
-
以上位置的所有yui-min、debug和raw文件
-
自定义库路径:c:\wamp\www\lib\js\(http://localhost/lib/js/)
-
自定义模块“fln-min.js”位于上述位置
-
铬合金测试
笔记:
下面是我的HTML页面示例,我的自定义模块遵循HTML代码。现在还没有CSS或者其他什么时髦的东西,我只想让它作为概念的证明。如果运行我的代码,您将看到两个onSuccess事件都会触发,但在嵌套回调数据中为空,而我的自定义模块似乎不可用。我尝试过一些东西,比如路径连接,因此在第一个yuiloader实例中使用了“base”,在第二个yuiloader实例中使用了注释掉的第二个“fullpath”。
演示HTML页面:
<!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>
自定义模块(fln-min.js):
var FLN = function(){
var _debug = false ;
var _masterDebug = false ;
return {
loaded: function(){ return true; }
}
}();
alert('...');
