7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Mudah Script Loading dengan yepnope.js

Scroll to top
Read Time: 12 mins

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

Resmi dirilis oleh Alex Sexton dan Ralph Holzmann pada akhir Februari 2011, sumber yepnope.js loader fitur asynchronous, bersyarat loading dan prapembebanan JavaScript dan CSS sumber daya. Hal ini membuat mengelola tergantung, kode bersyarat angin.

Dipublish ulang Tutorial

Setiap beberapa minggu, kita kembali beberapa pembaca kami posting favorit dari sepanjang sejarah situs. Tutorial ini pertama kali diterbitkan pada bulan Maret 2011.

Loader nifty sumber daya ini, yang hanya 1.6KB minified dan gzip, sekarang dibundel dengan modernisasi dan besar untuk loading polyfills, prapembebanan atau "priming" cache pengguna, atau sebagai sebuah loader sumber daya asinkron sederhana / filter!

Bagi Anda yang belum terbiasa dengan polyfills, mereka adalah pada dasarnya plugin, atau shims, yang memungkinkan penggunaan baru atau teknologi masa depan di peramban lama, misalnya web sql database, transformasi CSS3 dll.

Yepnope sekarang juga mendukung sejumlah awalan dan filter, yang, ketika prepended ke url sumber, menambahkan lapisan lain fine tuning atau kustomisasi fungsionalitas inti. Seolah ini belum bagus, yepnope juga memberi Anda mekanisme untuk mendefinisikan awalan dan filter Anda sendiri. Mari kita lihat apa yang bisa dilakukan yepnope.js!


Latar belakang - Script Asynchronous pemuatan

YepNopeYepNopeYepNope

Sebelum kita mempelajari yepnope dan fitur-fiturnya, penting untuk memahami sedikit tentang cara kerja pemuatan skrip asinkron, mengapa ini berguna dan bagaimana bedanya dengan pemuatan skrip vanilla.

Loader asinkron menghapus sifat memblokir melekat script.

Biasanya, file JavaScript yang sarat dengan<script></script> Pada gilirannya, jumlah waktu pengguna memiliki menunggu untuk halaman untuk menampilkan meningkat.

Ini adalah di mana asinkron loader datang untuk bermain. Menggunakan salah satu dari beberapa teknik yang berbeda beban, mereka menghapus inherient blokir alam script, yang memungkinkan untuk paralel download JavaScripts dan sumber daya sementara tidak mengganggu rendering halaman. Dalam banyak kasus, ini dapat mengurangi - kadang-kadang secara drastis - halaman beban kali.

Sebagian besar pemuat mempertahankan urutan skrip dijalankan sekaligus memberikan panggilan balik untuk saat skrip dimuat dan siap.

Asynchronous pemuatan tidak datang tanpa peringatan yang, meskipun. Ketika script dimuat dengan cara tradisional, inline kode tidak diurai atau dijalankan sampai skrip eksternal load sepenuhnya, secara berurutan. Hal ini tidak terjadi dengan asynchronous pemuatan. Pada kenyataannya, inline skrip akan biasanya mengurai / mengeksekusi sementara script masih sedang diunduh. Seperti itu juga, browser juga men-download sumber daya dan render halaman seperti script yang dimuat. Dengan demikian, kita dapat tiba di situasi dimana inline code, yang mungkin tergantung pada script / perpustakaan dimuat, dijalankan sebelum ketergantungan siap atau sebelum / setelah DOM itu sendiri sudah siap. Dengan demikian, sebagian besar loader mempertahankan urutan eksekusi skrip sambil memberikan panggilan balik untuk saat skrip dimuat dan siap. Hal ini memungkinkan kita untuk menjalankan tergantung setiap inline kode sebagai panggilan balik, mungkin, dalam bungkus siap DOM, mana yang berlaku.

Juga, ketika berhadapan dengan halaman kecil atau dioptimalkan dengan baik, DOM sebenarnya dapat siap atau bahkan dimuat sebelum skrip sendiri selesai memuat! Jadi, jika halaman yang dipermasalahkan tidak semakin ditingkatkan, karena sangat bergantung pada JavaScript untuk penataan, mungkin ada FOUC atau flash konten yang tidak distyle. Demikian pula, pengguna bahkan dapat mengalami FUBC singkat atau flash konten yang tidak berperilaku. Penting untuk mengingat hal-hal ini setiap kali Anda menggunakan skrip / pemuat sumber daya.


Langkah 1 - Objek Uji yepnope

