Объявление каскадного объекта дает неопределенный типof из второго объекта на

Question

Я загружаю js-файлы динамически в свой проект, помещая их содержимое в тег сценария в голове. Каждый файл имеет только объект внутри. Я заметил, что после загрузки все объекты находятся в теге скрипта, но только первый не является неопределенным (порядок, в который я помещал контент, не меняет проблему, сначала объект, другие нет)

Это скрипт

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; 
    //}, 

}; 

Все файлы расслоение плотной же это два (изменение названия)

/* 
    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> 

Here a live example of the code

Answer 1

Существует большая разница между загрузкой и выполнением. Лучшее место для проверки всех объектов готово - это событие DOMContentLoaded.

Answer 2

Я бы использовал Javascript для загрузки всех основных модулей, но я перейду на JQuery. Проблема связана с методом xmlhttprequest плюс методом innerHtml. В первый раз браузер интерпретирует код внутри. С другой стороны, просто добавьте контент. Чтобы продолжить этот путь, было бы лучше создать элемент (скрипт) каждый раз и добавить его в голову

var elm = document.createElement('script'); 
elm.innerHtml = //content retrieved; 
document.head.appendChild(elm);