Memilih JavaScript Asynch-Loader [ditutup]

9

Saya telah melihat berbagai sumber daya yang tidak sinkron dan saya tidak yakin yang mana yang akan digunakan. Di mana saya bekerja, kami memiliki upaya kelompok yang berbeda yang modul-kelasnya dapat menggunakan versi jQuery yang berbeda (dll). Dengan demikian, dependensi bersarang mungkin berbeda, juga. Saya tidak punya kendali atas ini, jadi ini berarti saya perlu memuat sumber daya secara dinamis yang mungkin menggunakan versi alternatif dari perpustakaan yang sama.

Karena itu, inilah persyaratan saya:

  1. Memuat file sumber JavaScript dan CSS secara tidak sinkron.
  2. Kelola ketergantungan-urutan dan ketergantungan-bersarang di seluruh versi.
  3. Mendeteksi jika sumber daya sudah dimuat.
  4. Harus memungkinkan pemuatan lintas domain (CDN)
  5. (opsional) Izinkan kami membongkar sumber daya.

Saya telah melihat:

Saya mungkin bisa memalsukan persyaratan ini sendiri dengan memuat versi ke variabel dengan namespace dengan benar & menggunakan array untuk melacak apa yang sudah dimuat ... tapi (semoga) seseorang telah menemukan ini.

Jadi pertanyaan saya adalah:

  • Yang mana yang Anda gunakan? Dan mengapa?
  • Apakah ada orang lain yang memenuhi persyaratan saya sepenuhnya?
  • Apa yang menurut Anda paling fasih dan paling mudah untuk dikerjakan? Dan mengapa?

UPDATE:
Bagi mereka yang tertarik, saya mencoba semua perpustakaan AMD di atas (dan banyak lagi). Pada akhirnya, saya pergi dengan RequireJS . Secara keseluruhan lebih bersih dan lebih mudah ... dan saya senang menggunakannya.

learning javascript resources async Tahanan NOL
sumber
Untuk JavaScript, saya pikir # 5 bahkan tidak mungkin. Mungkin secara teori dimungkinkan untuk CSS, tetapi saya tidak yakin apakah ada browser yang mendukungnya.
Mike Baranczak
@ Mike Terima kasih telah berkomentar! Jika asynch-loader dilacak & diisi sumber daya menggunakan variabel-objek ... itu benar-benar mungkin.
Tahanan NOL
Benar, tetapi konstruktor BARU akan menduplikasi objek, jadi jika Anda membuat sesuatu yang baru Anda panggil, itu masih akan ada di sana. Mengapa Anda menurunkannya?
Incognito
@ user1525 Terima kasih telah berkomentar! Membongkar sumber daya menghemat memori. Saya akan mengedit pertanyaan saya di atas dengan beberapa pemikiran pada komentar Anda (dalam beberapa menit). Terima kasih lagi!
Tahanan NOL
jQuery sudah memiliki getScriptfungsi untuk injeksi skrip.
zzzzBov

Jawaban:

7

Saya telah menggunakan RequireJS pada proyek-proyek serius, dan saya menyukainya, tetapi itu tidak benar-benar dimaksudkan untuk menjadi pemuat asinkron. Ini benar-benar dimaksudkan sebagai sistem modul. Pemuatan asinkron disediakan untuk tujuan tersebut. Itu dapat didorong untuk memenuhi salah satu persyaratan Anda, tetapi layanan pemuatannya dirancang untuk memuat modul, bukan file yang sewenang-wenang.

Memuat file sumber JavaScript dan CSS secara asinkron : Requirejs memuat modul apa pun yang Anda perlukan menggunakan injeksi tag skrip, jadi tidak sinkron.

Kelola dependensi-urutan dan ketergantungan-bersarang di seluruh versi : Di sinilah RequireJS Shines. Modul dapat mendeklarasikan dependensi pada modul lain, dan urutan beban akan diekstrapolasi dari deklarasi dependensi itu. Ada juga plugin pesanan, yang dapat memaksa pesanan pada dependensi.

Mendeteksi jika sumber daya sudah dimuat : Requirejs hanya akan memuat modul sekali.

Harus memungkinkan untuk memuat lintas domain (CDN) : Ini mungkin, tetapi memerlukan beberapa konfigurasi; Anda dapat menetapkan URL spesifik untuk modul apa pun, dan itu akan mengesampingkan lokasi default, sehingga Anda dapat mengaturnya ke CDN.

RequireJS akan berfungsi paling baik jika Anda menulis modul menggunakan formatnya, dan paling tidak efektif jika Anda menggunakannya untuk memuat javascript mentah.

Ini juga menyediakan proses pembuatan yang akan menggabungkan modul Anda bersama menjadi satu file untuk produksi.

Sean McMillan
sumber
3

Secara teori Anda dapat menyimpan daftar skrip yang sudah dimuat, dan membuat fungsi yang memuat skrip yang belum dimuat.

http://jsfiddle.net/BDG/Dhdu7/2/

Penyamaran
sumber
2
Atau gunakan Curl / RequireJS mereka memiliki ini dan lebih banyak fitur. Dan Anda tidak harus memeliharanya sendiri;)
Raynos
Anda lupa menyebutkan struktur yang jelas dan non-relatif termasuk.
Incognito
2

Jika Anda melihat RequireJS dan ingin bergantung pada file CSS, Anda dapat checkout plugin CSSP RequireJS :

CSS dengan Padding. Proyek ini mengimplementasikan plugin untuk proyek RequireJS yang memungkinkan modul untuk mendaftar file CSS sebagai dependensi. Ini memungkinkan RequireJS untuk menunggu sampai aturan gaya tertentu diketahui berlaku sebelum modul JavaScript dirilis untuk dievaluasi. Ini akan berguna jika, misalnya, jika modul JavaScript Anda memerlukan aturan CSS tertentu, yang didefinisikan dalam file terpisah, untuk diterapkan pada DOM sebelum dapat diinisialisasi.

Pete O
sumber