たぼさんの部屋

いちょぼとのんびり

外部JS(分離したクラスファイル)をxhrで読み込む

point

xhrで読み込むときに同期処理でよみこむこと
responseText にクラス名を添付すること

具体的には

外部クラスファイル(Test.js)

var Test = function(){
    "use strict";
  this.name = "ぼくの名前はtestだよ";  
};
Test.prototype={
  getName:function(){
      "use strict";
      return this.name;
  }  
};

これを読み込む側は

Main.js

//eval test
var text ="var xx=1;xx";
var test = eval(text);
console.log(test);//1

var text2 = "var test = function(){return 'hoge'};test";
var test2 = eval(text2);
console.log(test2);
console.log(test2());//hoge

//Testクラスをインポートします。
var Test3 = this.importJs("Test.js","Test");
var test3 = new Test3();
console.log(test3.getName());//ぼくの名前はテストだよ

/**
 * スクリプトを同期処理のxhrでロードしてevalした関数として返す。
 */
importJs : function(url,funcName) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, false);
    //false指定で同期処理として実行します。

    xhr.responseType = "javascript";
    xhr.send();

    if (xhr.readyState === xhr.DONE) {
        console.log(xhr.responseText);
        //戻ってきたresponseTextに外部参照が可能になるようにfuncNmae:外部スクリプトのクラス名と同じものを付与する
        return eval(xhr.responseText+funcName);
        //+funcNameがキモ
    }

},