Prinsip pelaksanaan PushStack dan contoh aplikasi dalam jQuery_jquery

pushStack ialah fungsi yang sangat penting dalam kernel jQuery. Ia sangat penting sehingga ia kerap digunakan dalam banyak fungsi dalaman jQuery. Dalam keadaan biasa, walaupun ia jarang digunakan, menguasai fungsi ini bukan sahaja membantu untuk memahami prinsip operasi jQuery, tetapi juga memudahkan kami melakukan operasi jQuery yang lebih maju.

Seperti namanya, pushStack ialah tindanan tekan Sebagai struktur data, tindanan ialah jadual linear khas yang hanya boleh melakukan operasi sisipan dan pemadaman pada satu hujung. Apabila data ditolak ke dalam timbunan, ia sama seperti semasa kita memasuki lif, masuk terakhir, keluar dahulu, seperti yang ditunjukkan di bawah:

Timbunan dalam jQuery sebenarnya bukan timbunan sebenar Sebaliknya, ia melampirkan atribut pada objek jQuery, menunjuk ke objek sebelumnya bagi objek semasa, dan elemen sebelumnya boleh dikembalikan melalui kaedah akhir. Seperti berikut:

<span>1</span>
<span>2</span>
<span>3</span>
<script>
$('span').eq(0).css('fontSize','20px').end().fadeOut(2000);
</script>

Kod di atas akan menjadikan saiz fon rentang pertama 20px dan menjadikan semua rentang menjadi pudar dalam masa 2 saat.

pushStack ialah kaedah contoh jQuery dan dipanggil melalui objek jQuery, seperti menetapkan latar belakang semua div melalui $().pushStack(document.getElementsByTagName('div')).css('background',' biru') adalah biru. Jadi apakah prinsip pushStack, dan mengapa objek DOM masuk boleh dimanipulasi dengan kaedah css? Mari kita lihat dahulu kod sumber pushStack dalam jQuery:

pushStack: function( elems ) {
 // Build a new jQuery matched element set
 var ret = jQuery.merge( this.constructor(), elems );
 // Add the old object onto the stack (as a reference)
 ret.prevObject = this;
 ret.context = this.context;
 // Return the newly-formed element set
 return ret;
}
//jQuery.merge
merge: function( first, second ) {
 var l = second.length,
 i = first.length,
 j = 0;
 if ( typeof l === "number" ) {
 for ( ; j < l; j++ ) {
  first[ i++ ] = second[ j ];
 }
 } else {
 while ( second[j] !== undefined ) {
  first[ i++ ] = second[ j++ ];
 }
 }
 first.length = i;
 return first;
}

Pelaksanaan pushStack agak mudah, terutamanya melibatkan gabungan kaedah statik jQuery Kaedah ini digunakan untuk menggabungkan objek Idea reka bentuk adalah untuk menambahkan atribut (0 hingga n) objek kedua berdasarkan objek pertama . Naik, penting untuk memahami ini. Kembali ke fungsi pushStack, mula-mula tentukan ret pembolehubah tempatan untuk menyimpan objek yang digabungkan, kemudian simpan atribut prevObject dan konteks untuk objek ini, dan akhirnya kembalikan objek ret yang digabungkan. Berikut ialah beberapa perkara yang perlu diambil perhatian:
1. this.constructor ialah init pembina jQuery, jadi this.constructor() mengembalikan objek jQuery.
2. Memandangkan objek yang dikembalikan oleh fungsi gabungan jQuery ialah fungsi kedua yang dilampirkan pada yang pertama, ret juga merupakan objek jQuery Ini boleh menjelaskan mengapa objek DOM masuk dan keluar dari pushStack juga boleh dikendalikan dengan kaedah CSS.
3. Sifat prevObject objek yang dikembalikan menghala ke objek sebelumnya, jadi anda boleh mencari objek sebelumnya pada tindanan melalui sifat ini.