Cara mudah untuk cache pemilih dalam objek menggunakan jQuery_jquery

Apabila menggunakan perpustakaan seperti jQuery, pembangun sering menggunakan pemilih untuk mengakses dan memanipulasi elemen dalam DOM. Apabila pilihan diakses berulang kali pada halaman, adalah idea yang baik untuk menyimpannya dalam cache untuk prestasi yang lebih baik.

Mari kita lihat contoh,

jQuery(document).ready(function() {
  jQuery('#some-selector').on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
 
  jQuery('#another-element').on('hover', function() {
    jQuery(this).slideUp();
  });
 
  jQuery('#some-selector').on('click', function() {
    alert('You have clicked a featured element');
  });
 
  jQuery('#another-element').on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

Mungkin anda perasan bahawa 'sesektor-pemilih' dan 'elemen lain' disebut dua kali dalam coretan di atas. Dengan menyimpan pemilih ini ke dalam pembolehubah, anda boleh menjadikannya boleh diguna semula dan mengelakkan operasi pemilihan berulang.

Apabila anda mula mengumpul pelbagai pemilih dalam kod jQuery anda, anda boleh menghargai betapa bagusnya untuk cache pemilih dalam objek - sebagai pasangan nilai kunci. Ini memudahkan anda mengaksesnya dari mana-mana sahaja dalam skrip anda, dan mengekalkan pemilih ini adalah mudah.

Selepas menyimpan cache pemilih, kod yang dipertingkatkan akan kelihatan seperti ini,

var someNamespace_Dom = {
  someSelector : 'jQuery("#some-selector")',
  anotherElement: 'jQuery("#another-element")',
};
 
jQuery(document).ready(function() {
  someNamespace_Dom.someSelector.on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
  someNamespace_Dom.anotherElement.on('hover', function() {
    jQuery(this).slideUp();
  });
  someNamespace_Dom.someSelector.on('click', function() {
    alert('You have clicked a featured element');
  });
  someNamespace_Dom.anotherElement.on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

Memandangkan pemilih telah dicache dalam pembolehubah, pokok DOM tidak lagi perlu dilalui berulang kali untuk mencari elemen yang akan dikendalikan. Objek 'someNamespace_Dom' boleh digunakan untuk menambah lebih banyak pasangan nilai kunci, menjadikan penyelenggaraan mudah.