在@ezmilhouse的指导下,我考虑了实现我想要的最佳方式,同时仍保持与我们旧代码的兼容性。
我的解决方案是设置我的yepnope脚本加载器以分层方式加载所有必要的脚本,基于它们各自的依赖关系。一旦所有脚本都加载完成,您可以使用我的yepnope调用的complete
属性来调用我的ready函数。这意味着文档已经准备好了,代码将没有任何问题。
我还将我的js移动到页面底部(这是我很久以前就应该做的事情,但我们有很多遗留页面! :))
这里是一个示例(仅使用错误的库/脚本名称进行说明):
yepnope({
test: baseLib.debug,
yep: { "max": "/version2/res/jquery/jquery-1.5.2.js" },
nope: { "min": "/version2/res/jquery/jquery-1.5.2.min.js" },
callback: {
"max": function (url, result, key) {
baseLib.Log("jQuery full loaded.");
},
"min": function (url, result, key) {
baseLib.Log("jQuery min loaded.");
}
},
complete: function () {
if (window.$) {
yepnope({
test: base.debug,
yep: {
"anotherscript": "script/url/here.js",
"anotherscript2": "script/url/here2.js"
},
nope: {
"anotherscript": "script/url/here-min.js",
"anotherscript2": "script/url/here2-min.js"
},
both: {
"anotherscript3": "script/url/here3.js"
},
callback: {
"anotherscript": function (url, result, key) {
baseLib.Log("anotherscript " + (result ? "Max" : "Min") + " loaded.");
},
"anotherscript2": function (url, result, key) {
baseLib.Log("anotherscript2 " + (result ? "Max" : "Min") + " loaded.");
},
"anotherscript3": function (url, result, key) {
baseLib.Log("anotherscript3 loaded.");
}
},
complete: function () {
baseLib.Log("Scripts Loaded");
baseLib.Page.Ready();
}
});
}
else {
baseLib.Log("Could not load jQuery. No further jQuery dependent files loaded.", "error");
}
}
});
在我的页面js中,我将把一个函数赋值给
baseLib.Page.Ready
,然后由yepnope在完成时调用。