【JavaScript】 複数のモジュールを動的に順次読み込みしてみる

a.js

export function a(){ };

インポート先

import( "https://xxxx/a.js" ).then(
                module => {  // インポート成功
                      module.a();
                },
                error => {    // インポート失敗
                    console.log( error.message);
                }
            );

LoadModule：Promise.all版

function LoadModule2( r , callBack ){
    const promiseArray = r.map( e => import(e.url) ); // import()の配列を作成
    const module = {};

    Promise.all( promiseArray ).then(
        e =>  {    // 全て成功
            for( let i = 0; i < r.length ; i ++){
                Object.defineProperty( module ,r[i].name,{
                    value:e[i],
                    enumerable:true,
                });
            }
            callBack("ok",module);
        },
        e => callBack("error",e.message)  // 失敗あり
    );
}

LoadModule：Promise.all版使用例

const r = [
    {url:"https://xxxx/test1.js",name:"test1"},
    {url:"https://xxxx/test2.js",name:"test2"},
    {url:"https://xxxx/test3.js",name:"test3"},
];
let myModule;

LoadModule2( r , ( stat , value ) =>  {
    switch( stat ){
        case "ok":
            myModule = value;
            startfunc();
            break;
        case "error":
            console.log( value );
    }
});

function startfunc() {
    myModule.test2.func1();
}

LoadModule：並列読み込み版

function LoadModule( moduleDef  ,callBack ) {
            this.module = {};
            this.moduleDef  = moduleDef ;
            this.count = -1;
            this.callBack = callBack;
}
LoadModule.prototype={
            run:function () {
                // 2回目以降の呼び出しは無効
                return ( this.count !== -1 ) ?  false : this._allimport();
            },
            _allimport:function () {
                this.count ++;
                const callBack = this._callBack.bind(this);

                // importの配列を作成
                const promiseArray = this.moduleDef.map(
                    e=> this._import( e , callBack)
                );

                // 全てのimportの結果を受け取る
                Promise.all( promiseArray ).then(
                    e =>  {    // 全て成功
                        for( let i = 0; i < this.moduleDef.length ; i ++){
                            Object.defineProperty( this.module ,this.moduleDef[i].name,{
                                value:e[i],
                                enumerable:true,
                            });
                        }
                        this._callBack(4 , this.module );
                    },
                    e => this._callBack(3 )  // 失敗あり
                );
            },
            _import:( mD , callBack ) => {
                callBack(0 , mD);
                return import(mD.url).then(
                      module => { callBack(1 , mD);return module},
                      error => {callBack(2 , mD , error.message);
                              return Promise.reject(error);}
                  );
            },

            _stat:["start","fileok","filefaild","faildEnd","end","error"],
            _callBack:function (stat,mD=null,message=null) {
                this.callBack( { stat : this._stat[stat] , data : mD , message : message } );
            }
};

使用例

const r = [
    {url:"https://xxx/test1.js",name:"test1"},
    {url:"https://xxx/test2.js",name:"test2"},
    {url:"https://xxx/test3.js",name:"test3"},
];
let myModule; // モジュールを格納する変数

new LoadModule( r, (e)=>{
    switch(e.stat){
        case  "end":
            myModule = e.data; // 読み込んだモジュールをセット
            startfunc(); // 読み込み後に関数を実行
            break;
        case "filefaild":
            console.log( e.data.url + ":" + e.message);
            break;
        default:
            console.log( e.stat + ":" + ((e.data !== null) ? e.data.url : "---"));
    }

}).run();

function startfunc() {
    myModule.test2.func1();
}

LoadModule：順次読み込み版

function LoadModule( moduleDef ,callBack ) {
    this.module = {}; // 結果用オブジェクト
    this.moduleDef = moduleDef;
    this.count = -1;
    this.callBack = callBack;
}

LoadModule.prototype={
    run:function () {
        // 2回目以降の呼び出しは無効
        return ( this.count !== -1 ) ?  false : this._nextModule();
    },
    _nextModule:function () {
        this.count ++;
        if( this.count >= this.LoadData.length ) { // 終了チェック
            this._callBack(4 , this.module );
            return false;
        }
        const mD = this.moduleDef[this.count];
        this._callBack(0 , mD);
        import( mD.url ).then( // import開始
                Module => { // インポート成功
                    // 読み込んだモジュールを結果用オブジェクトに追加
                    Object.defineProperty( this.module , mD.name , {
                        value:Module,
                        enumerable:true,
                    });
                    this._callBack(1 , mD);
                    this._nextModule(); // 再帰呼び出し
                },
                error => { // 読み込み失敗
                    this._callBack(2 , mD , error.message);
                    this._callBack(3 );
                }
            );
    },
    _stat:["start","fileok","filefaild","faildEnd","end","error"],
    _callBack:function (stat,mD=null,message=null) {
        this.callBack( { stat : this._stat[stat] , data : mD , message : message } );
    }
};

使用例

const r = [
    {url:"https://xxx/test1.js",name:"test1"},
    {url:"https://xxx/test2.js",name:"test2"},
    {url:"https://xxx/test3.js",name:"test3"},
];
let myModule; // モジュールを格納する変数

new LoadModule( r, (e)=>{
    switch(e.stat){
        case  "end":
            myModule = e.data; // 読み込んだモジュールをセット
            startfunc(); // 読み込み後に関数を実行
            break;
        case "filefaild":
            console.log( e.data.url + ":" + e.message);
            break;
        default:
            console.log( e.stat + ":" + ((e.data !== null) ? e.data.url : "---"));
    }

}).run();

function startfunc() {
    myModule.test2.func1();
}