Cara menggunakan impor javascript

Question

Lucunya, ketika bahasa pemrograman sebesar JavaScript ternyata memiliki variasi penerapan modul sistem. Sebelum membaca lebih lanjut, mari kita bahas bersama terlebih dahulu apa itu sistem modul dan bagaimana seluk-beluk JavaScript hingga saat ini

Table of Contents Show

Apa itu sistem modul?
Sebelum ada sistem modul

Apa itu sistem modul?

Sistem Modul adalah cara bahasa pemrograman untuk dapat menerapkan isolasi kode dari satu file ke file lain, serta memudahkan untuk memasukkan kode dari file lain ke dalam file yang membutuhkannya

Ini adalah sistem yang sudah sangat umum di berbagai bahasa pemrograman. Bukan barang baru, bahkan bukan barang mewah. Sistem modul biasanya sudah diatur oleh bahasa itu sendiri sehingga tidak perlu tambahan persepsi dari masyarakat dan berbagai pihak dalam menerapkan sistem modul dalam suatu bahasa.

Sebelum masuk ke JavaScript, mari kita lihat bahasa induk JavaScript, yaitu Java. Sehingga kita bisa belajar bagaimana menerapkan sistem modul Java

Di Java, untuk menggunakan kode dari file lain, baik standar dari Java maupun dari pihak lain, bisa sesederhana menambahkan

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

9 ke paket yang diperlukan, contoh kode

import java.util.ArrayList;

class ArrayListUtilization {
  public static void main(String[] args) {
    ArrayList<Integer> myList = new ArrayList<>(3);
    myList.add(3);
    myList.add(2);
    myList.add(1);
    System.out.println(myList);
  }
}

_

Anda dapat melihat potongan kode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

0 di baris paling atas, kode tersebut menunjukkan bahwa di bawahnya kita akan menggunakan kode yang berasal dari paket yang relevan, dalam hal ini ya

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

1. Tidak perlu bingung atau khawatir bagaimana cara menghafal nama paket, di Java sebagian besar waktu pengkodean dapat dipangkas karena dukungan IDE (Integrated Development Environment) yang sangat baik.

Metode impor seperti di atas sudah menjadi standar di Java, tidak perlu metode lain yang membuat semuanya menjadi sederhana bahkan membingungkan

Berbicara tentang cara mengisolasi kode, dengan dukungan Sistem Kelas, di Java tidaklah sulit. Ini seperti mengatakan, bahkan seorang anak yang baru belajar Java pun harus tahu cara membuatnya. Mari kita lihat contoh kode berikut

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

Kode di atas adalah contoh POJO (Plain Old Java Object) yang merupakan objek entitas normal tanpa ada tambahan logika bisnis di dalamnya. Dari kode diatas jelas kita tidak bisa mengakses property

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

2 karena dibuat private sehingga hanya bisa diakses melalui internal Class itu sendiri. Untuk mengambil nilai dari

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

_2 maka

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

4 dibuat untuk properti ini yaitu

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

5 yang dibuat agar dapat diakses dari luar

Setelah melihat Java, mari kita arahkan tulisan ini untuk lebih spesifik pada bahasa yang menjadi idola para remaja yaitu JavaScript.

Sebelum ada sistem modul

JavaScript sudah ada sejak lama, tetapi karena kode JavaScript sudah ada sejak lama, biasanya tidak sebesar itu, jadi dukungan Sistem Modul belum ada sejak saat itu hingga saat ini. Jika tidak ada Sistem Modul, apakah JavaScript tidak dapat melakukan dua hal yang kita bahas di atas? . Tapi ya, butuh perjuangan yang lebih keras tentunya

Di masa lalu, ketika JavaScript hanya dapat berjalan di browser, satu-satunya cara untuk menyematkan file ke file lain adalah memanfaatkan kemampuan browser untuk memuat file JavaScript.

Mari kita lihat kode berikut

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

Kode di atas adalah cara yang biasa kita gunakan pada browser untuk saling menyematkan satu file dengan file lainnya. Kita buat contoh misalnya di

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

6, kita buat fungsi sederhana sebagai berikut

var person = {
  firstName: 'Irfan',
  lastName: 'Maulana',
};

function getFirstName() {
  return person.firstName;
}

Kita dapat menggunakan fungsi di

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

_7 dengan cara tertentu

console.log(getFirstName());

Hal di atas mungkin saja terjadi, tetapi sangat rapuh. Sebab, metode ini bergantung pada beberapa hal, di antaranya

Ketika kita menyematkan kode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

8, kita harus memastikan bahwa kita tidak menambahkan atribut

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

9 karena akan membuat urutan pemuatan tidak dapat diprediksi. Sedangkan pada kasus kode di atas,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

_6 harus dimuat terlebih dahulu sebelum kita dapat menggunakannya di

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

7

Fungsi

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

5 di

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

6 harus diekspos dan tidak ditutupi oleh fungsi lain. Kami mungkin telah melakukan ini secara tidak sadar, karena semua fungsi yang didefinisikan di utas terluar dalam file JavaScript akan secara otomatis diekspos ke objek global atau

