Bercakap tentang reka bentuk seni bina teras jQuery

jQuery tidak asing kepada semua orang, jadi saya tidak akan bercakap banyak di sini tentang apa itu dan fungsinya. Tujuan artikel ini adalah untuk membincangkan teras jQuery melalui analisis ringkas bagi reka bentuk Senibina , dan cara jQuery memanfaatkan ciri lanjutan dalam JavaScript untuk membina perpustakaan JavaScript yang begitu hebat.

1 Pengenalan pertama kepada jQuery

Dari sudut fungsi teras, jQuery hanya melakukan satu perkara yang mudah dan biasa: pertanyaan. Sintaksnya sangat ringkas dan jelas sehingga ramai orang telah menggunakan jQuery tanpa mengetahui apa itu javascript Untuk menerangkannya dalam satu perkataan, ia adalah: kesederhanaan dan kesederhanaan.

Dari perspektif reka bentuk, kita boleh membahagikan kaedah yang disediakan oleh jQuery kepada dua kategori utama: kaedah statik dan kaedah contoh. Kaedah statik ialah kaedah yang diakses terus melalui $. Kaedah ini secara amnya tidak beroperasi pada elemen DOM, tetapi menyediakan beberapa alat biasa, seperti permintaan ajax dan beberapa operasi biasa pada rentetan Selain itu, jQuery juga menyediakan Dengan mekanisme sambungannya sendiri, anda boleh tulis komponen yang anda perlukan melalui kaedah lanjutan. Kaedah contoh adalah berbeza daripada kaedah statik Ia digunakan untuk beroperasi pada elemen DOM yang ditanya oleh jQuery melaksanakan $() untuk membina objek jQuery. Objek ini menyimpan semua elemen DOM yang ditanya dalam kaedah tatasusunan ini Rantaian prototaip objek melaksanakan kaedah untuk mengendalikan DOM ini Sebagai contoh, kaedah each() digunakan untuk melintasi setiap elemen DOM.

Anda mungkin perasan bahawa saya baru sahaja mengatakan bahawa objek ini disimpan "sebagai tatasusunan", iaitu, objek yang dibina oleh jQuery bukanlah tatasusunan, jadi apakah sebenarnya objek ini? Malah, objek ini adalah teras jQuery, juga dikenali sebagai "objek jQuery". Oleh itu, fokus artikel ini adalah untuk menganalisis dan membincangkan objek jQuery.

2 objek jQuery

Secara amnya, kami akan menggunakan jQuery seperti ini:

$('div').each(function(index){
  //this ...
});

$('div') kembali selepas pelaksanaan Mengembalikan a Objek jQuery. Kaedah each() merentasi elemen DOM dalam objek ini Mari kita lihat proses pelaksanaan $('div') (kod sumber artikel ini diambil dari jQuery 3.0):

jQuery = function( selector, context ) {
 
 return new jQuery.fn.init( selector, context );

}

Kaedah ini ialah kaedah kemasukan $('div'). $ ialah singkatan bagi jQuery, yang bersamaan dengan jQuery('div'). untuk mengembalikan objek contoh fungsi jQuery.fn.init (), jadi apakah itu jQuery.fn.init? Mari lihat kod berikut:

init = jQuery.fn.init = function( selector, context, root ) {
 //... 
 return this;
}
init.prototype = jQuery.fn;

jQuery.fn.init dan init merujuk kepada kaedah yang sama . Kaedah ini adalah berdasarkan kepada Pemilih menanyakan elemen DOM yang memenuhi syarat dan mengembalikannya, tetapi anda akan mendapati bahawa apa yang dikembalikan adalah ini. Kami akan menganalisisnya kemudian. Mari kita lihat ayat berikut:

init.prototype = jQuery.fn;
Apakah maksud ayat ini? ayat menjadikan objek prototaip kaedah init menghala ke objek jQuery.fn, jadi apakah itu jQuery.fn? Mari kita teruskan melihat kod:

jQuery.fn = jQuery.prototype = {

 // The current version of jQuery being used
 jquery: version,

 constructor: jQuery,

 // The default length of a jQuery object is 0
 length: 0,

 // Execute a callback for every element in the matched set.
 each: function( callback ) {
  return jQuery.each( this, callback );
 },
  
 splice: arr.splice
};

Untuk menjimatkan ruang, saya telah meninggalkan beberapa kod Seperti yang dapat dilihat dari sini, jQuery.fn sebenarnya adalah objek prototaip jQuery ini objek mentakrifkan beberapa rujukan kepada ini Kaedah di mana objek beroperasi. Jika anda berasa sedikit keliru pada ketika ini, jangan risau, mari kita susun idea: jQuery mula-mula mentakrifkan kaedah init, dan kemudian mentakrifkan satu siri kaedah operasi pada prototaip objek prototaip init. Akhirnya, objek contoh kaedah init dikembalikan. Jadi proses di atas boleh dipermudahkan seperti berikut (perwakilan pseudokod):

var init = function(selector,context,root){
 //...
 return this;
}

init.prototype = {
 length:0,
 each:function(callback){
  //...
 },
 splice:[].splice
}

jQuery = function(selector,context,root){

 return new init(selector,context,root);
}

Maka persoalannya, mengapa kaedah dalam jQuery.fn tidak ditakrifkan secara langsung pada prototaip init, tetapi ditakrifkan pada prototaip daripada jQuery?

Sebenarnya, tujuan ini adalah untuk meningkatkan kecekapan pertanyaan jQuery Jika ia ditakrifkan secara langsung pada objek prototaip init, maka setiap kali pertanyaan dilaksanakan, objek prototaip yang begitu besar akan dicipta dalam. memori, dan Jika objek ini ditakrifkan pada prototaip jQuery, objek ini akan dimulakan apabila jQuery dimuatkan dan akan sentiasa wujud dalam ingatan Setiap kali $() dilaksanakan pada masa hadapan, anda hanya perlu menghalakan prototaip dalam init objek ini. Daripada mencipta objek yang sama setiap kali.

Mari kita lihat apakah ini dikembalikan dalam fungsi init yang saya katakan dalam blog saya sebelum ini bahawa fungsi ini sentiasa menunjuk kepada pemanggil semasa masa jalan? Nampaknya pemanggil tidak dapat ditemui dalam kod di atas Pada masa ini, kita perlu memahami secara mendalam mekanisme operasi pengendali baru Meminjam penerangan operator baru dalam blog saya sebelum ini, kami akan menjalankan proses pelaksanaan new init(). Ia dipecahkan seperti berikut:

new init(selector,context,root) = {

 var obj = {};

 obj.__proto__ = init.prototype;

 init.call(obj,selector,context,root);

 return typeof result === 'obj'? result : obj;

}