Analisis ringkas tentang prinsip dalaman jQuery dan kaedah pelaksanaan_jquery

Saya telah mengkaji kod sumber jQuery dalam tempoh ini Terima kasih kepada perkembangan jQuery yang semakin meningkat, semakin ramai pakar yang mempelajari jQuery juga lebih mudah didapati daripada dua tahun sebelumnya sumber yang baik, seperti Gao Yun jQuery1.6.1 siri analisis kod sumber. Tutorial ini menganalisis prinsip dalaman dan kaedah pelaksanaan jQuery dengan sangat terperinci, yang sangat membantu untuk mempelajari dan memahami jQuery. Walau bagaimanapun, saya secara peribadi berpendapat bahawa banyak tutorial tidak memahami sepenuhnya keputusan keseluruhan jQuery. Saya cuba menerangkan pelaksanaan dalaman jQuery secara keseluruhan.

Seperti yang kita semua tahu, terdapat dua cara untuk memanggil jQuery Satu ialah pelaksanaan peringkat tinggi, yang melaksanakan pemilihan DOM dengan menghantar parameter, seperti memilih semua elemen h1 melalui $("h1"), dan yang kedua. ialah pelaksanaan peringkat rendah , jika operasi ajax dilaksanakan melalui $.ajax. Jadi, apakah perbezaan antara kedua-dua kaedah ini? Gunakan fungsi jenis untuk mengesan $('h1') dan $.ajax Objek jQuery dan apakah itu dan Apakah hubungan antara jQuery dan jQuery? Mari kita cetak sifat dan nilai yang sepadan objek jQuery melalui for(var i dalam $(”)) document.write(i ” :::” $(“”)[i] ””); Ia mempunyai lebih daripada 100 sifat Dengan memasukkan $("*") dalam konsol, anda boleh melihat bahawa kebanyakan sifat adalah sifat yang diwarisi daripada prototaip jQuery Objek jQuery sebenarnya adalah objek sedemikian:

Jadi mari kita buat spekulasi bahawa pelaksanaan jQuery mungkin serupa dengan ini:

function jQuery(){
 this[0]="Some DOM Element";
 this[1]="Some DOM Element";
 this[2]="Some DOM Element";
 this.length=3;
 this.prevObject="Some Object";
 this.context="Some Object";
 this.selector="Some selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}

Kod ini boleh mencipta objek jQuery dengan sifat di atas melalui operator baharu, tetapi sebenarnya kami tidak menggunakan operator baharu apabila kami memanggil jQuery untuk mencipta objek jQuery. Mari lihat pelaksanaan jQuery:

var jQuery = function( selector, context ) {
 // The jQuery object is actually just the init constructor 'enhanced'
 return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn=jQuery.prototype={
 jquery: core_version,
 init:function(selector,context){
 //some code
 return this;
 }
 //some code there
 //......
}
jQuery.fn.init.prototype=jQuery.fn;

Terdapat beberapa perkara yang sangat bijak di sini Perkara pertama adalah untuk mencipta objek melalui kaedah init atribut prototaip jQuery untuk mencapai tujuan mencipta objek tanpa menggunakan penunjuk ini dalam init kaedah. Kita tahu bahawa dengan memanggil init untuk mengembalikan contoh jQuery, maka contoh ini mesti mewarisi sifat jQuery.prototype, kemudian ini dalam init akan mewarisi sifat jQuery.prototype. Walau bagaimanapun, ini dalam init tertakluk kepada sekatan skop dan tidak boleh mengakses sifat lain jQuery.prototype jQuery menghalakan prototaipnya ke jQuery.fn melalui ayat 'jQuery.fn.init.prototype=jQuery.fn', supaya , jQuery. objek yang dihasilkan oleh init mempunyai sifat jQuery.fn.

Pada ketika ini, prototaip asas jQuery telah muncul. Terdapat dua objek di sini, satu ialah pembina jQuery, dan satu lagi ialah objek yang dihasilkan oleh pembina ini (kami memanggilnya objek jQuery, yang tidak berbeza daripada objek biasa), seperti yang ditunjukkan dalam rajah hubungan berikut:

Anda dapat melihat bahawa pembina jQuery dan jQuery.prototype mempunyai sifat dan kaedah mereka sendiri. dalam jQuery, pelaksanaan extend sebenarnya bergantung pada kod yang sama, yang akan dianalisis secara terperinci dalam analisis kod sumber berikutnya.