Objek tes yepnope memiliki tujuh properti dasar, yang semuanya opsional. Objek ini termasuk tes aktual, sumber daya yang akan dimuat sebagai hasil dari tes, sumber daya yang akan dimuat terlepas dari tes serta panggilan balik. Berikut adalah alat peraga benda uji yepnope:

  • uji:

    Boolean mewakili kondisi yang ingin kami uji.

  • Yap:

    Sebuah string atau array / objek string yang mewakili url sumber daya untuk memuat jika tes ini benar.

  • Nope:

    String atau sebuah array / objek string mewakili url sumber daya untuk memuat jika tes ini falsey.

  • load:

    String atau sebuah array / objek string mewakili url sumber daya untuk memuat terlepas dari hasil tes.

  • kedua:

    Sebuah string atau array / objek string yang mewakili url sumber daya untuk memuat terlepas dari hasil tes. Ini, pada dasarnya, gula sintaksis karena fungsinya secara umum sama dengan fungsi load.

  • panggilan balik:

    Fungsi yang akan dipanggil untuk setiap sumber daya seperti hal tersebut dimuat secara berurutan.

  • lengkap:

    Fungsi yang akan dipanggil sekali ketika semua sumber daya yang telah dibuka.

Sekarang, untuk mendapatkan ide dari sintaks, mari kita melihat paling sederhana mungkin penggunaan yepnope: memuat sumber daya tunggal.

... atau mungkin memuat berbagai sumber daya.

Bagaimana tentang obyek harfiah sehingga kita dapat menggunakan bernama callback kemudian?

Ingat, sumber daya ini akan dimuat asynchronously sebagai halaman download dan rendering.


Langkah 2 - ketentuan - pengujian untuk fitur masa depan!

Jadi, kita dapat memuat sumber daya secara tidak sinkron! Itu bagus, tetapi, bagaimana jika beberapa halaman tidak memerlukan sumber daya tertentu? Atau, bagaimana jika sumber daya hanya diperlukan di browser tertentu yang tidak mendukung teknologi baru yang canggih?

Tidak ada masalah! Ini adalah tempat tujuan mendasar yepnope yang datang ke dalam fokus. Menggunakan tes properti, kami dapat kondisional memuat sumber daya berdasarkan kebutuhan. Sebagai contoh, mari kita asumsikan bahwa perpustakaan modernisasi penuh.

Bagi Anda yang belum terbiasa dengan modernisasi, itu adalah suite nifty tes yang digunakan untuk mendeteksi HTML5 dan CSS3 fitur dukungan di browser.

Modernisasi menambahkan sesuai classnames untuk elemen html halaman, mewakili fitur yang didukung dan tidak didukung, misalnya "js flexbox no-kanvas" dll. Selain itu, Anda dapat mengakses setiap modernisasi tes, yang kembali nilai-nilai boolean, secara individual, dalam kode Anda.

Jadi, menggunakan modernisasi, mari kita uji untuk hashchange event dukungan serta sesi sejarah dukungan!

Berikut adalah melihat tes kami:

Tes ini akan, tentu saja, kembali benar hanya jika browser mendukung kedua fitur tersebut.


Langkah 3 - Loading sumber daya kondisional

Dengan set kondisi pengujian kami, kami sekarang akan menentukan sumber daya mana yang akan memuat berdasarkan hasil pengujian ini. Dengan kata lain, jika Anda hanya perlu memuat sumber daya tertentu ketika browser tidak memiliki fitur, atau pengujian gagal, Anda dapat dengan mudah mendefinisikan sumber daya di nope klausa. Sebaliknya, Anda dapat memuat sumber daya ketika melewati ujian, dalam Yap klausa.

Jadi, dengan asumsi browser tidak mendukung salah satu dari kedua fitur ini, kami akan beban Ben Alman plugin jQuery hashchange, yang memungkinkan hashchange dan sejarah dukungan di peramban lama yang tidak mendukung salah satu fitur ini.

Mari kita memuat hashchange plugin:

Dalam contoh di atas, kami tidak akan menggunakan properti yep karena kami hanya menyediakan shim jika diperlukan.

Untuk menggambarkan Yap klausul, meskipun, mari kita uji untuk dukungan transformasi CSS3 dan kemudian memuat stylesheet untuk browser yang mendukung transformasi dan vanili stylesheet untuk browser yang tidak. Selain itu, kami akan memuat sebuah plugin jQuery yang meniru transformasi CSS3 juga.

Menggunakan kedua ya dan tidak:

Perhatikan bahwa kedua contoh-contoh ini akan memuat semua sumber daya asynchronously sebagai sisa halaman download dan menuliskan!


Langkah 4 - Loading sumber terlepas dari kondisi ujian