var person = {
  firstName: 'Irfan',
  lastName: 'Maulana',
};

function getFirstName() {
  return person.firstName;
}

4 di browser

Properti

var person = {
  firstName: 'Irfan',
  lastName: 'Maulana',
};

function getFirstName() {
  return person.firstName;
}

5 di

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

6 telanjang dan dapat diubah oleh siapa saja

Dari ketiga hal di atas, sudah bisa dibayangkan kesulitan yang akan terjadi ketika jumlah file JavaScript mulai membengkak. Jadi apakah ada solusinya? . Meskipun untuk masalah no. 1 mungkin belum ada solusinya, tapi untuk masalah no. 2 dan 3 dapat diselesaikan dengan mengimplementasikan IIFE (Immediately Invoked Function Expression)

Dari kode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

_6 di atas, kita bisa mengubahnya dengan implementasi IIFE menjadi

var person = (function () {
  var firstName = 'Irfan';
  var lastName = 'Maulana';
  return {
    getFirstName: function () {
      return firstName;
    },
  };
})();

Sehingga kita juga perlu mengubah cara memanggil

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

7 menjadi

console.log(person.getFirstName());

Dengan cara ini kami memastikan bahwa fungsi lain tidak dapat langsung mengubah konten properti

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <script src="./file-1.js"></script>
    <script src="./file-2.js"></script>
  </body>
</html>

2. Seperti yang telah dibahas sebelumnya, karena belum ada dukungan bahasa untuk modul sistem, penggunaan IIFE menjadi sangat populer, terutama bagi mereka yang sangat peduli dengan isolasi kode. Di masa kejayaan

console.log(getFirstName());

_0, sangat umum bagi kami untuk melihat kode seperti ini

// IIFE di jQuery
(function ($) {
  var myPrivateFunction = function () {};
  var init = function () {
    myPrivateFunction();
  };
  $(init);
})(jQuery);

Tentu saja, dengan menggunakan berbagai Pola Desain yang memenuhi syarat, perpustakaan kelas tunggal dapat dibuat seperti

console.log(getFirstName());

0,

console.log(getFirstName());

2,

console.log(getFirstName());

3,

console.log(getFirstName());

4 dan gerombolan memanfaatkan kemampuan JavaScript untuk mengisolasi kode menggunakan IIFE

AMD

AMD (The Asynchronous Module Definition) adalah cara mendefinisikan modul dalam JavaScript yang memungkinkan modul atau file dan dependensinya dimuat secara asinkron. Ini bukan modul sistem standar yang dibuat oleh JavaScript sebagai bahasa, tetapi dikembangkan oleh komunitas yang dimulai dengan munculnya RequireJS

Ide AMD adalah untuk meningkatkan cara browser memuat file JavaScript dan semua dependensinya. Karena implementasinya di atas browser dan dikirim dalam bentuk library seperti

console.log(getFirstName());

5 yang kami sebutkan tadi, build tool tidak diperlukan lagi untuk mengembangkan aplikasi kompleks berbasis AMD. Yang harus kita lakukan adalah menambahkan pustaka RequireJS dan menentukan modul sistem AMD, dan di browser, RequireJS akan membuat permintaan asinkron untuk dependensi yang diperlukan

Berikut adalah contoh kode dari situs web

console.log(getFirstName());

5

//Calling define with module ID, dependency array, and factory function
define('myModule', ['dep1', 'dep2'], function (dep1, dep2) {
  //Define the module value by returning a value.
  return function () {};
});

Bagi mereka yang telah menggunakan

console.log(getFirstName());

_7, kode ini mungkin terasa familier, meskipun sebenarnya

console.log(getFirstName());

7 tidak secara otomatis memuat dependensi tetapi hanya mendefinisikan dependensi dengan cara yang mirip dengan

console.log(getFirstName());

5

AMD menjadi satu-satunya pilihan bagi pengguna JavaScript yang mendambakan modul sistem saat itu. Dengan AMD kita dapat mengisolasi kode kita dari satu file ke file lainnya karena hampir semua kode kita didefinisikan dalam fungsi wrapper dari library yang mengimplementasikan sistem ini seperti RequireJS. Ditambah kemampuannya untuk secara otomatis memuat dependensi yang diperlukan langsung di browser, AMD akhirnya punya waktu sendiri saat itu

Karena bukan modul sistem resmi, dapat dipahami bahwa metode ini tidak terlalu populer di kalangan pengguna JavaScript, walaupun hingga saat ini masih sedikit penggunanya, bahkan di beberapa alat build modern hingga saat ini masih mendukung kompilasi target ke dalam sistem AMD modul. Saat ini pengguna AMD besar salah satunya adalah Dojo

CommonJS

CommonJS (CJS) sekali lagi bukan modul sistem standar yang diperkenalkan oleh JavaScript sebagai bahasa. Ini adalah modul sistem yang dibuat standar oleh Node. js ketika berhadapan dengan kode Node. js. Ya memang untuk kode Server Side seperti Node. js, sistem modul adalah barang wajib. Karena pada saat itu belum ada modul sistem yang dapat digunakan, maka Node. js membuat standarnya sendiri untuk lingkungannya

