Bagaimana Anda memasukkan dalam javascript?

Apa itu Modul ES6?

Di era awal web, peran JavaScript terbatas pada validasi formulir dan memberikan sedikit interaktivitas, sehingga skrip besar tidak diperlukan.

Saat ini, JavaScript telah menjadi bahasa utama untuk mengembangkan aplikasi web, termasuk backend dan frontend. Dengan demikian ukuran program JS juga tumbuh secara eksponensial, membuatnya lebih sulit untuk mengelola kode

Ini memotivasi penggunaan sistem modul, cara untuk membagi kode menjadi beberapa file dan direktori tetapi tetap memastikan semua bit kode dapat mengakses satu sama lain.

Karena versi lama JavaScript tidak memiliki sistem modul asli, banyak pustaka JavaScript hadir dengan milik mereka sendiri. Misalnya - CommonJS dan RequireJS

JavaScript memperkenalkan sistem modul asli di ES6 (ECMAScript 6 - nama resmi JavaScript) yang disebut Modul ES6

Modul ES6 hanyalah file yang berisi kode JS dengan dua karakteristik khusus

• Ini secara otomatis dalam mode ketat. ini melarang penggunaan kesalahan ceroboh dalam kode, seperti menggunakan variabel tanpa mendefinisikan
• Anda dapat menggunakan kata kunci impor atau ekspor di dalamnya. menyediakan cara untuk berbagi kode dengan file lain

Mari kita bahas berbagai cara untuk mencapai modularitas dan mempelajari cara mengimpor file JS ke dalam file JS

Membawa pergi

Modul ES6 adalah file JS yang dapat mengekspor kodenya untuk dibagikan dengan file lain dan mengimpor serta menggunakan kode dari file JS lainnya

Cara Populer untuk Menyertakan File JavaScript di File JavaScript Lain

Di bagian ini, kita akan belajar tentang dua cara populer untuk menyertakan file JS di file JS lainnya

• Menggunakan modul ES6
• Menggunakan Node JS membutuhkan fungsi

Menggunakan impor/ekspor. modul ES6

Mari kita mulai dengan menggunakan cara impor dan ekspor ES6. Buat file bernama utils. js dan tentukan fungsi berikut dan konstanta di dalamnya

export function greet(name) {
  return `Hello, ${name}`;
}

export const message = "How you doing?";
Perhatikan bahwa kita menggunakan kata kunci ekspor sebelum fungsi dan variabel untuk menentukan bahwa objek ini dapat digunakan oleh file lain



Hello, ${name} adalah literal template dalam JavaScript. Ini memungkinkan kita untuk menyematkan variabel di dalam string menggunakan sintaks $ dan {}
Sekarang, buat file lain bernama main. js dan tulis kode berikut di dalamnya
import { greet, message } from "./utils.js";

const greet_scaler = greet("Scaler");

console.log(greet_scaler); // Hello, Scaler
console.log(message); // How you doing?
Di baris pertama, kita mengimpor salam dan pesan dari utils. js dengan menetapkannya di dalam kurung kurawal {}. 
Setelah baris ini, kita dapat menggunakan objek yang diimpor sebagaimana didefinisikan dalam file yang sama. Kemudian, kami konsol mencatat output dari kedua objek tersebut
Sintaks ES6 untuk mengimpor. impor {objek1, objek2,. } dari 'nama file. js'
Jika Anda akan menggunakan modul ES6 di lingkungan node js, ingatlah untuk memberi nama file Anda. ekstensi mjs atau setel "ketik". "modul" dalam paket. file json
Menggunakan Ekspor Default
Kita dapat menggunakan kata kunci default untuk mengekspor satu objek secara default dari sebuah file. Apa artinya ini? . Buat fungsi sapaan di utils. js ekspor default dengan menambahkan default sebelumnya
export default function greet(name) {
  return `Hello, ${name}`;
}
Sekarang, Anda dapat mengimpornya di main. j seperti ini
import randomName from "./utils.js";

const greet_scaler = randomName("Scaler");

console.log(greet_scaler); // Hello, Scaler
Ini akan bekerja sama seperti sebelumnya
Saat melakukan ekspor default, randomName diimpor dari salam. js. Karena randomName tidak ada di utils. js, ekspor default (greet() dalam hal ini) diekspor sebagai random_name

Catatan 📝

Mari kita bahas beberapa poin penting terkait modul ES6 yang harus diingat saat menggunakannya

• Kami harus menghapus kurung kurawal saat mengimpor ekspor default
  Misalnya, jika kita menyimpan tanda kurung pada contoh randomName di atas seperti ini

  import { randomName } from "./utils.js";
  _
  Itu akan menimbulkan kesalahan yang mengatakan tidak ada ekspor seperti itu
  
  
  
  