Yepnope juga menyediakan cara untuk memuat sumber daya secara independen dari hasil pengujian melalui properti load. Fungsi load akan selalu memuat sumber daya apa pun yang diumpankan, terlepas dari hasil test. Demikian pula, kedua prop, yang adalah, sekali lagi, pada dasarnya hanya sintaksis gula, juga banyak sumber daya apapun hasil tes, atau lebih tepatnya, hasil baik.

Loading secara default:

Loading kondisi kedua, sintaksis gula:

Dalam kedua contoh di atas, sumber daya akan dimuat, asinkron, apa pun yang terjadi.


Langkah 5 - callback - kode tergantung setelah beban

Seperti disebutkan sebelumnya, kami tidak dapat menulis kode dalam baris dengan cara yang biasa jika kode itu tergantung pada salah satu script dimuat. Dengan demikian, kita akan menggunakan fungsi panggilan balik yepnope's yang kebakaran sekali untuk setiap sumber daya setelah itu selesai loading. Fungsi panggilan balik menerima tiga parameter yang ditugaskan sebagai berikut:

  • URL

    String ini mewakili url sumber-daya yang penuh

  • hasil

    Boolean mewakili status beban.

  • saya?

    Jika menggunakan array atau objek sumber daya, ini akan mewakili indeks atau nama file yang penuh properti

Mari kita lihat di callback sederhana dengan contoh plugin hashchange dari sebelumnya. Kami akan menggunakan jQuery's mengikat metode untuk mengikat penangan untuk acara hashchange jendela:

Callback sederhana:

Terlepas dari apa negara DOM di, callback ini, yang dalam kasus khusus ini dalam bungkus siap dokumen, akan api sebagai sumber daya tersebut dimuat.

Mari kita mengatakan, bagaimanapun, bahwa kami yang memuat lebih dari satu skrip dan bahwa kita perlu untuk api dari callback untuk setiap script seperti beban. Menspesifikasi kode kita perlu menjalankan cara di atas akan membuat redundansi callback dipecat setiap kali sumber daya yang dimuat. Yepnope, namun, menyediakan cara yang baik untuk menangani callback untuk setiap sumber daya, secara independen setiap callback lain.

Dengan menggunakan obyek harfiah untuk menentukan sumber daya kami yang memuat, kami dapat referensi setiap tombol daya, secara individual, dalam balik.

Mari Lihat contoh di mana kami memuat jQuery serta hashchange jQuery plugin, yang tergantung pada jQuery sedang dimuat pertama. Saat ini, namun, kami akan menggunakan objek literal!

Menggunakan contoh di atas sebagai referensi, Anda dapat menerapkan sendiri callback untuk setiap sumber daya beban secara teratur.


Langkah 6 - lengkap - ketika semuanya telah dikatakan dan dilakukan!

Akhirnya, kami memiliki lengkap callback yang hanya disebut sekali, setelah semua sumber daya selesai loading. Jadi, misalnya, jika Anda sedang "bootstrap" aplikasi web dan kode yang Anda butuhkan untuk menjalankan tergantung pada semua file Anda sedang loading, bukan menentukan callback untuk setiap sumber daya, Anda akan menulis kode dalam balik lengkap sehingga hanya dipecat sekali, setelah semua dependensi telah dimuat. Berbeda dengan fungsi callback, complete tidak mengambil parameter apa pun atau memiliki akses ke url, result, atau key props.

Callback lengkap:

Jadi, pada dasarnya, callback lengkap berguna untuk apa-apa yang harus dilakukan setelah semua sumber daya yang dimuat.


Langkah 7 - Yepnope plugin, awalan dan banyak lagi!

Yepnope juga menyediakan kami dengan fitur kecil nifty yang lain: awalan dan filter! Dengan awalan standar yang disediakan oleh yepnope, yang selalu prepended ke awal url sumber, yang digunakan untuk mendefinisikan sebuah file sebagai CSS, prapembebanan sumber daya atau penargetan Internet Explorer atau salah satu yang versi, masing-masing. Kita akan melihat:

  • CSS!

    Awalan ini digunakan untuk memaksa yepnope untuk memperlakukan sumber daya sebagai stylesheet. Secara default, yepnope memperlakukan file .css sebagai stylesheet dan segala sesuatu yang lain sebagai JavaScript file. Jadi, jika Anda melayani sampai CSS secara dinamis, awalan ini akan memaksa yepnope untuk memperlakukan sumber daya sebagai stylesheet.

  • preload!

    Awalan ini memungkinkan Anda untuk memuat / cache sumber daya tanpa mengeksekusinya.

  • yaitu!

    Mungkin ada keadaan dimana Anda perlu memuat sumber daya spesifik hanya jika Anda bekerja dengan Internet Explorer atau versi tertentu dari Internet Explorer. Dengan demikian, yaitu awalan membantu Anda target sumber loading untuk ie atau versi tertentu itu. Berikut adalah daftar didukung yaitu awalan mana gt singkatan "versi lebih besar dari" dan lt singkatan "versi kurang".

    • Internet Explorer:
      yaitu!
    • Internet Explorer oleh nomor versi:
      IE5!, ie6!, ie7!, ie8!, ie9!
    • Internet Explorer versi lebih besar dari:
      iegt5!, iegt6!, iegt7!, iegt8!
    • Internet Explorer versi kurang dari:
      ielt7!, ielt8!, ielt9!

    Semua filter ini chainable dan berfungsi sebagai semacam OR operator dalam bahwa jika salah satu dari mereka mengevaluasi untuk benar sumber daya yang akan dimuat. Jadi, harus kita perlu target ie7 dan ie8, kita akan hanya menambahkan filter yang sesuai ke url sumber daya sebagai berikut:

