级联对象声明从第二个对象上给出未定义的 typeof [英] Cascading object declaration gives undefined typeof from second object on
本文介绍了级联对象声明从第二个对象上给出未定义的 typeof的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的项目中动态加载 js 文件，将它们的内容放在头部的脚本标签中.每个文件里面只有一个对象.我注意到加载后，所有对象都在脚本标签中，但只有第一个不是未定义的(我放置内容的顺序不会改变问题，第一个是一个对象，其他没有)
I load js files dynamically in my project putting their content in a script tag in the head. Each file has only an object inside. I noticed that after loading, all objects are in the script tag but only the first is not undefined (the order I put content doesn't change the problem, first is an object, others nope)
这是脚本
window.onload = function () {objMaster.end(objMaster.main());};
objMaster = {
// ---------- MAIN
main: function () {
// Setting up the environment
if (!this.set()) return 101;
// Loading core modules
if (!this.load('FrameBee/Core/1_Engineer.js', 'js')) return 201;
if (!this.load('FrameBee/Core/2_Manager.js', 'tmp_js')) return 202;
if (!this.load('FrameBee/Core/3_Lumberjack.js', 'tmp_js')) return 203;
if (!this.load('FrameBee/Core/4_Recruiter.js', 'tmp_js')) return 204;
if (!this.load('FrameBee/Core/5_Sage.js', 'tmp_js')) return 205;
if (!this.load('FrameBee/Core/6_Architect.js', 'tmp_js')) return 206;
if (!this.load('FrameBee/Core/7_Agent.js', 'tmp_js')) return 207;
// Checking core objects declaration
if (typeof objManager !== 'object') return 301;
if (typeof objLumberjack !== 'object') return 302;
if (typeof objRecruiter !== 'object') return 303;
if (typeof objSage !== 'object') return 304;
if (typeof objArchitect !== 'object') return 305;
if (typeof objAgent !== 'object') return 306;
return 1;
},
// ---------- ENDING MAIN
end: function (valIN) {
var strOUT = null;
// Setting up the error message if main() is not true
switch (valIN) {
// Environment
case 101:
strOUT = this.att.error.environment;
break;
// Loading core modules
case 201:
strOUT = 'Engineer' + this.att.error.unreachable;
break;
case 202:
strOUT = 'Manager' + this.att.error.unreachable;
break;
case 203:
strOUT = 'LumberJack' + this.att.error.unreachable;
break;
case 204:
strOUT = 'Recruiter' + this.att.error.unreachable;
break;
case 205:
strOUT = 'Sage' + this.att.error.unreachable;
break;
case 206:
strOUT = 'Architect' + this.att.error.unreachable;
break;
case 207:
strOUT = 'Agent' + this.att.error.unreachable;
break;
// Checking core objects
case 301:
strOUT = 'Manager' + this.att.error.undeclared;
break;
case 302:
strOUT = 'Lumberjack' + this.att.error.undeclared;
break;
case 303:
strOUT = 'Recruiter' + this.att.error.undeclared;
break;
case 304:
strOUT = 'Sage' + this.att.error.undeclared;
break;
case 305:
strOUT = 'Architect' + this.att.error.undeclared;
break;
case 306:
strOUT = 'Agent' + this.att.error.undeclared;
break;
}
// Showing error message only if main() is not true
if (strOUT !== null) document.body.innerHTML =
this.att.error.open +
strOUT +
this.att.error.close;
return 1;
},
// ---------- ATTRIBUTES
att: {
// Class identifier for removing temporary elements in the end
tmp_class: 'FrameBee_Temp',
// IDs of FrameBee head tag environment
id: {
style: 'FrameBee_Head_Style',
tmp_style: 'FrameBee_Head_Style_Temp',
script: 'FrameBee_Head_Script',
tmp_script: 'FrameBee_Head_Script_Temp',
},
// Error messages
error: {
// Enclousers
open: '<h1>FrameBee ERROR</h1><p>:: ',
close: '</p><hr><i>Application is halted</i>',
// Suffix
environment: 'Environment is not properly setted',
unreachable: ' core module is not reachable',
undeclared: ' object is not declared',
},
},
// ---------- METHODS
// .......... Set the HTML environment
set: function () {
var elmTMP = null;
// Adding style element
elmTMP = document.createElement('style');
elmTMP.setAttribute('id', this.att.id.style);
elmTMP.setAttribute('type', 'text/css');
elmTMP.setAttribute('rel', 'stylesheet');
document.head.appendChild(elmTMP);
// Adding temp style element
elmTMP = document.createElement('style');
elmTMP.setAttribute('id', this.att.id.tmp_style);
elmTMP.setAttribute('class', this.att.tmp_class);
elmTMP.setAttribute('type', 'text/css');
elmTMP.setAttribute('rel', 'stylesheet');
document.head.appendChild(elmTMP);
// Adding script element
elmTMP = document.createElement('script');
elmTMP.setAttribute('id', this.att.id.script);
elmTMP.setAttribute('type', 'text/javascript');
document.head.appendChild(elmTMP);
// Adding temp script element
elmTMP = document.createElement('script');
elmTMP.setAttribute('id', this.att.id.tmp_script);
elmTMP.setAttribute('class', this.att.tmp_class);
elmTMP.setAttribute('type', 'text/javascript');
document.head.appendChild(elmTMP);
// Checking the environment
if (
document.getElementById(this.att.id.style) === null ||
document.getElementById(this.att.id.tmp_style) === null ||
document.getElementById(this.att.id.script) === null ||
document.getElementById(this.att.id.tmp_script) === null
) return 0;
if (
document.getElementById(this.att.id.tmp_style).className.indexOf(this.att.tmp_class) < 0 ||
document.getElementById(this.att.id.tmp_script).className.indexOf(this.att.tmp_class) < 0
) return 0;
return 1;
},
// .......... [-] Get file content if file exists
get: function (pthIN) {
var reqTMP = new XMLHttpRequest();
reqTMP.open('GET', pthIN, false);
reqTMP.send(null);
if (reqTMP.status !== 200) return 0;
return reqTMP.response;
},
// .......... [-] Add content to head tags
add: function (txtIN, catIN) {
var attTMP = null;
switch (catIN) {
case 'css':
attTMP = this.att.id.style;
break;
case 'tmp_css':
attTMP = this.att.id.tmp_style;
break;
case 'js':
attTMP = this.att.id.script;
break;
case 'tmp_js':
attTMP = this.att.id.tmp_script;
break;
}
if (attTMP === null) return 0;
document.getElementById(attTMP).innerHTML += txtIN;
return 1;
},
// .......... [+] Load core module
load: function (pthIN, catIN) {
var valTMP = this.get(pthIN);
if (valTMP === 0) return 0;
if (this.add(valTMP, catIN) === 0) return 0;
return 1;
},
//// .......... Check if object is defined
//check: function (objIN) {
// if (typeof objIN !== 'object') return 0;
// return 1;
//},
};
这两个js文件都一样(改名了)
All js files are same this two (changing the name)
/*
FrameBee Framework version 0.2
THE MANAGER . Resources Manager
*/
objManager = {};
或者这个
/*
FrameBee Framework version 0.2
THE LUMBERJACK . Global logger
*/
objLumberjack = {};
这里是脚本标签结果
<script class="FrameBee_Temp" id="FrameBee_Head_Script_Temp" type="text/javascript">
/*
FrameBee Framework version 0.2
THE MANAGER . Resources Manager
*/
objManager = {};
/*
FrameBee Framework version 0.2
THE LUMBERJACK . Global logger
*/
objLumberjack = {};
/*
FrameBee Framework version 0.2
THE RECRUITER . Resources Loader
*/
objRecruiter = {};
/*
FrameBee Framework version 0.2
THE SAGE . Classes guard
*/
objSage = {};
/*
FrameBee Framework version 0.2
THE ARCHITECT . Style definition
*/
objArchitect = {};
/*
FrameBee Framework version 0.2
THE AGENT . Style applyer
*/
objAgent = {};
</script>
推荐答案
我将使用 Javascript 来加载所有核心模块，但我将更改为 JQuery.问题与xmlhttprequest方法加上innerHtml方法有关.第一次，浏览器解释里面的代码.从第二个开始，只需添加内容.要继续这种方式，最好每次都创建一个元素(脚本)并将其附加到头部
I would use Javascript to load all core modules but I will change to JQuery. The problem is related to the xmlhttprequest method plus the innerHtml method. First time, the browser interpret the code inside. From second on it just add the content. To continue on this way it would be better to create an element (script) each time and append it to the head
var elm = document.createElement('script');
elm.innerHtml = //content retrieved;
document.head.appendChild(elm);
这篇关于级联对象声明从第二个对象上给出未定义的 typeof的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
