Edit this post

Loading File

tmp7
Jun 25

Biasanya, untuk bikin aplikasi web yang sangat kecil, tag <script src="..."> sudah cukup. Ketika file script sudah semakin banyak, kamu mungkin perlu menggunakan utility untuk loading file supaya lebih rapih.

Contoh, di sini kita menggunakan utility script-loader.js untuk loading file script ke dokumen, kemudian eksekusi Init() ketika script sudah selesai di-load.

index.js

js
import { loadScripts } from './script-loader.js';

(function() {

  loadScripts([
    {
      urls: [

        "app-data.js",
        "app.js",
        "ui.js",
      ],
      callback: function() {
        app.Init();
      }
    },
  ]);
  
})();

Karena import hanya bisa digunakan di module, kita set type="module" di tag script.

js
<script src="index.js" type="module"></script>

Berikut kode utility untuk loading file :

script-loader.js

js
export { loadScripts };

function loadScripts(components) {
  let loadIndex = -1;
  loadComponents(components, loadIndex);
}

function loadComponents(components, index) {
  if (index >= 0 && components[index].callback) {
    components[index].callback();
  }
  index++;
  if (index < components.length) {
    loadExternalFiles(components[index].urls).then(() => {
      loadComponents(components, index);
    });
  }
}

function requireExternalFiles(url) {
  return new Promise((resolve, reject) => {
    let el;
    el = document.createElement('script');
    el.setAttribute('src', url);
    el.onload = () => resolve(url);
    el.onerror = () => reject(url);
    document.head.appendChild(el);
  });
}

function loadExternalFiles(URLs) {
  return new Promise(resolve => {
    let bundleURL = [];
    for (let URL of URLs)
      bundleURL.push(requireExternalFiles(URL));
    Promise.all(bundleURL).then(() => {
      resolve();
    }).catch(error => {
      console.log(error);
      console.log('Could not load one or more required file(s).');
    });
  });
}
Home

Komentar

Posting Komentar