Menciptakan filter Anda sendiri!

Jika perlu, yepnope juga menyediakan sarana untuk membuat filter dan awalan Anda sendiri melalui metode addFilter dan addPrefix. Setiap filter atau awalan Anda membuat dilewatkan resourceObject mengandung sejumlah alat peraga berguna. Ingat, meskipun, untuk kembali resourceObject sebagai yepnope membutuhkan bahwa Anda melakukannya. Berikut adalah melihat resourceObject:

  • URL:

    Url sumber dimuat.

  • awalan

    Array awalan diterapkan.

  • autoCallback

    Callback yang berjalan setelah setiap script load, terpisah dari yang lain.

  • noexec

    Nilai boolean yang memaksa preload tanpa eksekusi.

  • Sebaliknya

    Fungsi lanjutan yang menggunakan parameter yang sama dengan loader.

  • forceJS

    Boolean memaksa sumber harus diperlakukan sebagai javascript.

  • forceCSS

    Boolean memaksa sumber harus diperlakukan sebagai stylesheet.

  • Bypass

    Boolean yang menentukan apakah atau tidak memuat sumber saat ini

Katakanlah, misalnya, Anda ingin kemampuan untuk beralih pemuatan sumber daya antara CDN dan server web Anda, dengan cepat. Bisakah kita melakukan itu !? Ya! Mari kita membuat dua awalan, satu untuk memuat dari CDN dan yang lainnya untuk memuat dari server web Anda.

Menggunakan prefiks ini, kita bisa sekarang dengan mudah beralih antara server CDN dan web kami!


Langkah 8 - beberapa keberatan

Jadi, sambil mempertahankan footprint yang sangat kecil, loader bersyarat yepnope kekuatan-dikemas dengan sejumlah fitur berguna! Namun, ada beberapa hal yang Anda harus menyadari sebelum menggunakannya.

  • Document.write tidak

    Seperti dengan setiap loader asinkron, Anda tidak dapat menggunakan document.write.

  • Internet Explorer kurang dari 9 dan eksekusi callback

    Internet Explorer versi kurang dari sembilan tidak menjamin bahwa callback berjalan segera setelah kebakaran skrip yang terkait.

  • Berhati-hati dengan DOM

    Skrip dapat dimuat dan dijalankan sebelum DOM sudah siap. Jadi, jika Anda akan memanipulasi DOM, disarankan untuk menggunakan pembungkus siap DOM.

  • Anda masih harus menggabungkan mana Anda dapat

    Hanya karena Anda menggunakan loader asinkron tidak berarti bahwa Anda tidak boleh menggabungkan sumber daya Anda di mana Anda dapat.

  • Internet Explorer asynchronous beban batas

    Versi Internet Explorer hanya dapat memuat dua sumber daya dari domain yang sama pada saat yang sama, dimana sebagai lain versi dapat memuat hingga enam. Jadi, jika Anda sedang loading beberapa file, pertimbangkan menggunakan subdomain atau CDN.


Kesimpulan - pikiran pada yepnope.js

Semua dalam semua, saya menemukan yepnope untuk menjadi utilitas yang besar! Tidak hanya mendukung asynchronous pemuatan skrip dan stylesheet, tetapi ia menyediakan Anda dengan cara yang bagus, bersih untuk memuat polyfills HTML5 dan CSS3 kondisional. Mekanisme panggilan balik dipikirkan dengan baik dan kemampuan untuk menambahkan awalan dan filter Anda sendiri sangat bagus! Dari segi kinerja, saya menemukan bahwa agak mirip dengan loader lainnya, seperti LABjs Getify Solutions dan require.js James Burke. Jelas, loader masing-masing berbeda dan sesuai dengan kebutuhan tetapi jika Anda belum, saya mendorong Anda untuk memberikan yepnope.js pergi!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.