• Sebuah file dapat berisi beberapa ekspor. Namun, kami hanya dapat menentukan satu ekspor default dalam sebuah file
  Dengan demikian kode JavaScript berikut ini tidak valid ❌

  export default function greet(name) {
    return `Hello, ${name}`;
  }
  
  export default defaultMessage = "Not Possible";
  
  export const message = "How you doing?";
  

• Kami tidak dapat menggunakan nama alias saat mengimpor ekspor normal
  Jadi impor berikut tidak valid ❌

  import { randomMessage } from "./utils.js";
  _
  Kita harus menggunakan nama yang sama saat mengimpor ekspor normal

• Kami dapat menggabungkan ekspor default dan normal seperti ini

  import defaultExport, {export1, export2} from "file.js"
  Perhatikan, kita menggunakan {} untuk ekspor bernama (normal) dan menempatkan ekspor default tanpa {}

• Kita dapat mengimpor seluruh konten modul menggunakan *

  import * as utils from 'utils.js';
  _
  Kemudian, Anda dapat mengakses semua ekspor menggunakan modul sebagai namespace

• Anda dapat mengekspor semua objek secara bersamaan di akhir file Contoh

  function greet(name) {
    return `Hello, ${name}`;
  }
  
  const message = "How you doing?";
  
  export { greet, message };
  _

• Anda dapat mengganti nama ekspor dan impor

  • Contoh penggantian nama ekspor.

    import { greet, message } from "./utils.js";
    
    const greet_scaler = greet("Scaler");
    
    console.log(greet_scaler); // Hello, Scaler
    console.log(message); // How you doing?
    _0dan dalam file impor. 
    import { greet, message } from "./utils.js";
    
    const greet_scaler = greet("Scaler");
    
    console.log(greet_scaler); // Hello, Scaler
    console.log(message); // How you doing?
    _1

  • Contoh mengganti nama impor.

    import { greet, message } from "./utils.js";
    
    const greet_scaler = greet("Scaler");
    
    console.log(greet_scaler); // Hello, Scaler
    console.log(message); // How you doing?
    _2dan dalam file ekspor

  Ini dapat membantu mengelola konflik nama antara impor serupa

Sekarang, kita akan melihat cara menjalankan modul ES6 ini di dalam browser

Menggunakan modul ECMAScript (ES6) di browser

Sebagian besar browser modern seperti chrome, safari, dan firefox memiliki dukungan untuk menjalankan modul ES6 secara langsung. Mari kita coba jalankan modul yang dibuat sebelumnya di browser

Di bagian sebelumnya, kami membuat dua file JS dengan kode berikut

• utilitas. js

  export function greet(name) {
    return `Hello, ${name}`;
  }
  
  export const message = "How you doing?";
  

• utama. js

  import { greet, message } from "./utils.js";
  
  const greet_scaler = greet("Scaler");
  
  console.log(greet_scaler); // Hello, Scaler
  console.log(message); // How you doing?
  _4

Di utama. js, kami mengimpor dan menggunakan fungsi dari utils. js menggunakan kata kunci impor

Sekarang, kami ingin menjalankan main. js menggunakan browser dengan menautkan main. modul js ke file HTML

Oleh karena itu, buatlah index. html dan sertakan file utama. skrip js sebagai berikut

import { greet, message } from "./utils.js";

const greet_scaler = greet("Scaler");

console.log(greet_scaler); // Hello, Scaler
console.log(message); // How you doing?
_5
Kami membutuhkan atribut type="module" di
Sekarang simpan utilitasnya. js sebagai berikut
import { greet, message } from "./utils.js";

const greet_scaler = greet("Scaler");

console.log(greet_scaler); // Hello, Scaler
console.log(message); // How you doing?
_6
Dan tambahkan kode berikut ke main. js
import { greet, message } from "./utils.js";

const greet_scaler = greet("Scaler");

console.log(greet_scaler); // Hello, Scaler
console.log(message); // How you doing?
_7
Penjelasan $ adalah alias dari objek jQuery, kami menggunakannya untuk mengakses berbagai fungsi yang disediakan oleh jQuery. Di sini, kami meneruskan jalur file JS kami ke fungsi getScript. Fungsi getScript akan mengeksekusi kode utils. js dan kembalikan datanya (text of utils. js) dalam fungsi callback. Di dalam fungsi callback, kami sedang mengkonsolidasikan data file
Fungsi panggilan balik adalah fungsi yang diteruskan ke fungsi lain sebagai argumen, yang kemudian dipanggil di dalam fungsi luar untuk menyelesaikan semacam rutinitas atau tindakan
Ini adalah output untuk kode di atas
Membawa pergi
jQuery menyediakan fungsi getScript untuk memuat dan mengeksekusi file JS di file JS lain

