ワイズリマインダー

JavaScriptでモジュール化してみた

2021.09.17

JavaScriptのファイルが500行を超えてきて
見るのすら嫌になってきたのでモジュール化してみた。

今回重要視したのはこれ

• HTMLのHEADで読み込むのではなく、JavaScript内で外部ファイルを指定したい
• 後から読み込んだJavaScriptが全て読み込まれるまで待ってから処理したい
• 即時関数を使用してローカルスコープにする

 

本来なら匿名関数に放りこんでいるが、今回は変数に代入した

/************************************************************
 * 外部JavaScriptを非同期に読み込む
 * すべてのファイルを読み込み終えてからCALLBACKが実行される
 *
 *	使い方
 *		_import(URLS, CALLBACK);
 *
 *	パラメーター
 *		URLS
 *			（文字列）｜（配列）外部JavaScriptのパス
 *		CALLBACK
 *			（関数）読み込んだJavaScript
 *			URLSが複数の場合、配列で返ってくる
 *
 *************************************************************/
let _import = function(urls, callback){
  let promise = function(url){
    return new Promise(function(resolve, reject){
      fetch(url).then(function(response){
        if(!response.ok) throw new Error();
        return response.text();
      }).then(function(text){
        resolve(eval(text));
      }).catch(function(reason){
        reject(reason);
      });
    });
  };
  if(typeof(urls) === "string") promise(urls).then(function(result){ callback(result); });
  else{
    let tasks = [];
    for(let i=0, len=urls.length; i<len; i++) tasks.push(promise(urls[i]));
    Promise.all(tasks).then(function(result){
      callback(result);
    });
  };
};

 

読み込みたい外部ファイルの例
module.js

(function(){
  return{
    'set' : function(string){
      this.var = string;
    },

    'get' : function(){
      console.log(this.var);
    },
  }
})();

 

使い方：読み込みたい外部ファイルが単数の場合

_import('./module.js', function(single){
  single.get();		/* undefined */
  single.set('hoge');
  single.get();		/* hoge */
});

 

使い方：読み込みたい外部ファイルが複数の場合

_import(['./module.js','./module.js'], function(multi){
  let A = multi[0];
  let B = multi[1];
  A.get();	/* undefined */
  A.set('foo');
  A.get();	/* foo */
  B.get();	/* undefined */
  B.set('bar');
  B.get();	/* bar */
});

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。