我正在开发AngularJS中的Web应用程序,因此我们有很多脚本标记。出于调试目的,我们希望所有这些都单独加载,但我们也使用纯HTML页面,因此我们没有ASP.net捆绑的奢侈等。
为了便于使用,我打算创建一个加载所有其他文件的JS文件,因此我们所有的开发人员只需要在页面上放置一个文件,他们就可以更新函数读取的主列表。
当我运行我的应用程序时,这在初始页面加载时效果很好,但是当我刷新页面时,一切都完全被破坏了。
我正在寻找一个解决此问题的方法,或者是一种更好的方法来加载我的脚本。
使用Javascript:
首先定义要加载的脚本:
var scripts = {
libs: [
"jquery/jquery-1.10.2.js",
"angularjs/angular.js",
"kendo/2014.2.716/kendo.all.min.js",
"d3/d3.js"
],
modules: [
"hiModule.js"
],
common: [
"Classes.js"
],
components: [
"contentArea/contentAreaCtrl.js",
"kendoGrid/kendoGridDir.js",
"kendoGrid/kendoGridCtrl.js",
"kendoGrid/kendoGridSvc.js",
"login/loginDir.js",
"login/loginCtrl.js",
"search/searchCtrl.js",
"search/searchDir.js",
"sidebar/sidebarDir.js"
],
services: [
"sessionTrackerSvc.js"
]
};
然后构建脚本URL并将它们添加到fileQueue:
function buildScriptUrls() {
var i;
for (var key in scripts) {
if (key) {
var fileUrl;
var arrayLength = scripts[key].length;
for (i = 0; i < arrayLength; ++i) {
if (key === "libs") {
fileUrl = "Scripts/libs/" + scripts[key][i];
} else if (key !== "modules") {
fileUrl = "Scripts/SPEnterprisePortal/" + key + "/" + scripts[key][i];
} else {
fileUrl = "Scripts/SPEnterprisePortal/" + scripts[key][i];
}
fileQueue.push(fileUrl);
}
}
}
}
最后,创建脚本并将所有脚本附加到页面。
function appendChild() {
if (counter > 0) {
counter -= 1;
var curFile = fileQueue[counter];
var jsFile = document.createElement("script");
jsFile.type = "text/javascript";
jsFile.src = curFile;
jsFile.onload = appendChild();
jsFile.onreadystatechange = function () {
if (this.readyState == "complete") {
appendChild();
}
}
document.body.appendChild(jsFile);
}
}
实际执行发生在脚本底部的IIFE中:
var fileQueue = [];
buildScriptUrls();
var counter = fileQueue.length;
appendChild();
您会注意到该函数从脚本列表的末尾开始,然后向后运行。这是因为我的函数调用的嵌套特性。创建了所有脚本,但每个appendChild()
函数调用自身,并且在加载之前不会将脚本附加到页面。因此,最后调用的脚本首先被添加到页面中,因此函数需要向后工作。
这是我自己的发明,所以我确定有更好的方法,但是现在我只想弄清楚为什么它在加载时工作正常,然后在页面刷新它就会中断! / p>
谢谢!