Bagaimana cara memuat file javascript?

Dalam artikel Running Your Code at the Right Time, bagian dari apa yang kami lihat adalah berbagai cara yang harus kami lakukan untuk memuat dan menjalankan file JavaScript eksternal di halaman kami. Semua berbagai cara ini berasumsi bahwa kami tahu persis file skrip apa yang ingin kami muat dengan atribut src sudah mengarah ke file kami

Sekarang, bagaimana jika Anda berada dalam situasi di mana Anda tidak tahu file skrip apa yang ingin Anda muat saat halaman Anda dimuat? . js atau bar. js tergantung pada tindakan apa yang diambil pengguna? . Apa yang berhasil dengan baik adalah memiliki cara untuk memuat file skrip kami secara dinamis. Dalam artikel singkat ini, kita akan membahasnya secara lebih rinci

Selanjutnya

YA AMPUN. Buku JavaScript oleh Kirupa?

Untuk menendang keterampilan JavaScript Anda ke luar angkasa, semua yang Anda butuhkan untuk menjadi ahli JS tersedia dalam edisi paperback dan digital

Teknik Dasar

Untuk memuat file skrip secara dinamis menggunakan JavaScript, langkah dasarnya adalah

1. Buat elemen skrip
2. Atur atribut src pada elemen skrip untuk menunjuk ke file yang ingin kita muat
3. Tambahkan elemen skrip ke DOM

Daftar bernomor ini berubah menjadi kode seperti tiga baris berikut

let myScript = document.createElement("script");
myScript.setAttribute("src", "https://www.example.com/foo.js");
document.body.appendChild(myScript);

Variabel myScript menyimpan referensi ke elemen skrip yang baru kami buat. Metode setAttribute memungkinkan kita menyetel nilai src untuk skrip yang ingin kita muat. Kami menyegel kesepakatan dengan menambahkan elemen skrip kami ke bagian bawah elemen tubuh kami melalui appendChild. Jika beberapa dari langkah-langkah ini tampak agak aneh, tutorial Membuat, Menghapus, dan Mengkloning Elemen DOM akan membuat Anda terbiasa dengan dunia manipulasi DOM yang menyenangkan

Untuk melihat kode ini beraksi sebagai bagian dari contoh yang berfungsi penuh, buat dokumen HTML baru dan tambahkan/salin/tempel konten berikut ke dalamnya

  Dynamic Script Loading
  



  I am 
in your
 code!

  

Luangkan waktu sejenak untuk melihat semua yang terkandung di sini. Kami memiliki beberapa HTML dan CSS,. dan sekarang itu bukan sesuatu yang menarik untuk dituliskan di rumah. Terutama, kami memiliki elemen skrip yang berisi beberapa kode untuk memuat file secara dinamis yang disebut easing. js dan tambahkan ke bagian bawah elemen tubuh kita. Untuk melihat semua ini beraksi, simpan dokumen HTML Anda dan pratinjau di browser favorit Anda

Apa yang akan Anda lihat di browser favorit Anda akan terlihat seperti berikut ini

Apa yang kita lihat secara visual tidak terlalu banyak memberi tahu kita. Yang perlu kita lakukan adalah menyamar dan memeriksa versi langsung dari DOM kita. Untuk itu, kita perlu memunculkan alat pengembang peramban dan memeriksa halaman untuk melihat dengan tepat apa yang dilihat peramban. Saat kita melakukan ini, perhatikan bahwa elemen skrip yang dibuat secara dinamis muncul di DOM

Untuk melangkah lebih jauh, kita dapat memeriksa lalu lintas Jaringan dan melihat pelonggarannya. File skrip js yang direferensikan oleh elemen skrip kami juga dimuat

Jika mereda. js tidak muncul untuk Anda, segarkan halaman dengan tab inspektur Jaringan terbuka. Itu akan memastikan Anda dapat melihat file skrip eksternal diminta dan kemudian dimuat

Pada titik ini, kita telah melihat dasar-dasar cara memuat file skrip eksternal hanya dengan menggunakan beberapa baris JavaScript. Ini tidak berarti kita harus selesai. Ada beberapa quirks dan kasus-kasus berbahaya yang mungkin menggigit kita jika kita tidak hati-hati, jadi beberapa bagian berikutnya akan mempersiapkan kita untuk tidak digigit. atau gigit kembali?. 😇

Menjalankan Script Kami yang Dimuat Secara Dinamis Terlebih Dahulu

Menambahkan elemen skrip ke bagian bawah elemen body berarti halaman kita akan dirender terlebih dahulu tanpa diblokir oleh JavaScript kita untuk memuat dan mengeksekusi. Itu biasanya perilaku yang benar yang kita inginkan. Sekarang, akan ada kasus ketika Anda ingin JavaScript berjalan lebih dulu daripada hal lain yang mungkin dilakukan halaman Anda. Untuk menangani kasus tersebut, kita perlu menyesuaikan kode kita

