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;

}

Seperti yang dapat dilihat daripada proses penguraian di atas, apabila JavaScript mencipta objek contoh melalui baru, ia akan mula-mula mencipta objek biasa obj, dan kemudian menghalakan atribut dalaman __proto__ obj ke objek prototaip init, jadi obj The rantai prototaip akan ditukar, dan langkah 3 menggunakan kaedah panggilan untuk memanggil init(), jadi ini dalam init merujuk kepada objek obj di sini.

Selepas init() dilaksanakan, semua objek DOM yang dipadankan akan disimpan dalam objek ini dalam bentuk tatasusunan dan dikembalikan, iaitu objek obj akan dikembalikan, dan pengendali baharu akhirnya akan kembali objek obj ini dikembalikan sebagai objek contoh baharu. Oleh itu, objek contoh yang dikembalikan oleh operator baharu mempunyai dua ciri: pertama, ia mengandungi set hasil pertanyaan DOM, dan kedua, rantai prototaipnya mewarisi prototaip init, dan prototaip init menghala ke objek jQuery.fn, jadi objek contoh juga Mempunyai kaedah operasi ini.

jQuery akan mencipta objek jQuery setiap kali ia melaksanakan pertanyaan, dan dalam aplikasi yang sama, semua objek jQuery akan berkongsi objek prototaip jQuery yang sama. Oleh itu, objek jQuery bukan sahaja mengandungi set hasil pertanyaan DOM, tetapi juga mewarisi kaedah operasi pada objek prototaip jQuery. Dengan cara ini, anda boleh terus memanggil kaedah untuk memanipulasi elemen DOM ini selepas membuat pertanyaan. Ini ialah reka bentuk seni bina teras jQuery, ringkas, mudah dan praktikal!

Jika anda masih tidak memahami penjelasan di atas, jangan risau, saya menulis projek kecil yang lengkap jDate mengikut idea reka bentuk jQuery, anda boleh membandingkan dan memahami! Projek jDate telah dimuat naik ke GitHub Anda boleh klik di sini untuk melihat kod lengkap: jDate Jika anda mempunyai pendapat yang berbeza, sila berbincang.

3 Kecacatan jQuery

Dengan menganalisis seni bina teras jQuery, kami akan mendapati bahawa setiap kali pertanyaan dilaksanakan, jQuery mesti membina jQuery yang kompleks dalam Objek memori , walaupun setiap objek jQuery berkongsi prototaip jQuery yang sama, proses pertanyaan jQuery adalah jauh lebih rumit daripada yang anda fikirkan Ia mesti mempertimbangkan pelbagai pengecam padanan dan keserasian pelayar yang berbeza. Oleh itu, jika anda hanya melakukan beberapa operasi mudah pada DOM, adalah disyorkan untuk menggunakan kaedah asli querySelector dan bukannya jQuery Walau bagaimanapun, apabila menggunakan kaedah asli, anda mungkin perlu melakukan beberapa kerja keserasian untuk senario aplikasi yang berbeza belajar untuk membuat pertukaran dan tidak keterlaluan Bergantung pada jQuery!

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan memberi inspirasi kepada semua orang untuk mempelajari jquery untuk lebih banyak tutorial berkaitan, sila lawati Tutorial Video jQuery!