Nasihat mesra pemula: Jangan mendalami jQuery

Sebagai editor untuk Nettuts+, saya dapat menyemak banyak kod dalam tutorial yang diserahkan. Walaupun jQuery telah wujud selama bertahun-tahun, terdapat satu kesilapan biasa yang paling kerap saya lihat.

---

Contoh #1

Pertimbangkan kod berikut:

$('.nav a').click(function() {
  $(this).hide();
  $(this).css('color', 'red');
  $(this).show();

  alert('something else');

  $(this).hide();

  return false;
});

Kod di atas terlalu rumit atas beberapa sebab. Jangan risau tentang apa yang sebenarnya dilakukan oleh kod itu (ia membosankan). Sebaliknya, saya mahu anda melihat semua rujukan kepada $(this). $(this) 的引用。

将 DOM 视为一个池。

将 DOM 视为一个池。还记得小时候，你会跳进水池里寻找硬币，而你的父母却表现得好像在旁边看着吗？这将是我们在现实世界中的比较。

每次使用 $('.someClass') 时，jQuery 都会跳转到池 (DOM) 中，并搜索该硬币（或节点）。因此，当您在一个函数中多次引用它时，就会需要大量的潜水。或者，从现实世界的比较来看，这是浪费且不必要的。如果不需要，为什么要调用 jQuery？您应该执行我们所说的“缓存”。

$('.nav a').click(function(e) {
   var anchor = $(this);

   anchor
      .hide()
     .css('color', 'red')
     .show();

   alert('something else');

   anchor.hide();

   e.preventDefault();

});

这样就干净多了。虽然现在现代浏览器引擎的速度快得令人难以置信，并且会尽可能地弥补你糟糕的编码，但你仍然应该努力编写高效的代码，并避免浪费所有精力在池中跳跃。现在，从技术上讲，如果您向 jQuery 传递一个 DOM 节点，例如 this，它不会重新查询 DOM。它只是返回一个 jQuery 对象。

老实说，因为两者之间的性能差异可以忽略不计，所以我们为自己编写了干净的代码。

示例 2

让我们考虑一个稍微复杂一点的例子：选项卡。

$('.tabs li').css('position', 'relative');

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).addClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).css('top', '1px');
});

这个代码到处都是。它很丑陋，而且效率低下。第一个解决办法是摆脱所有 CSS。如果值是动态创建的，则只能在 JavaScript 中放置样式。例如，如果您需要计算元素在屏幕上的精确位置，您可以使用 .css('left',calculatedValue)。在这种情况下，可以将其全部导出到外部样式表。这给我们留下了：

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

接下来，我们为什么要继续在 DOM 中查询 .tabs li 和 $(this)？别再在泳池里跳了。让我们“缓存” .tabs li 的位置。

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

更好了，但我们仍然调用 $(this) 两次，这没什么大不了的。但是，根据我的经验，如果不尽早将其消灭在萌芽状态，这个数字很快就会增加。

var tabs = $('.tabs li');

tabs.click(function() {
   var tab = $(this);
   tabs.removeClass('active');
   tab.addClass('active')
     .load('someHref', function() {} ); // example
});

过滤

另一个（优化程度稍差）选项是使用过滤。

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active')
       .filter(this)
       .addClass('active')
       .load('someHref', function() {} ); // example
});

本例的不同之处在于，我们不是引用 $(this)，而是使用 filter() 方法将列表项的集合减少到仅单击的项.

---

你应该拿走什么

