JavaScriptで共通設定などを切り出す！

JavaScriptで一番（？）困るのは、共通設定や関数などを外部ファイルに切り出す＆その読み込み方法。

ES6からはexport、import構文がサポートされているので、それを使えという話なのだけれども・・・。

ちょっと坊主さんのキントくものカスタマイズの仕事が入ったりして、またもや

「IEよ、またオマエか！」

ということです。困っていると同僚から下記のアドバイス！

windowオブジェクトを使って、エクスポート、インポートみたいなことをやればいいのでは？

JSさわってから今までなぜそこに気がつかなかったのだろうか・・・自分の馬鹿さ加減が情けなくて、ナミダが出てきます。

つーことで、こんな感じですね。

config.js：設定情報ファイル
utils.js：共通で使いたい関数をまとめるファイル
main-page.js（sub-page.js）：メインの処理を書くファイル（ページ毎に読み込みする）

↑をHTML内でscriptタグでリンクさる。

ポイントは、即時関数と即時関数の引数にwindowオブジェクトを使うということですね。即時関数について、https://qiita.com/katsukii/items/cfe9fd968ba0db603b1e このへんでちょっとおさらい。

各ファイルはこんな感じ。

config.js(function () {
  window.config = {
    setting1: '設定情報1',
    setting2: '設定情報2',
  }
}());

utils.js(function () {
  window.utils = {
    doExample: function(param){
      //
      // 何か処理
      //
     return XXX;
    } 
  }
}());

で、こいつらをメインのファイルで使います！

main-page.js(function (config, utils) {
  const appConfig = config;
  const appConfig = utils;

  // 設定情報1を使うときは・・・
  // config.setting1 で呼び出せる！

  // utilsの関数を使うときは・・・
  // appUtils.doExample(param) で呼び出せる！

}(window.config, window.utils));

できるだけグローバルスコープを汚染しないように即時関数を使ってスコープを狭める、という感じですね。

正直無理矢理感が強くて、綺麗とはいえないけれども、まぁES6使えないのでこれでよしとしますかね！

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル