Panduan ringkas untuk bermula dengan jQuery_jquery

Pengenalan

jQuery boleh dikatakan sebagai perpustakaan javascript ringan yang paling banyak digunakan dalam bidang pembangunan web Bukan sahaja pembangun web profesional menggunakannya, tetapi banyak pembangun web atau peminat web yang baru juga telah disepadukan dengan mudah ke dalam javascript dengan menggunakan pembangunan jQuery .

Dan jika anda ingin menjadi lebih baik dalam hal ini, anda harus belajar dan memahami amalan terbaik. Amalan Terbaik ialah maklumat tentang teknologi terkini dan kaedah pembangunan yang diwujudkan secara beransur-ansur dengan pembangunan bidang teknikal tertentu Ia juga sangat berguna dalam bidang pembangunan web.

Kandungan artikel ini merujuk kepada TIP & Trik Prestasi jQuery daripada jurutera hadapan yang cemerlang Addy Osmani Jika anda berminat, anda juga boleh melihat sendiri PPT ucapan master ini pasukan teras jQuery (pasukan Teras jQuery) salah seorang ahli.
Mengapa anda perlu mengikuti amalan terbaik jQuery

Mencari prestasi dalam bidang pembangunan web tidak akan pernah berhenti. Walaupun jQuery ialah alat pembangunan yang sangat berkuasa, penggunaan yang tidak betul masih akan membawa kerja dan beban tambahan kepada penyemak imbas, dan juga akan menyebabkan aplikasi web yang dibangunkan untuk menduduki lebih banyak sumber sistem dan berjalan lebih perlahan. Dan kita semua tahu bahawa aplikasi web yang baik perlu segar dan fleksibel.

Bagaimana untuk menilai prestasi javascript? Sekarang, ujian prestasi seperti ini boleh diringkaskan sebagai kelajuan berjalan Secara mudah, jika kaedah penulisan tertentu berjalan lebih cepat daripada kaedah penulisan lain untuk fungsi yang sama, maka kaedah penulisan ini boleh mencapai prestasi yang lebih baik. Sudah tentu, ini hanya dipertimbangkan dari perspektif prestasi dan tidak termasuk kebolehselenggaraan kod. Jika anda ingin menguji sendiri prestasi coretan kod JavaScript yang berbeza, adalah disyorkan untuk menggunakan jsPerf.com Tapak ini boleh membantu anda membuat kes ujian prestasi JavaScript dengan mudah, dan juga menyimpan dan berkongsi keputusan ujian. Pasukan jQuery juga menggunakannya untuk ujian prestasi JavaScript.
cadangan penggunaan jQuery
1. Gunakan versi terkini

API yang disediakan oleh versi baharu jQuery akan meningkatkan prestasi dan membetulkan beberapa pepijat sedia ada. Memandangkan banyak tapak web menggunakan jQuery, perubahan pada setiap versi baharu jQuery akan menjalani ujian yang sangat ketat, dan peningkatan secara amnya tidak menyebabkan masalah.

Selain itu, versi baharu jQuery mungkin membuat perubahan yang sangat berguna dalam API untuk memudahkan kerja pembangunan. Contohnya, sebelum jQuery 1.7, pengikatan peristiwa menggunakan kaedah bind(), delegate(), dan live(). Walaupun semuanya adalah pengikatan peristiwa, setiap kaedah mempunyai tujuan tersendiri, yang menimbulkan masalah "bila saya harus menggunakan yang mana?" Bermula dari jQuery 1.7, dua kaedah baharu, on() dan off(), ditambah dan disyorkan untuk melengkapkan semua pengikatan dan penyingkiran acara, yang menjadikannya lebih mudah untuk difahami.
2. Fahami pemilih anda

Dalam jQuery, tidak semua pemilih (Pemilih) mempunyai prestasi yang sama. Dalam erti kata lain, walaupun anda boleh memilih elemen tertentu menggunakan banyak kaedah penulisan pemilih yang berbeza, jangan fikir ia juga sama dari segi prestasi.

Pemilih jQuery berjalan pada kelajuan yang berbeza, daripada terpantas kepada paling perlahan:

• Pemilih ID ($(#ElementId))
• Pemilih elemen ($(borang), $(input), dsb.)
• Pemilih kelas ($(.someClass))
• Kelas pseudo dan pemilih atribut ($(:hidden), $([attribute=value]), dsb.)

Memandangkan kaedah operasi DOM asli yang disokong oleh penyemak imbas (seperti document.getElementById()) tersedia, pemilih ID dan pemilih elemen adalah yang terpantas. Pemilih Kelas yang lebih perlahan adalah kerana IE6-IE8 tidak menyokong getElementsByClassName(), tetapi dalam penyemak imbas moden lain yang menyokong kaedah asli ini, pemilih Kelas masih sangat pantas.

Bagi kelas pseudo dan pemilih atribut yang paling perlahan, ia adalah kerana penyemak imbas tidak menyediakan kaedah asli yang tersedia untuk fungsi yang sepadan. Walaupun jQuery telah cuba menggunakan querySelector() dan querySelectorAll(), dua API pemilih asli (kepunyaan API pertanyaan css) untuk meningkatkan prestasi beberapa pemilih jQuery dalam beberapa pelayar moden, secara keseluruhannya ia masih agak perlahan. Sudah tentu, ini juga kerana jQuery mempunyai keperluan API yang lebih tinggi untuk kelas pseudo dan pemilih atribut Ia bukan sahaja menyokong input[type="text"], pemilih undang-undang dalam CSS, tetapi juga menyokong p:first untuk elemen , tetapi merupakan pemilih haram dalam css. Pendek kata, kelas pseudo dan pemilih atribut jQuery sangat berkuasa, tetapi sila gunakannya dengan berhati-hati.
3. Cache elemen yang anda kendalikan

var parents = $('.parents');
var children = $('.parents').find('.child'); //bad

Caching merujuk kepada menyimpan hasil pemulangan pemilih jQuery supaya mereka boleh dipanggil semula kemudian. Setiap $('.whatever') akan mencari semula DOM dan mengembalikan koleksi jQuery, jadi penggunaan semula dielakkan.

Dalam JavaScript asli, mewujudkan pembolehubah tempatan untuk cache data atau objek adalah bermanfaat untuk memperkemas kod dan mengoptimumkan prestasi. Prinsip yang sama berlaku di sini.
4.Sintaks rantai

var parents = $('.parents').doSomething().doSomethingElse();

jQuery中大部分方法都返回jQuery包装集并支持这种链式语法。javasript的性能优化要点之一是最小化语句数，因此链式语法不仅写起来更容易，运行起来也会更快。
5.使用事件代理

利用事件冒泡，指定一个位于dom较高层级的元素（比如document）的事件处理程序，就可以管理某一类型的所有事件。减少了页面中添加的事件处理程序，自然可以提升整体性能。
6.最小化现场更新

如果你进行操作的DOM部分是已经显示的页面的一部分，那么你就是在进行一个现场更新。现场更新需要浏览器重新计算尺寸，涉及到重绘（repaint）和回流（reflow），有较高的性能花费，因此应减少使用。

在新增内容时，建议先把要新增的代码段合并完全，最后再使用单个append()方法添加到页面。而如果元素存在复杂的交互，比如反复地添加和移除，detach()这个针对性的方法就是最佳的选择。
7.不在不必要的时候使用jQuery方法

$('.nav_link').bind('click', function() {
  console.log('nav id: ' + $(this).attr('id'));  //bad

$.data(elem, key, value);  //significantly faster

};

jQuery方法不一定是最好的方法。这里使用$(this).attr('id')获取当前事件元素的ID，为当前事件元素创建了jQuery包装集，然后调用attr()属性获取方法。但这都是额外的性能花费。事实上，this在事件函数内就表示当前事件元素，直接使用this.id就可以获取元素ID，这种原生DOM属性的写法要更快。
8.适当使用jQuery工具函数

操作jQuery包装集的方法（也就是写在$.fn中的方法），其中一部分也有作为jQuery工具函数（直接写在$中的方法）的同类方法。由于jQuery工具函数在使用中不涉及创建jQuery包装集，因此，在部分情况下，可以通过换用jQuery工具函数提升性能。

比如，在DOM中存储数据，一般的做法是：

$('#elem').data(key, value);  //common way

但改为下边的写法会快很多：

需要的注意的是，虽然下面这种方法更快，但作为参数传入的元素不能用选择符，而要用元素本身。
结语

我自己整理和写本文内容时，也感觉很有收获。jQuery是一个很强大的工具，但进一步说，也只提供了web开发的最基本的内容，更高级更复杂的内容，还需要自己不断学习和创作。在这个过程中，遵循最佳实践，养成良好的习惯，会有很大的益处，并逐渐做得更出色！