是的，如果您在函数中多次引用 $('.tabs) ，世界不会终结。如今 JavaScript 引擎速度非常快。如果您要测试数千次这样做的性能，执行的差异可能是几百毫秒。但问题仍然存在：你为什么要这么做？

有时，当我们使用像 jQuery 这样的大量抽象时，很容易忘记 $('.tabs') 是一个运行大量代码的实际函数。还应该注意的是，这些概念通常适用于 JavaScript，而不仅仅是 jQuery。

使用上述 caching

Fikirkan DOM sebagai kolam. 🎜

🎜Fikirkan DOM sebagai kolam. Ingat ketika anda masih kecil dan anda akan melompat ke dalam kolam mencari syiling manakala ibu bapa anda bertindak seperti mereka sedang menonton? Ini akan menjadi perbandingan kita di dunia nyata. 🎜 🎜Setiap kali anda menggunakan $('.someClass'), jQuery akan melompat ke dalam kolam (DOM) dan mencari syiling itu (atau nod). Oleh itu, apabila anda merujuknya beberapa kali dalam fungsi, anda akan memerlukan banyak menyelam. Atau, dari perbandingan dunia sebenar, membazir dan tidak perlu. Mengapa memanggil jQuery jika ia tidak diperlukan? Anda harus melakukan apa yang kami panggil "caching". 🎜 rrreee 🎜Ia jauh lebih bersih dengan cara ini. Walaupun enjin penyemak imbas moden kini sangat pantas dan akan melakukan yang terbaik untuk mengimbangi pengekodan anda yang lemah, anda masih harus berusaha untuk menulis kod yang cekap dan mengelakkan pembaziran semua tenaga anda melompat-lompat di dalam kolam. Sekarang, secara teknikalnya, jika anda menghantar jQuery nod DOM, seperti this, ia tidak akan meminta DOM. Ia hanya mengembalikan objek jQuery. 🎜

🎜 Sejujurnya, memandangkan perbezaan prestasi antara kedua-duanya boleh diabaikan, kami menulis sendiri kod bersih. 🎜

🎜Contoh 2🎜 🎜 Mari kita pertimbangkan contoh yang lebih kompleks: tab. 🎜 rrreee 🎜Kod ini ada di mana-mana. Ia hodoh dan tidak cekap. Penyelesaian pertama ialah menyingkirkan semua CSS. Gaya hanya boleh diletakkan dalam JavaScript jika nilai dibuat secara dinamik. Contohnya, jika anda perlu mengira kedudukan tepat elemen pada skrin, anda boleh menggunakan .css('left',calculatedValue). Dalam kes ini, anda boleh mengeksport semuanya ke helaian gaya luaran. Ini meninggalkan kita dengan: 🎜 rrreee 🎜Seterusnya, mengapa kita terus menanyakan .tabs li dan $(this) dalam DOM? Berhenti melompat dalam kolam. Mari "cache" lokasi .tabs li. 🎜 rrreee 🎜Lebih baik, tetapi kami masih memanggil $(this) dua kali, bukan masalah besar. Walau bagaimanapun, dalam pengalaman saya, jika ini tidak diatasi lebih awal, jumlah ini boleh meningkat dengan cepat. 🎜 rrreee

Tapis

🎜Satu lagi pilihan (kurang dioptimumkan) ialah menggunakan penapisan. 🎜 rrreee 🎜Perbezaan dalam contoh ini ialah daripada merujuk $(this), kami menggunakan kaedah filter() untuk mengurangkan koleksi item senarai kepada item yang diklik sahaja. 🎜 🎜 🎜Apa yang perlu anda ambil🎜 🎜Ya, dunia tidak akan berakhir jika anda merujuk $('.tabs) beberapa kali dalam fungsi. Enjin JavaScript sangat pantas hari ini. Jika anda menguji prestasi melakukan ini beribu-ribu kali, perbezaan dalam pelaksanaan boleh menjadi beberapa ratus milisaat. Tetapi persoalannya tetap: mengapa anda melakukan ini? 🎜 Kadangkala, apabila kita bekerja dengan banyak abstraksi seperti jQuery, mudah terlupa bahawa $('.tabs') ialah fungsi sebenar yang menjalankan banyak kod. Perlu diingatkan juga bahawa konsep ini digunakan untuk JavaScript secara umum, bukan hanya jQuery. 🎜 🎜Tulis sendiri kod yang lebih bersih menggunakan teknik caching yang dinyatakan di atas. 🎜

Atas ialah kandungan terperinci Nasihat mesra pemula: Jangan mendalami jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!