Kekurangan pemuatan JS normal
Antarmuka perlu mulai dirender setelah js dimuat
Jika ada dependensi antara js, mereka perlu dimuat secara berurutan sesuai dengan dependensi. Jika dependensinya kompleks, lebih merepotkan untuk menulis dan memelihara kode
jadi, require.js muncul dalam suara massa rakyat yang luas.
Peran require.js
Terapkan pemuatan asinkron js untuk menghindari ketidakresponsan halaman
Kelola dependensi antar modul untuk memfasilitasi penulisan dan pemeliharaan kode
require.js pemuatan
Pertama, buka [situs resmi] http://requirejs.org/ unduh versi terbaru
Setor require.js yang diunduh atau disalin ke direktori proyek
Muat require.js di halaman yang diinginkan
Beban langsung: Tulis <scrip{filter}t src="js/require.js"></scrip{filter}t>
Pemuatan asinkron: <scrip{filter}t src="js/require.js" menunda async="true" ></scrip{filter}t>
Catatan: asinkron berarti file ini perlu dimuat secara asinkron untuk menghindari halaman web menjadi tidak responsif. IE tidak mendukung asinkron, jadi muat atribut defer;
Setelah require.js dimuat, langkah selanjutnya adalah memuat kode kita sendiri. Misalkan file kode kita sendiri main.js, juga ditempatkan di bawah direktori js. Jadi, tulis saja yang berikut ini: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Fungsi atribut data-main adalah untuk menentukan modul utama program web. Dalam contoh di atas, file ini akan dimuat terlebih dahulu require.js main.js di bawah direktori js. Karena akhiran file default require.js adalah js, Anda dapat mendekhak main.js ke main.
Cara menulis modul utama
main.js dari bagian sebelumnya disebut modul utama. Artinya metode entri untuk seluruh modul.
Cara menulis main.js
Metode yang ditulis langsung ke main.js tanpa bergantung pada modul lain
main.function()
Modul utama tergantung pada modul lain, jadi gunakan fungsi require()
main.js
memerlukan(['modulA', 'modulB', 'modulC'], fungsi (modulA, modulB, modulC){
Beberapa kode di sini
});
Fungsi require() menerima dua parameter:
Parameter pertama adalah array yang mewakili modul yang akan bergantung
Parameter kedua adalah fungsi callback yang akan dipanggil setelah semua modul yang ditentukan di depan dimuat. Modul yang ditambahkan diteruskan dalam bentuk parameter, sehingga dapat digunakan di dalam fungsi callback.
Pemuatan modul
Contoh: Jika modul dependen dari modul utama (main.js) adalah ['jquery', 'crypto-js', 'anything']
Memuat secara default
Jika file dari ketiga modul dependen ini jquery.js, crypto-js.js, anything.js dan main.js di direktori yang sama, mereka dapat dimuat secara otomatis sesuai dengan bagian sebelumnya
Beban konfigurasi require.config()
require.config() ditulis di kepala modul utama (main.js).
Bagaimana modul AMD ditulis
require.js modul yang dimuat, menggunakan spesifikasi AMD. Artinya, modul harus ditulis sesuai dengan peraturan AMD.
Secara khusus, modul harus didefinisikan oleh fungsi define() tertentu. Jika modul tidak bergantung pada modul lain, modul tersebut dapat didefinisikan langsung dalam fungsi define()
Misalkan sekarang ada file math.js yang mendefinisikan modul matematika. Kemudian, math.js tulis:
Berikut cara memuat:
Jika modul juga bergantung pada modul lain, maka argumen pertama dari fungsi define() harus berupa array yang menunjukkan dependensi modul.
Ketika fungsi require() memuat modul di atas, itu akan memuat file myLib.js terlebih dahulu.
Muat modul non-AMD
Ada banyak modul di pasaran yang tidak memenuhi spesifikasi AMD, require.js dapat dimuat
Sebelum modul ini dapat dimuat, modul ini perlu diatur ke require.config() untuk menentukan beberapa karakteristiknya
Misalnya noamd.js dan noamddeps.js kedua modul adalah modul non-AMD, dan jika Anda ingin memuatnya, Anda harus menentukan karakteristiknya:
require.js menerima objek konfigurasi yang, selain properti jalur, juga memiliki properti shim khusus untuk mengonfigurasi modul non-AMD.
Secara khusus, setiap modul mendefinisikan:
- nilai ekspor (nama variabel output): menunjukkan nama modul saat dipanggil secara eksternal
- array deps: menunjukkan dependensi modul ini
Misalnya, plugin jQuery dapat didefinisikan seperti ini:
require.js plugin
require.js juga menawarkan berbagai plugin yang mengimplementasikan beberapa fitur khusus
Plugin domready memungkinkan fungsi callback berjalan setelah struktur DOM halaman dimuat:
plugin teks dan gambar, yang memungkinkan require.js memuat file teks dan gambar:
Plugin serupa termasuk JSON dan MDOWN untuk memuat file JSON dan Markdown.
|
Diposting pada 11/10/2017 09.31.50
|
|
|
