Apa yang Baru di jQuery 3 - 10 Fitur Paling Keren
jQuery 3.0, rilis besar baru jQuery akhirnya dirilis. Komunitas pengembang web menunggu langkah penting ini sejak Oktober 2014, ketika tim jQuery mulai mengerjakan versi utama baru hingga sekarang, Juni 2016, ketika rilis terakhir keluar.
Catatan rilis menjanjikan a lebih ramping dan lebih cepat jQuery, dengan kompatibilitas mundur dalam pikiran. Dalam posting ini, kita melihat beberapa fitur baru jQuery 3.0 untuk memberi Anda gambaran tentang bagaimana hal itu mengubah lanskap JavaScript.
Mulai dari mana
Jika Anda ingin mengunduh jQuery 3.0 untuk bereksperimen sendiri, langsung ke halaman unduhan. Ada baiknya juga melihat Panduan Upgrade, atau kode sumber.
Jika Anda ingin menguji bagaimana proyek Anda saat ini bekerja dengan jQuery 3.0, Anda dapat mencoba plugin jQuery Migrate yang mengidentifikasi masalah kompatibilitas dalam kode Anda. Anda juga bisa mengintip tonggak sejarah masa depan.
Artikel ini tidak mencakup semua fitur baru jQuery 3.0, hanya yang lebih menarik: kualitas kode yang lebih baik, integrasi fitur ECMAScript 6 baru, API baru untuk animasi, metode baru untuk keluar dari string, peningkatan dukungan SVG, peningkatan panggilan balik async, kompatibilitas yang lebih baik dengan situs responsif , dan peningkatan keamanan.
1. Solusi IE Lama Dihapus
Salah satu tujuan utama dari rilis utama baru adalah untuk membuatnya lebih cepat dan lebih ramping, Oleh karena itu peretasan dan pemecahan masalah lama terkait dengan IE9- dihapus. Ini berarti jika Anda ingin atau perlu mendukung IE6-8, Anda harus tetap menggunakan yang terbaru 1.12 rilis, bahkan 2.x seri tidak memiliki dukungan penuh untuk Internet Explorer lama (IE9-). Lihat catatan tentang dukungan browser di dokumen.
Perhatikan bahwa ada juga banyak fitur usang di jQuery 3. Kelemahan besar dari Panduan Upgrade adalah bahwa fitur-fitur yang sudah usang - pada Juni 2016 - tidak dikelompokkan, jadi jika Anda tertarik pada mereka, Anda harus mencarinya dengan alat pencarian browser Anda ( Ctrl + F).
2. jQuery 3.0 Berjalan dalam Mode Ketat
Karena sebagian besar browser yang didukung oleh jQuery 3 mendukung mode ketat, rilis utama baru telah dibuat dengan arahan ini dalam pikiran.
Meskipun jQuery 3 telah ditulis dalam mode ketat, penting untuk mengetahui hal itu kode Anda tidak perlu dijalankan dalam mode ketat, jadi kamu tidak perlu menulis ulang kode jQuery Anda yang ada jika Anda ingin bermigrasi ke jQuery 3. JavaScript mode yang ketat & tidak ketat bisa dengan senang hati hidup berdampingan.
Ada satu pengecualian: beberapa versi ASP.NET itu - karena mode ketat - adalah tidak kompatibel dengan jQuery 3. Jika Anda terlibat dengan ASP.NET, Anda dapat melihat detailnya di dokumen ini.
3. Untuk ... dari Loops Diperkenalkan
jQuery 3 mendukung untuk ... pernyataan, jenis baru untuk loop, diperkenalkan dalam ECMAScript 6. Ini memberikan cara yang lebih mudah untuk loop di atas objek iterable, seperti Array, Maps, dan Sets.
Di jQuery, the untuk ... dari loop dapat menggantikan yang sebelumnya $ .each (...) sintaks, dan dapat membuatnya lebih mudah untuk mengulang elemen koleksi jQuery.
Perhatikan bahwa untuk ... dari loop akan Hanya bekerja baik di lingkungan itu mendukung ECMAScript 6, atau jika Anda menggunakan kompiler JavaScript seperti Babel.
4. Animasi Mendapat API Baru
jQuery 3 menggunakan API requestAnimationFrame () untuk melakukan animasi, membuat animasi berjalan lebih lancar dan lebih cepat. API baru hanya digunakan di browser yang mendukungnya; untuk browser yang lebih lama (yaitu IE9) jQuery menggunakan API sebelumnya sebagai metode mundur untuk menampilkan animasi.
RequestAnimationFrame telah keluar untuk sementara waktu, jika Anda tertarik dengan apa yang diketahui atau mengapa Anda harus menggunakannya, Trik CSS memiliki postingan yang bagus tentang itu.
5. Metode Baru untuk Melawan String dengan Makna Khusus
Yang baru jQuery.escapeSelector () Metode memungkinkan Anda untuk menghindari string atau karakter itu berarti sesuatu yang lain di CSS agar dapat gunakan di pemilih-jQuery; tanpa melarikan diri, penerjemah JavaScript tidak dapat memahaminya dengan benar.
Dokumen membantu kami memahami metode ini dengan lebih baik dengan contoh berikut:
“Misalnya, jika elemen pada halaman memiliki id “abc.def” tidak dapat dipilih dengan $ ("# abc.def") karena pemilih diurai sebagai “sebuah elemen dengan id 'abc' yang juga memiliki kelas 'def'. Namun, itu bisa dipilih dengan $ ("#" + $ .escapeSelector ("abc.def")).”
Saya tidak yakin seberapa sering kasus seperti itu terjadi, tetapi jika Anda menemukan masalah seperti ini, sekarang Anda memiliki cara mudah untuk memperbaikinya dengan cepat.
6. Metode Manipulasi Kelas Mendukung SVG
Sayangnya, jQuery 3 masih ada tidak sepenuhnya mendukung SVG, tetapi metode jQuery yang memanipulasi nama kelas CSS, seperti .addClass () dan .hasClass (), sekarang bisa digunakan untuk targetkan dokumen SVG demikian juga. Ini berarti Anda dapat memodifikasi (menambah, menghapus, mengganti) atau menemukan kelas dengan jQuery dalam Scalable Vector Graphics, lalu tata kelas dengan CSS.
7. Objek yang Ditangguhkan Sekarang Kompatibel dengan Janji-janji JS
Janji JavaScript - objek yang digunakan untuk perhitungan asinkron - telah distandarisasi dalam ECMAScript 6; perilaku dan fitur mereka ditentukan dalam standar Janji / A +.
Di jQuery 3, Objek yang ditangguhkan telah dibuat kompatibel dengan standar Janji / A + baru. Tangguhan adalah benda yang bisa dirantai yang memungkinkan untuk buat antrean panggilan balik.
Fitur baru berubah bagaimana fungsi panggil balik asinkron dijalankan; Janji memungkinkan pengembang untuk menulis kode asinkron yang lebih dekat dalam logika ke kode sinkron.
Lihat contoh kode dari Panduan Upgrade atau, lihat tutorial Scotch.io yang luar biasa ini tentang dasar-dasar Janji JavaScript.
8. jQuery.when () Mengartikan Multi-Argumen Secara Berbeda
Itu $ .when () Metode menyediakan cara untuk menjalankan fungsi panggilan balik. Itu bagian dari jQuery sejak versi 1.5. Ini metode yang fleksibel; ini juga berfungsi dengan argumen nol, dan dapat menerima satu atau lebih objek sebagai argumen juga.
jQuery 3 mengubah cara argumen $ .when () ditafsirkan ketika mengandung $ .then () metode dengan mana Anda bisa meneruskan panggilan balik tambahan sebagai argumen ke $ .when () metode.
Di jQuery 3, jika Anda menambahkan argumen input dengan kemudian() metode untuk $ .when (), argumennya akan ditafsirkan sebagai "kompatibel" yang kompatibel dengan Janji.
Ini berarti bahwa $ .ketika Metode akan dapat menerima berbagai masukan asrama, seperti ES6 Promises dan Bluebird Promises asli, yang memungkinkan untuk menulis panggilan balik asinkron yang lebih canggih.
9. Tampilkan Baru / Sembunyikan Logika
Agar meningkat kompatibilitas dengan desain responsif, kode yang terkait dengan menunjukkan dan menyembunyikan elemen telah diperbarui di jQuery 3.
Mulai sekarang, .menunjukkan(), .menyembunyikan(), dan .beralih () metode akan fokus pada gaya sejajar, alih-alih gaya yang dihitung, dengan cara ini mereka akan melakukannya perubahan stylesheet hormat yang lebih baik.
Kode baru menghormati tampilan nilai stylesheet kapan pun memungkinkan, yang artinya aturan CSS bisa berubah secara dinamis pada peristiwa seperti reorientasi perangkat dan pengubahan ukuran jendela.
Dokumen menegaskan bahwa hasil paling penting adalah:
"Akibatnya, elemen yang terputus adalah tidak lagi dianggap tersembunyi kecuali mereka memiliki inline display: tidak ada;, dan oleh karena itu .beralih () akan tidak lagi membedakan mereka dari elemen yang terhubung pada jQuery 3.0. "
Jika Anda ingin lebih memahami hasil dari logika tampilkan / sembunyikan yang baru, di sini ada diskusi Github yang menarik tentang itu.
Pengembang jQuery juga menerbitkan tabel Google Documents tentang cara kerja perilaku baru dalam berbagai kasus penggunaan.
10. Perlindungan Ekstra Terhadap Serangan XSS
jQuery 3 menambahkan lapisan keamanan ekstra terhadap serangan Cross-Site Scripting (XSS) dengan meminta pengembang untuk menentukan dataType: "script" dalam opsi $ .ajax () dan $ .get () metode.
Dengan kata lain, jika Anda ingin menjalankan permintaan skrip lintas-domain, Anda harus menyatakan ini dalam pengaturan metode ini.
Menurut dokumen, persyaratan baru ini berguna ketika sebuah situs "" jauh memberikan konten non-skrip tetapi kemudian memutuskan untuk melayani skrip yang memiliki niat jahat"Perubahan itu tidak memengaruhi $ .getScript () metode, karena mengatur dataType: "script" opsi secara eksplisit.