Memuat Skrip Dinamis

Kita dapat menghindari penggunaan fungsi getScript jQuery dengan menyuntikkan tag skrip sendiri

Ini adalah bagaimana Anda akan melakukannya di utama. file js

import { greet, message } from "./utils.js";

const greet_scaler = greet("Scaler");

console.log(greet_scaler); // Hello, Scaler
console.log(message); // How you doing?
_8
Penjelasan Kami membuat tag skrip dan menetapkan atribut sumbernya ke jalur file JavaScript. Kemudian kami menambahkan tag skrip ke elemen body
Periksa konsol sekarang dan Anda akan melihat keluaran yang sama seperti sebelumnya



Dalam contoh di atas, kami menyertakan satu file JS di file utama. js, kita bisa melakukan hal yang sama dengan banyak file
Buat file terlebih dahulu. js dengan kode berikut
import { greet, message } from "./utils.js";

const greet_scaler = greet("Scaler");

console.log(greet_scaler); // Hello, Scaler
console.log(message); // How you doing?
_9
Buat file lain kedua. js sebagai berikut
export default function greet(name) {
  return `Hello, ${name}`;
}
0
Sekarang, di utama. js Anda dapat menyertakan kedua file sebagai berikut
export default function greet(name) {
  return `Hello, ${name}`;
}
1
Ini kode yang sama seperti sebelumnya tetapi sekarang dalam sebuah fungsi. Sehingga lebih mudah untuk memanggilnya berkali-kali. Anda hanya perlu memasukkan yang utama. js di HTML, dua file lainnya akan disertakan secara otomatis
Membawa pergi
Kami dapat secara dinamis memasukkan tag skrip menggunakan manipulasi DOM untuk memuat dan mengeksekusi file JS tanpa jQuery

Mendeteksi Ketika Script Telah Dijalankan

Sekarang, ada masalah dengan solusi di atas (Pemuatan skrip dinamis). Jika kami mencoba mengakses variabel dari file yang diimpor tepat setelah menambahkannya ke HTML, kami akan mengalami kesalahan karena browser memuat file JS secara asinkron (bersamaan) untuk meningkatkan kinerja

Misalnya, jika ini adalah utils. file js

export default function greet(name) {
  return `Hello, ${name}`;
}
2
Dan kami mencoba mengakses konstanta pesan di main. j seperti ini
export default function greet(name) {
  return `Hello, ${name}`;
}
_3
Kami akan mengalami kesalahan berikut
export default function greet(name) {
  return `Hello, ${name}`;
}
_4
Untuk mengatasi ini, kita harus memastikan bahwa setiap kode di main. js yang menggunakan objek dari utils. js dijalankan setelah file dimuat
Untuk ini, kita bisa menggunakan fungsi callback pada atribut onload dari tag script
export default function greet(name) {
  return `Hello, ${name}`;
}
5
Garis kuncinya di sini adalah. scriptTag. memuat = panggilan balik;. Fungsi panggilan balik hanya dipanggil saat skrip dimuat. Sekarang, hasilnya akan benar
 

			
Apakah JavaScript memiliki penyertaan?
			
Metode include() menentukan apakah array menyertakan nilai tertentu di antara entri-entrinya , mengembalikan benar atau salah sebagaimana mestinya. 
		
			
Bisakah Anda menggunakan include () dengan array di JavaScript?
			
includes()  Anda dapat menggunakan metode include() dalam JavaScript untuk memeriksa apakah suatu item ada dalam array . Anda juga dapat menggunakannya untuk memeriksa apakah ada substring di dalam string. Mengembalikan nilai true jika item ditemukan dalam array/string dan false jika item tidak ada. 
		
			
Bagaimana Anda menulis karakter khusus dalam JavaScript?
			
JavaScript memungkinkan kita menambahkan karakter khusus ke String teks  menggunakan tanda backslash (\) . Kita dapat menambahkan berbagai jenis karakter khusus, termasuk kutipan tunggal, kutipan ganda, ampersand, baris baru, tab, spasi mundur, umpan formulir, dll. , menggunakan garis miring terbalik sebelum karakter. 
		
			
Bisakah Anda menggunakan include pada objek JavaScript?
			
Menggunakan Metode include().  Jika array berisi objek/elemen dapat ditentukan dengan menggunakan metode include() . Metode ini mengembalikan nilai true jika array berisi objek/elemen lain return false.