Skip to main content

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

Popular posts from this blog

Belajar Node.js - Tutorial Dasar Node.js

Pemrograman web adalah salah satu pemrograman yang membutuhkan banyak skill.

Untuk menghasilkan satu aplikasi web saja, setidaknya diperlukan minimal 4 skill, misalnya PHP, HTML, Javascript, dan CSS.

Untungnya, saat ini Node.js telah lahir untuk mengurangi skill yang dibutuhkan dalam pemrograman web. Tapi hanya satu saja lho...

Apa itu?

Jawabannya adalah Javascript.

Selama ini kita belajar Javascript untuk melakukan pemrograman di sisi client.

Seperti halnya membuat animasi, dan mengatur layout agar rapi, atau mungkin melakukan request dengan AJAX.

Tapi itu semua di sisi client.

Nah, sekarang sudah ada Node.js. Dengan software ini, kita bisa melakukan pemrograman di sisi server dengan Javascript.

Dengan adanya Node.js, setidaknya satu skill tambahan, misalnya PHP, sudah tidak diperlukan, kecuali kalau Anda ngotot ingin mempelajarinya.

Oleh karena itu, mari kita mulai petualangan ini.

Mengapa Kita Perlu Belajar Node.js? Bukan hanya Sekadar Bahasa Baru dalam Server Side Scripting

Node.…

Belajar Node.js Part 1 - Pengenalan Node.js

Kembali ke Daftar Isi

Apa itu Node.js?
Node.js adalah framework open source untuk server.Node.js bisa didapatkan secara gratis.Node.js bisa berjalan di berbagai OS, misalnya Windows, Linux, Unix, Mac OS X, dan lain-lain.Node.js menggunakan JavaScript di server.
Mengapa kita menggunakan Node.js?
Node.js berjalan dengan single-thread, non-blocking, asynchronous, yang penggunaan memorinya sangat efisien.Node.js menggunakan Javascript, jadi client dan server sama bahasanya.Event-driven yang memiliki single thread adalah cepat walaupun ketika menangani banyak request sekaligus.Memiliki package yang terus menerus bertambah yang dapat diakses melalui NPM.Node.js cocok untuk prototyping, agile development, dan rapid product iteration.Node.js memiliki permissive license.Node.js dapat berjalan di banyak OS.Komunitas developer Node.js sangat aktif.Beberapa aplikasi terkenal menggunakan Node.js.Tidak hanya untuk web.
Tugas umum sebuah web server adalah membuka file, entah itu file system atau datab…