Lihatlah apa yang kita lakukan sekarang

let myScript = document.createElement("script");
myScript.setAttribute("src", "https://www.example.com/foo.js");
myScript.setAttribute("async", "false");

let head = document.head;
head.insertBefore(myScript, head.firstElementChild);

Ada dua hal baru yang terjadi dalam kode yang memastikan file skrip eksternal kita dimuat dan dijalankan sebelum hal lain di halaman dirender

1. Kami pertama-tama menyetel atribut async pada elemen skrip kami ke false. Mengapa kita melakukan itu? . Kami ingin secara eksplisit mengesampingkan perilaku default tersebut
2. Selanjutnya, kami memastikan bahwa kami memuat skrip kami sebelum halaman lainnya dimuat. Menambahkan elemen skrip kami di bagian atas elemen kepala adalah tempat terbaik untuk memastikannya berjalan di depan hal lain yang mungkin dilakukan halaman

Jika kita memodifikasi contoh lengkap kita untuk memuat file skrip eksternal kita terlebih dahulu, inilah tampilan HTML, CSS, dan JS lengkapnya

  Dynamic Script Loading
  
  
  



  I am 
in your
 code!

Ada satu perubahan tambahan yang ditunjukkan oleh contoh yang lebih besar yang relevan di sini. Kode untuk benar-benar memuat file skrip eksternal kita juga harus berada di dalam elemen head. Jika kita menyimpan kode ini di bagian bawah halaman seperti yang kita lihat sebelumnya, halaman kita akan tetap merender dan memuat semuanya seperti biasa bahkan sebelum menyadarinya perlu menangani pemuatan file skrip eksternal. Pada saat itu, tidak masalah jika file skrip eksternal kami dimuat dari bagian atas halaman atau bagian bawah halaman. DOM halaman telah dimuat 🤦‍♂️

Menjalankan Kode Ketergantungan Setelah File Skrip Kita Dimuat

Kami hanya memiliki satu berita gembira terakhir tentang berurusan dengan file skrip dinamis yang akan kami lihat sebelum menyelesaikannya. Adalah umum untuk memuat file skrip eksternal dan kemudian memanggil fungsi (atau mengandalkan sesuatu dari skrip yang dimuat) segera setelahnya. Di bawah ini adalah salah satu contoh dari apa yang secara tradisional terlihat seperti ini

Elemen skrip pertama memuat pencarian dokumen. min. js. Elemen skrip kedua memanggil sesuatu yang bergantung pada pencarian dokumen. min. js dimuat oleh elemen skrip sebelumnya. Semua ini berfungsi karena browser menangani skenario ini secara alami. Yang terbaik dari semuanya, kami mendapatkan perilaku ini secara gratis

Untuk file skrip yang dimuat secara dinamis, jika kami ingin memastikan perilaku serupa, kami memiliki sedikit pekerjaan tambahan yang harus dilakukan. Pekerjaan tambahan ini melibatkan mendengarkan acara pemuatan elemen skrip kami dan, setelah acara ini didengar, memanggil kode dependen apa pun sesudahnya. Ini akan lebih masuk akal ketika kita melihat kodenya

let myScript = document.createElement("script");
myScript.setAttribute("src", "https://www.example.com/foo.js");
document.body.appendChild(myScript);

myScript.addEventListener("load", scriptLoaded, false);

function scriptLoaded() {
  console.log("Script is ready to rock and roll!");
}

Mari kita luangkan waktu sejenak untuk menelusuri apa yang sedang terjadi

1. Elemen myScript lama kami yang tepercaya sedang memuat foo. js
2. Sekali foo. js memuat dan mengeksekusi sepenuhnya, myScript akan memecat event load
3. Panggilan addEventListener yang mendengarkan event load akan mendengarnya dan, pada gilirannya, memanggil event handler scriptLoaded
4. Kode apa pun yang ada di dalam scriptLoaded dapat memanggil dan mengakses metode atau properti apa pun yang berasal dari foo. js dan isinya

Jika Anda memerlukan penyegaran yang menyenangkan tentang cara bekerja dengan event dan event handler, lihat artikel Events in JavaScript

Kesimpulan

Saat Anda dan saya membuat situs web dan aplikasi yang semakin dinamis, kami tidak ingin membebani pengguna kami dengan memuat setiap kemungkinan file skrip yang mungkin mereka perlukan di awal. Teknik yang kita lihat dalam tutorial ini menyoroti satu cara untuk memisahkan saat file skrip kita dimuat, pada dasarnya, memuatnya sesuai permintaan. Jadi. ya

Bagaimana cara memuat file JavaScript di browser?

Bagaimana cara menjalankan file JavaScript secara manual?

Apa cara tercepat untuk memuat JavaScript?

Bagaimana cara memuat file js dari lokal di chrome?