Laman » Pengekodan » Apa yang baru dalam jQuery 3 - 10 Ciri-ciri yang Paling Hebat

    Apa yang baru dalam jQuery 3 - 10 Ciri-ciri yang Paling Hebat

    jQuery 3.0, jQuery utama yang baru dikeluarkan akhirnya dikeluarkan. Komuniti pemaju web menunggu langkah penting ini sejak Oktober 2014, apabila pasukan jQuery mula bekerja pada versi utama yang baru hingga sekarang, Jun 2016, ketika keluaran terakhir keluar.

    Nota pelepas menjanjikan a langsing dan lebih cepat jQuery, dengan keserasian ke belakang dalam fikiran. Dalam siaran ini, kita melihat beberapa ciri baru jQuery 3.0 untuk memberikan anda gambaran tentang bagaimana ia mengubah landskap JavaScript.

    Di mana Mulakan

    Jika anda ingin memuat turun jQuery 3.0 untuk mencuba sendiri, terus ke halaman muat turun. Ia juga bernilai melihat Panduan Peningkatan, atau kod sumber.

    Jika anda ingin menguji bagaimana projek sedia ada anda berfungsi dengan jQuery 3.0, anda boleh mencuba plugin jQuery Migrate yang mengenal pasti isu-isu keserasian dalam kod anda. Anda juga boleh melihat ke arah pencapaian masa hadapan.

    Artikel ini tidak dilindungi semua ciri baru jQuery 3.0, hanya yang lebih menarik: kualiti kod yang lebih baik, integrasi ciri ECMAScript 6 baru, API baru untuk animasi, kaedah baru untuk melarikan diri rentetan, meningkatkan sokongan SVG, panggilan balik async yang lebih baik, keserasian yang lebih baik dengan laman responsif , dan peningkatan keselamatan.

    1. Old IE Workarounds Got Removed

    Salah satu matlamat utama pelepasan utama baru adalah untuk menjadikannya lebih pantas dan lebih licin, oleh itu hacks lama dan penyelesaian yang berkaitan dengan IE9- telah dikeluarkan. Ini bermakna jika anda mahu atau perlu menyokong IE6-8, anda perlu terus menggunakan yang terkini 1.12 melepaskan, sebagaimana juga 2.x siri tidak mempunyai sokongan penuh untuk Penjelajah Internet yang lebih tua (IE9-). Semak nota pada sokongan penyemak imbas dalam dokumen.

    Dokumen jQuery: Sokongan Penyemak Imbas

    Perhatikan bahawa terdapat juga ciri-ciri yang tidak digunakan lagi dalam jQuery 3. Kekurangan yang besar dalam Panduan Penaiktarafan adalah ciri-ciri yang tidak digunakan - sehingga Jun 2016 - tidak dikumpulkan, jadi jika anda berminat dengannya, anda perlu melihatnya dengan alat carian pelayar anda ( Ctrl + F).

    Panduan Peningkatan jQuery

    2. jQuery 3.0 Menjalankan dalam Mod Strict

    Oleh kerana kebanyakan pelayar yang disokong oleh jQuery 3 menyokong mod ketat, pelepasan utama baru telah dibina dengan arahan ini dalam fikiran.

    Walaupun jQuery 3 telah ditulis dalam mod yang ketat, penting untuk mengetahui kod anda tidak dikehendaki dijalankan dalam mod yang ketat, jadi anda tidak perlu menulis semula kod jQuery anda yang sedia ada jika anda ingin berhijrah ke jQuery 3. JavaScript mod ketat & tidak ketat boleh hidup bersama.

    Terdapat satu pengecualian: beberapa versi ASP.NET itu - kerana mod yang ketat - adalah tidak serasi dengan jQuery 3. Jika anda terlibat dengan ASP.NET, anda boleh melihat butiran di sini di dalam dokumen.

    3. Untuk ... Loops Diperkenalkan

    jQuery 3 menyokong untuk ... pernyataan, jenis baru untuk gelung, diperkenalkan dalam ECMAScript 6. Ia memberikan cara yang lebih mudah untuk gelung ke atas objek yang boleh ditukar, seperti Array, Peta, dan Set.

    Dalam jQuery, yang untuk ... daripada gelung boleh menggantikan bekas $ .each (...) sintaks, dan boleh memudahkan pengulangan melalui unsur-unsur koleksi jQuery.

    Contoh Kod dari Panduan Peningkatan

    Perhatikan bahawa untuk ... daripada gelung akan hanya kerja sama ada dalam persekitaran itu menyokong ECMAScript 6, atau jika anda gunakan pengompil JavaScript seperti Babel.

    4. Animasi Mendapat API Baru

    jQuery 3 menggunakan API requestAnimationFrame () untuk melakukan animasi, membuat animasi berjalan lancar dan lebih laju. API baru hanya digunakan dalam penyemak imbas yang menyokongnya; untuk pelayar yang lebih tua (iaitu IE9) jQuery menggunakan API terdahulu sebagai kaedah sandaran untuk memaparkan animasi.

    PermintaanAnimasiFrame telah keluar untuk seketika, jika anda berminat dengan apa yang diketahui atau mengapa anda harus menggunakannya, CSS Tricks mempunyai jawatan yang baik mengenainya.

    www.caniuse.com

    5. Kaedah Baru untuk Melepaskan Strings dengan Makna Khas

    Baru jQuery.escapeSelector () kaedah membolehkan anda melarikan diri rentetan atau aksara itu bermakna sesuatu yang lain dalam CSS untuk dapat gunakannya dalam pemilih jQuery; tanpa melepaskan jurubahasa JavaScript tidak dapat memahami dengan betul.

    Dokumen ini membantu kami memahami kaedah ini lebih baik dengan contoh berikut:

    Sebagai contoh, jika elemen di halaman mempunyai id “a B C D E F” ia tidak boleh dipilih $ ("# abc.def") kerana pemilih digali sebagai “sebuah elemen dengan id 'abc' yang juga mempunyai kelas 'def'. Walau bagaimanapun, ia boleh dipilih dengan $ ("#" + $ .escapeSelector ("abc.def")).”

    Saya tidak pasti berapa kerap kes itu berlaku, tetapi jika anda menghadapi masalah seperti ini, kini anda mempunyai cara mudah untuk memperbaikinya dengan pantas.

    6. Kaedah Manipulasi Kelas Menyokong SVG

    Malangnya, jQuery 3 masih lagi tidak menyokong sepenuhnya SVG, tetapi kaedah jQuery yang memanipulasi nama kelas CSS, seperti .addClass () dan .hasClass (), kini boleh digunakan untuk Sasaran dokumen SVG juga. Ini bermakna anda boleh mengubah suai (tambah, alih keluar, togol) atau cari kelas dengan jQuery dalam Grafik Vektor Skalable, kemudian gaya kelas dengan CSS.

    7. Objek Ditunda Kini Sempurna dengan Janji JS

    Janji JavaScript - objek yang digunakan untuk pengiraan tidak segerak - telah diseragamkan dalam ECMAScript 6; tingkah laku dan ciri mereka dinyatakan dalam piawaian Janji / A +.

    Dalam jQuery 3, Objek ditangguhkan telah dibuat serasi dengan standard baru Janji / A +. Tertunda adalah objek berantai yang menjadikannya mungkin buat giliran panggilan balik.

    Ciri baru berubah bagaimana fungsi panggil balik asynchronous dilaksanakan; Janji membolehkan pemaju untuk menulis kod asynchronous yang lebih dekat dalam logik kepada kod segerak.

    Lihat contoh kod dari Panduan Peningkatan atau, lihatlah tutorial Scotch.io yang hebat ini tentang asas-asas Janji JavaScript.

    8. jQuery.when () Menafsirkan Berbilang Argumen Berbeza

    The $ .when () kaedah menyediakan cara untuk laksanakan fungsi panggil balik. Ia adalah sebahagian daripada jQuery sejak versi 1.5. Ia adalah kaedah yang fleksibel; ia juga berfungsi dengan argumen sifar, dan ia boleh menerima satu atau lebih objek sebagai argumen juga.

    jQuery 3 mengubah cara bagaimana argumen $ .when () ditafsirkan apabila mereka mengandungi $ .then () kaedah dengan mana anda boleh lulus panggilan balik tambahan sebagai argumen kepada $ .when () kaedah.

    api.jquery.com

    Dalam jQuery 3, jika anda menambah argumen input dengan kemudian () kaedah untuk $ .when (), hujah itu akan ditafsirkan sebagai "menjanjikan".

    Ini bermakna bahawa $ .when kaedah akan dapat menerima pelbagai input asrama, seperti janji-janji ES6 asli dan janji-janji Bluebird, yang membolehkan menulis lebih banyak panggilan balik tanpa segerak yang canggih.

    9. Baru Tunjukkan / Sembunyikan Logik

    Untuk meningkatkan keserasian dengan reka bentuk responsif, kod yang berkaitan dengan menunjukkan dan menyembunyikan elemen telah dikemas kini dalam jQuery 3.

    Mulai sekarang, .tunjukkan (), .sembunyikan (), dan .togol () kaedah akan memberi tumpuan gaya inline, bukannya gaya yang dikira, dengan cara ini mereka akan perubahan stylesheet yang lebih baik menghormati.

    Kod baru menghormati paparan nilai stylesheets bila-bila masa yang mungkin, yang bermaksud bahawa peraturan CSS boleh berubah secara dinamik apabila peristiwa seperti peralihan peranti dan saiz semula tetingkap.

    Dokumen menyatakan bahawa hasil yang paling penting ialah:

    "Hasilnya, elemen terputus adalah tidak lagi dianggap tersembunyi melainkan jika mereka mempunyai sebaris paparan: tiada;, dan oleh itu .togol () akan tidak lagi membezakan mereka daripada elemen yang disambungkan sebagai jQuery 3.0. "

    Sekiranya anda ingin lebih memahami keputusan logik pertunjukan / sembunyi baru, di sini adalah perbincangan Github yang menarik mengenainya.

    Pemaju jQuery juga menerbitkan jadual Google Docs mengenai bagaimana tingkah laku baru akan berfungsi dalam kes penggunaan yang berbeza.

    10. Perlindungan Tambahan Menentang Serangan XSS

    jQuery 3 ditambah lapisan keselamatan tambahan melawan serangan Cross-Site Scripting (XSS) dengan memerlukan pembangun untuk menentukan Jenis data: "skrip" dalam pilihan $ .ajax () dan juga $ .get () kaedah.

    Dengan kata lain, jika anda ingin melaksanakan permintaan skrip domain silang, anda mesti mengisytiharkan ini dalam tetapan kaedah ini.

    Slideshare oleh Andrew Kerr: Scripting Cross-site (slaid 17)

    Menurut dokumen, keperluan baru berguna apabila "tapak terpencil menyampaikan kandungan bukan skrip tetapi kemudian memutuskan untuk berkhidmat skrip yang mempunyai niat jahat"Perubahan tidak menjejaskan $ .getScript () kaedah, kerana ia menetapkan Jenis data: "skrip" pilihan dengan jelas.