Apa perbedaan antara menggunakan Require.JS dan hanya membuat <script>
elemen di DOM?
Pemahaman saya tentang Require.JS adalah bahwa ia menawarkan kemampuan untuk memuat dependensi, tetapi dapatkah ini tidak dilakukan dengan membuat <script>
elemen yang memuat file JS eksternal yang diperlukan?
Misalnya, mari kita asumsikan saya memiliki fungsi doStuff()
, yang membutuhkan fungsi needMe()
. doStuff()
ada di file eksternal do_stuff.js
, sedangkan needMe()
di file eksternal need_me.js
.
Melakukan ini dengan cara Require.JS:
define(['need_me'],function(){
function doStuff(){
//do some stuff
needMe();
//do some more stuff
}
});
Melakukan ini hanya dengan membuat elemen skrip:
function doStuff(){
var scriptElement = document.createElement('script');
scriptElement.src = 'need_me.js';
scriptElement.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(scriptElement);
//do some stuff
needMe();
//do some more stuff
}
Keduanya bekerja. Namun, versi kedua tidak mengharuskan saya untuk memuat semua perpustakaan Require.js. Saya tidak benar-benar melihat perbedaan fungsional ...
javascript
requirejs
dynamic-script-loading
js-amd
maxedison
sumber
sumber
Jawaban:
Inilah artikel bagus di ajaxian.com tentang mengapa menggunakannya:
RequireJS: Asynchronous JavaScript loading
sumber
Dalam contoh Anda, Anda membuat tag skrip secara asinkron, yang artinya
needMe()
fungsi Anda akan dipanggil sebelum file need_me.js selesai memuat. Ini menghasilkan pengecualian tanpa tertangkap di mana fungsi Anda tidak didefinisikan.Alih-alih, untuk membuat apa yang Anda sarankan benar-benar berfungsi, Anda harus melakukan sesuatu seperti ini:
Dapat diperdebatkan, mungkin atau mungkin tidak terbaik untuk menggunakan manajer paket seperti RequireJS atau untuk menggunakan strategi murni JavaScript seperti yang ditunjukkan di atas. Meskipun aplikasi Web Anda dapat memuat lebih cepat, menjalankan fungsi dan fitur di situs akan lebih lambat karena melibatkan menunggu sumber daya dimuat sebelum tindakan itu dapat dilakukan.
Jika aplikasi Web dibangun sebagai aplikasi satu halaman, maka pertimbangkan bahwa orang tidak akan benar-benar memuat ulang halaman tersebut terlalu sering. Dalam kasus ini, preloading semuanya akan membantu membuat pengalaman tampak lebih cepat ketika benar - benar menggunakan aplikasi. Dalam kasus ini, Anda benar, seseorang hanya dapat memuat semua sumber daya hanya dengan memasukkan tag skrip di kepala atau badan halaman.
Namun, jika membangun situs web atau aplikasi Web yang mengikuti model yang lebih tradisional di mana satu transisi dari halaman ke halaman, menyebabkan sumber daya dimuat ulang, pendekatan lazy-loading dapat membantu mempercepat transisi ini.
sumber
Beberapa alasan penting lainnya mengapa menggunakan RequireJS masuk akal:
Diambil dari komentar rmurphey di sini di Gist ini .
Lapisan abstraksi bisa menjadi mimpi buruk untuk dipelajari dan disesuaikan, tetapi ketika itu melayani tujuan dan melakukannya dengan baik, itu masuk akal.
sumber
Inilah contoh yang lebih konkret.
Saya sedang mengerjakan proyek dengan 60 file. Kami memiliki 2 mode berbeda untuk menjalankannya.
Muat versi yang disatukan, 1 file besar. (Produksi)
Memuat semua 60 file (pengembangan)
Kami menggunakan loader sehingga kami hanya memiliki satu skrip di halaman web
Itu default ke mode # 1 (memuat satu file besar bersatu). Untuk menjalankan dalam mode # 2 (file terpisah) kami menetapkan beberapa flag. Itu bisa apa saja. Kunci dalam string kueri. Dalam contoh ini kita hanya melakukan ini
loader.js terlihat seperti ini
Skrip build hanyalah file .sh yang terlihat seperti ini
dll ...
Jika file baru ditambahkan, kami kemungkinan akan menggunakan mode # 2 karena kami sedang melakukan pengembangan, kami harus menambahkan
injectScript("somenewfile.js")
baris ke loader.jsKemudian untuk produksi kami juga harus menambahkan somenewfile.js ke skrip build kami. Sebuah langkah yang sering kita lupakan dan kemudian mendapat pesan kesalahan.
Dengan beralih ke AMD kita tidak perlu mengedit 2 file. Masalah menjaga loader.js dan skrip build dalam sinkronisasi hilang. Menggunakan
r.js
atauwebpack
hanya dapat membaca kode yang akan dibuatlarge-concantinated.js
Itu juga dapat menangani dependensi, misalnya kita memiliki 2 file lib1.js dan lib2.js dimuat seperti ini
lib2 membutuhkan lib1. Ada kode di dalamnya yang berfungsi seperti itu
Tetapi karena skrip yang disuntikkan dimuat secara asinkron, tidak ada jaminan mereka akan memuat dalam urutan yang benar. 2 skrip ini bukan skrip AMD tetapi dengan menggunakan require.js kita dapat mengatakan dependensi mereka
Saya modul kami yang menggunakan lib1 kami melakukan ini
Sekarang memerlukan.js akan menyuntikkan skrip untuk kami dan itu tidak akan menyuntikkan lib2 sampai lib1 telah dimuat karena kami mengatakan lib2 tergantung pada lib1. Itu juga tidak akan memulai modul kami yang menggunakan lib1 sampai lib2 dan lib1 dimuat.
Ini membuat pengembangan bagus (tidak ada langkah pembangunan, tidak perlu khawatir tentang memuat pesanan) dan itu membuat produksi menyenangkan (tidak perlu memperbarui skrip pembuatan untuk setiap skrip yang ditambahkan).
Sebagai bonus tambahan, kita dapat menggunakan plugin babel webpack untuk menjalankan babel di atas kode untuk browser yang lebih lama dan sekali lagi kita tidak harus mempertahankan script build itu.
Perhatikan bahwa jika Chrome (browser pilihan kami) mulai mendukung
import
nyata, kami mungkin akan beralih ke itu untuk pengembangan tetapi itu tidak akan benar-benar mengubah apa pun. Kami masih bisa menggunakan webpack untuk membuat file gabungan dan kami bisa menggunakannya menjalankan babel atas kode untuk semua browser.Semua ini diperoleh dengan tidak menggunakan tag skrip dan menggunakan AMD
sumber