CommonJS, menurut pendapat pribadi saya, adalah sebuah revolusi, JavaScript yang tidak pernah memikirkan standardisasi modul sistem harus mulai memikirkannya. Jika tidak, dapat dipastikan implementasi lain seperti CommonJS akan muncul di masa mendatang dengan pendekatan yang berbeda. Meskipun secara desain CommonJS tidak ditujukan untuk JavaScript pada umumnya yang dapat berjalan di berbagai lingkungan, namun hanya diperuntukkan bagi pengguna JavaScript dengan lingkungan Node. js saja. Namun seiring popularitas Node. js, semakin banyak orang dan pembuat perpustakaan eksternal menerapkan CommonJS sebagai target build mereka

Di sisi lain, CommonJS juga dapat dilihat sebagai bencana bagi JavaScript, ketika hal-hal yang tidak standar tetapi menjadi populer karena dari sudut pandang standarisasi belum menyediakan fitur-fiturnya. CommonJS adalah hal yang lumrah dan sepertinya menjadi standar JavaScript meskipun hanya bisa berjalan di Node.js. js. Hal semacam ini bisa membingungkan bagi Anda yang baru belajar JavaScript atau Node.js. ja dan tidak tahu sejarahnya sampai CommonJS ada

Kode CommonJS dapat dilihat pada contoh berikut

const fs = require('fs');

fs.writeFile('pesan.txt', 'Sebuah pesan untuk seseorang', 'utf8', (err) => {
  if (err) throw err;
  console.log('Berhasil disimpan!');
});

Setidaknya ada 2 cara untuk mendefinisikan modul CommonJS, yaitu dengan

var person = (function () {
  var firstName = 'Irfan';
  var lastName = 'Maulana';
  return {
    getFirstName: function () {
      return firstName;
    },
  };
})();

0 dan

var person = (function () {
  var firstName = 'Irfan';
  var lastName = 'Maulana';
  return {
    getFirstName: function () {
      return firstName;
    },
  };
})();

1. Keduanya sedikit berbeda, berikut dilihat dan dipelajari melalui contoh kode berikut

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

0

Kita dapat menggunakan modul di atas dengan

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

_1

Sedangkan menggunakan

var person = (function () {
  var firstName = 'Irfan';
  var lastName = 'Maulana';
  return {
    getFirstName: function () {
      return firstName;
    },
  };
})();

_1 dapat dilihat dari kode berikut

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

_2

Disebut pada file lain dengan

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

_3

Karena dikembangkan oleh Node. js, maka mindset modul sistem ini adalah Server Side dan bukan Client Side. Oleh karena itu pada saat itu terdapat bundler seperti Browserify dan SystemJS yang populer untuk memastikan modul CommonJS dapat berjalan di browser

ESM

ESM (ES Module) atau ada juga yang menyebutnya ES Harmony merupakan format standar yang diberikan oleh ECMA seperti yang dapat dilihat pada. Karena ESM merupakan standar yang diberikan oleh ECMA, maka mau tidak mau Node. js seharusnya sudah mulai mendukung modul sistem ini. Untungnya di versi terbaru (sejak versi 14 kalau tidak salah) Node. js sudah termasuk dukungan untuk ESM, jadi tidak perlu menambahkan alat build seperti webpack lagi jika ingin membuat kode dengan ESM di lingkungan Node. js

Berikut adalah contoh kode ES Module

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

_4

Dan bisa digunakan pada file lain dengan cara

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

5

Ada artikel menarik dengan visualisasi yang bagus jika ingin mengerti tentang ES Modules ini silahkan baca artikel “ES modules. Penyelaman mendalam kartun”

ESM juga telah didukung secara native di beberapa browser modern dengan memberikan atribut tambahan

var person = (function () {
  var firstName = 'Irfan';
  var lastName = 'Maulana';
  return {
    getFirstName: function () {
      return firstName;
    },
  };
})();

3 saat memuat file, baca beritanya di artikel "ECMAScript modules in browsers"

Berikut adalah contoh kode implementasi ESM di browser

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

6

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

7

UMD

UMD (Universal Module Definition) adalah format yang dibuat sebagai adaptor karena terdapat perbedaan modul sistem pada kode Server dan kode Klien dan beberapa modul sistem yang sudah populer karena dibawa oleh komunitas. Format ini sering digunakan sebagai fallback oleh beberapa bundler seperti Rollup dan Webpack

Contoh kode UMD dapat dilihat pada kode berikut

public class Person {
  private String firstName;
  private String lastName;

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }
}

_8

Kesimpulan

Dalam JavaScript, modul sistem standar yang saat ini digunakan adalah ES Module. Namun, masih banyak kode yang menggunakan CommonJS, AMD bahkan secara manual menggunakan IIFE

Sebagai pengembang JavaScript, kita harus mengetahui perbedaan antara modul sistem yang sudah ada, sehingga di masa mendatang kita dapat mengambil keputusan ketika harus memilih modul sistem mana yang ingin kita dukung.

kode javascript