Monday, October 2, 2017

3 Cara Meng-Include Javascript pada Javascript yang Lain


Ada kalanya, kita perlu meng-include file Javascript lain ke dalam Javascript kita tanpa tag "<script>" yang statis.

Untuk CSS, hal yang serupa bisa juga terjadi, hanya saja sudah ada solusinya, yakni @import.

Lalu bagaimana dengan Javascript?

Perlu diketahui bahwa versi lama dari Javascript tidak memiliki import, include, maupun require.

Akan tetapi, versi Javascript terkini memiliki standard seperti modul ES6 untuk mengimport modul.

Sayangnya, itu tidak disupport oleh kebanyakan browser.


Oleh karena itu, di sini kita akan mempelajari cara meng-include Javascript dari file Javascript lain, termasuk dengan metode yang disediakan modul ES6.

Modul ES6

Ketika modul ini sudah disupport oleh kebanyakan browser, kita tinggal melakukan ini:
//yang_akan_diimport.js
export function ngudud() {
  return "Ngudud";
}

//yang_mengimport.js
import {ngudud} from 'yang_akan_diimport'; // atau './yang_akan_diimport'
let val = ngudud(); // val berisi "Ngudud";

Node.js Require

Cara ini hanya bisa dilakukan di Node.js, tapi karena masih javascript juga, maka saya sertakan di sini.

//yang_akan_diimport.js
module.exports = {
   ngudud: function() {
      return "Ngudud";
   }
}

//yang_mengimport.js
const myModule = require('./yang_akan_diimport');
let val = myModule.ngudud(); // val berisi "Ngudud"

JQuery

Anda bisa meng-include file Javascript lain dengan AJAX dan menggunakan eval setelahnya.

Ini cara yang paling sederhana, tapi hanya terbatas pada file Javascript yang ada di domain kita sendiri.

Selain itu, penggunaan eval beresiko kepada celah keamanan.

Untuk meng-include file Javascript lain dengan JQuery, begini caranya:

$.getScript("yang_akan_diimport.js", function(data, textStatus, jqxhr) {
   alert("Script di-load, tapi belum dieksekusi.");
   
   //untuk mengeksekusinya
   eval(data);
});

Kode di atas ekuivalen dengan ini:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

Agar lebih ringkas, gunakan kode yang di atas.

Dan ada satu hal lagi.


Jika kita menggunakan 'use strict' pada kode yang diinclude tadi, perlu sedikit hack pada kode tersebut agar eval bisa berjalan.

Dynamic DOM

Kita juga bisa menambahkan tag "<script>" dengan property URL ke dalam HTML.

Untuk menghindari biaya overhead dari JQuery, ini bisa menjadi solusi yang ideal.

Script yang di-include juga bisa berasal dari domain lain.

Juga, browser akan meng-eval-kannya secara otomatis.

Tag "<script>" tersebut juga bisa diinjeksi ke bagian "<head></head>" maupun sebelum "</body>".

Begini contohnya:

function loadScript(url) {
    var script = document.createElement("script"); //buat tag
    script.src = url; //tentukan target URL-nya

    document.head.appendChild(script); //pasang di head
}

Tapi ada masalah dengan cara ini.

Browser modern akan tetap mengeksekusi script yang sudah di-load dan script yang di-include tadi akan dibiarkan.

Setelah kita me-refresh browser, baru script yang di-include tadi akan dijalankan.

Dengan kata lain, script tadi tidak bisa digunakan begitu saja.

Solusinya, kita akan menggunakan callback dari "script telah di-load".

Caranya:

function muatScript(url, callback)
{
    //Tambahkan script di head
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    //kemudian bind event ke tag tersebut
    script.onreadystatechange = callback;
    script.onload = callback;

    //load script
    head.appendChild(script);
}

Kemudian buat fungsi ini:

var tempatMenggunakanKodeYangDiinclude = function() {
 //lakukan sesuatu dengan kode yang diinclude di sini..
};

Dan beginilah cara meng-include-nya:

muatScript("yang_akan_diimport.js", tempatMenggunakanKodeYangDiinclude);

Kira-kira begitulah cara meng-Include Javascript pada Javascript yang lain.

Asalkan kita tidak melakukan hal-hal ekstrim di sisi browser, kita sebenarnya tidak perlu melakukan ini.

Cukup tambahkan saja tag "<script>" yang statis di bagian "<head></head>" atau sebelum "</body>" dan kode akan berjalan tanpa masalah.

Diterjemahkan dan diadaptasikan dari sumber berikut:
https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file