Penjelasan terperinci tentang analisis seni bina keseluruhan jquery dan contoh pelaksanaan

Rangka kerja jQuery keseluruhan adalah sangat kompleks dan tidak mudah difahami Saya telah mengkaji rangka kerja yang berat dan berkuasa ini dalam beberapa hari yang lalu. Keseluruhan seni bina jQuery boleh dibahagikan kepada: modul kemasukan, modul bawah dan modul berfungsi. Di sini, kami mengambil jquery-1.7.1 sebagai contoh untuk analisis.

Seni bina keseluruhan jquery

Salin kod Kod adalah seperti berikut:

16 (fungsi( tetingkap, tidak ditentukan ) {

                    // Bina objek jQuery

22 var jQuery = (fungsi() {

25 var jQuery = fungsi(pemilih, konteks) {

27                     kembalikan jQuery.fn.init baharu( pemilih, konteks, rootjQuery);

28 },

// Sekumpulan pengisytiharan pembolehubah tempatan

97 jQuery.fn = jQuery.prototype = {

98          pembina: jQuery,

99 init: fungsi(pemilih, konteks, rootjQuery) { ... },

// Sekumpulan sifat dan kaedah prototaip

319 };

322          jQuery.fn.init.prototype = jQuery.fn;

324        jQuery.extend = jQuery.fn.extend = function() { ... };

388 jQuery.extend({

// Sekumpulan sifat dan kaedah statik

892 });

955        kembalikan jQuery;

957 })();

//Tinggalkan kod modul lain...

9246  window.jQuery = window.$ = jQuery;

9266 })( tingkap );

Menganalisis kod di atas, kami mendapati bahawa jquery menggunakan kaedah penulisan fungsi tanpa nama perlaksanaan kendiri Kelebihannya ialah ia boleh menghalang masalah ruang nama dan pencemaran berubah-ubah. Menyingkatkan kod di atas ialah:

Salin kod Kod adalah seperti berikut:

(fungsi(tetingkap, tidak ditentukan) {

var jQuery = function() {}

// ...

​ window.jQuery = window.$ = jQuery;

})(tetingkap);

Tetingkap parameter

Fungsi tanpa nama melepasi dua parameter, satu adalah tetingkap dan satu lagi tidak ditentukan. Kami tahu bahawa pembolehubah dalam js mempunyai rantaian skop Kedua-dua pembolehubah yang dihantar akan menjadi pembolehubah tempatan bagi fungsi tanpa nama, dan ia akan diakses dengan lebih cepat. Dengan melepasi objek tetingkap, objek tetingkap boleh digunakan sebagai pembolehubah tempatan Kemudian, parameter fungsi juga menjadi pembolehubah tempatan Apabila mengakses objek tetingkap dalam jquery, tidak perlu mengembalikan rantai skop ke atas -skop peringkat, dengan itu Objek tetingkap boleh diakses dengan lebih cepat.

Parameter tidak ditentukan

Apabila js mencari pembolehubah, enjin js akan terlebih dahulu mencari pembolehubah dalam skop fungsi itu sendiri. Jika ia tidak wujud, ia akan terus mencari ke atas, ia akan mengembalikan pembolehubah tersebut . Jika ia tidak menemuinya, ia akan kembali tidak ditentukan. undefined ialah sifat objek tetingkap Dengan menghantar parameter yang tidak ditentukan tanpa memberikan nilai, rantai skop apabila mencari undefined boleh dipendekkan. Dalam skop fungsi tanpa nama panggilan sendiri, pastikan undefined benar-benar tidak ditentukan. Kerana undefined boleh ditimpa dan diberi nilai baharu.

Apakah itu jquery.fn?

Salin kod Kod adalah seperti berikut:

jQuery.fn = jQuery.prototype = {

               pembina: jQuery,

                init: fungsi (pemilih, konteks, rootjQuery) { ... },

// Sekumpulan sifat dan kaedah prototaip

        };

Dengan menganalisis kod di atas, kami mendapati bahawa jQuery.fn ialah jQuery.prototype Kelebihan menulisnya dengan cara ini ialah ia lebih pendek. Kemudian, kami melihat bahawa jquery hanya menggunakan simbol $ dan bukannya jquery untuk kesederhanaan Oleh itu, kami sering menggunakan $() apabila kami menggunakan rangka kerja jquery,

Pembina jQuery()

Perihalan imej

Objek jQuery tidak dicipta melalui jQuery baharu, tetapi melalui jQuery.fn.init baharu:

Salin kod Kod adalah seperti berikut:

var jQuery = fungsi(pemilih, konteks) {

kembalikan jQuery.fn.init( pemilih, konteks, rootjQuery );

}

JQuery pembolehubah ditakrifkan di sini, dan nilainya ialah pembina jQuery, yang dikembalikan dan diberikan kepada pembolehubah jQuery pada baris 955 (kod teratas)

jQuery.fn.init

jQuery.fn (baris 97 di atas) ialah objek prototaip bagi fungsi pembina jQuery(), dan jQuery.fn.init() ialah kaedah prototaip jQuery, yang juga boleh dipanggil pembina. Bertanggungjawab untuk menghuraikan jenis pemilih dan konteks parameter dan melaksanakan carian yang sepadan.

Konteks parameter: Anda tidak boleh memasukkannya, atau anda boleh menghantarnya dalam objek jQuery, elemen DOM atau salah satu objek js biasa
Parameter rootjQuery: objek jQuery yang mengandungi objek dokumen, digunakan untuk situasi seperti kegagalan document.getElementById().

Salin kod Kod adalah seperti berikut:

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype

jQuery(pemilih [,konteks])

Secara lalai, carian untuk elemen padanan bermula daripada objek dokumen elemen akar, iaitu, skop carian ialah keseluruhan pepohon dokumen, tetapi anda juga boleh lulus dalam konteks parameter kedua untuk mengehadkan skop cariannya. Contohnya:

Salin kod Kod adalah seperti berikut:

$('div.foo').klik(fungsi () {

                 $('span',this).addClass('bar');//Hadkan julat carian, iaitu konteks
 di atas
});

jQuery.extend() dan jQuery.fn.extend()

Kaedah jQuery.extend(objek) dan jQuery.fn.extend(objek) digunakan untuk menggabungkan dua atau lebih objek ke dalam objek pertama. Kod sumber yang berkaitan adalah seperti berikut (bahagian):

Salin kod Kod adalah seperti berikut:

jQuery.extend = jQuery.fn.extend = function() {

pilihan var, nama, src, salinan, copyIsArray, klon,//satu set pembolehubah tempatan yang ditakrifkan

sasaran = argumen[0] || {},

i = 1,

panjang = arguments.length,

         dalam = palsu;

jQuery.extend(objek); Tambahkan kaedah kelas pada kelas jQuery, yang boleh difahami sebagai menambah kaedah statik. Seperti:

Salin kod Kod adalah seperti berikut:

$.extend({ 

​tambah:fungsi(a,b){returna b;} 

}); 

Tambahkan "kaedah statik" yang dipanggil tambah untuk jQuery, dan kemudian anda boleh menggunakan kaedah ini di mana jQuery diperkenalkan,

$.add(3,4); //kembali 7
jQuery.fn.extend(objek), lihat demonstrasi kod di tapak web rasmi seperti berikut:

Salin kod Kod adalah seperti berikut:

Foo
Bar

jQuery.fn.extend({
           semak: function() {
              kembalikan ini.setiap(fungsi() {
This.checked = benar;
            });
},
nyahtanda: function() {
              kembalikan ini.setiap(fungsi() {
This.checked = palsu;
            });
}
});
// Gunakan kaedah .check() yang baru dibuat
$( "input[type='checkbox']" ).check();

Enjin pemilih CSS Sizzle

Boleh dikatakan bahawa jQuery dilahirkan untuk mengendalikan DOM Sebab mengapa jQuery sangat berkuasa adalah kerana enjin pemilih CSS Sizzle memetik contoh daripada Internet:

pemilih："div > p div.aaron input[type="checkbox"]"

Peraturan penghuraian:
1 Ikut dari kanan ke kiri
2 Keluarkan token terakhir, seperti [type="checkbox"]
                                                                                          padanan: Tatasusunan[3]
taip : "ATTR"
                                                                                                                    Kotak semak "]"
                                                                                                                                                        3 Jenis penapis Jika jenis > ~ kosong, salah satu daripada empat pemilih perhubungan, kemudian langkau dan teruskan menapis
4 sehingga ia sepadan dengan salah satu ID, KELAS, dan TAG, kerana dengan cara ini ia boleh diperolehi melalui antara muka penyemak imbas
5 Pada masa ini, pengumpulan benih mempunyai nilai, yang mengurangkan syarat untuk pemilihan berus
6. Jika terdapat berbilang koleksi benih yang sepadan, penapisan lanjut diperlukan Ubah suai pemilih pemilih: "div > p div.aaron [type="checkbox"]"
7 OK, lompat ke peringkat seterusnya bagi fungsi kompilasi

objek tertunda

Dalam proses membangunkan tapak web, kami sering menghadapi operasi JavaScript tertentu yang mengambil masa yang lama. Antaranya, terdapat kedua-dua operasi tak segerak (seperti data pelayan membaca ajax) dan operasi segerak (seperti melintasi tatasusunan yang besar), dan hasilnya tidak tersedia serta-merta.

Pendekatan biasa adalah untuk menentukan fungsi panggil balik untuk mereka. Iaitu, nyatakan terlebih dahulu fungsi mana yang harus dipanggil sebaik sahaja ia selesai dijalankan.

Walau bagaimanapun, jQuery sangat lemah apabila ia berkaitan dengan fungsi panggil balik. Untuk mengubahnya, pasukan pembangunan jQuery mereka bentuk objek tertunda.

Ringkasnya, objek tertunda ialah penyelesaian fungsi panggil balik jQuery. Dalam bahasa Inggeris, defer bermaksud "penangguhan", jadi maksud objek tertunda ialah "menangguhkan" pelaksanaan sehingga satu titik tertentu pada masa hadapan.

Semak cara tradisional menulis operasi ajax jQuery:

Salin kod Kod adalah seperti berikut: $.ajax({

url: "test.html",

Kejayaan: function(){
alert("Haha, berjaya!");
　　},
ralat:fungsi(){
alert("Sesuatu telah berlaku!");
　　}
});

Dalam kod di atas, $.ajax() menerima parameter objek Objek ini mengandungi dua kaedah: kaedah kejayaan menentukan fungsi panggil balik selepas operasi berjaya, dan kaedah ralat menentukan fungsi panggil balik selepas operasi gagal.

Selepas operasi $.ajax() selesai, jika anda menggunakan versi jQuery yang lebih rendah daripada 1.5.0, objek XHR akan dikembalikan dan anda tidak boleh melakukan operasi rantaian jika versi lebih tinggi daripada 1.5.0 , objek Tertunda yang dikembalikan boleh dirantai.

Kini, cara penulisan baharu ialah ini:

Salin kod Kod adalah seperti berikut:

$.ajax("test.html")

​.done(function(){ alert("Haha, successful!"); })

​.fail(function(){ alert("Ralat!"); });

Tentukan fungsi panggil balik untuk berbilang operasi

Satu lagi faedah hebat objek tertunda ialah ia membolehkan anda menentukan fungsi panggil balik untuk berbilang acara, yang tidak boleh dilakukan dengan penulisan tradisional.

Sila lihat kod berikut, yang menggunakan kaedah baharu $.when():

Salin kod Kod adalah seperti berikut:

$.when($.ajax("test1.html"), $.ajax("test2.html"))

　.selesai(fungsi(){ alert("Haha, berjaya!"); })

.fail(function(){ alert("Ralat!"); });

Maksud kod ini ialah melakukan dua operasi pertama $.ajax("test1.html") dan $.ajax("test2.html"). Jika kedua-duanya berjaya, jalankan panggilan balik yang ditentukan oleh fungsi done(). ; jika salah satu gagal atau kedua-duanya gagal, fungsi panggil balik yang ditentukan oleh fail() dilaksanakan.

Prinsip pelaksanaan jQuery.Deferred(func)

Tiga senarai fungsi panggil balik dikekalkan secara dalaman: senarai fungsi panggil balik kejayaan, senarai fungsi panggil balik kegagalan dan senarai fungsi panggil balik mesej Kaedah lain beroperasi dan mengesan di sekitar tiga senarai ini.

Struktur kod sumber jQuery.Deferred( func ):

Salin kod Kod adalah seperti berikut:

jQuery.extend({

Ditunda: function( func ) {
// Kejayaan senarai fungsi panggil balik
          var doneList = jQuery.Callbacks( "sekali ingatan" ),
// Senarai fungsi panggil balik kegagalan
              failList = jQuery.Callbacks( "sekali ingatan" ),
// Senarai fungsi panggil balik mesej
           progressList = jQuery.Callbacks( "memori"),
// Keadaan awal
             keadaan = "belum selesai",
                       // Salinan baca sahaja baris gilir tak segerak
               janji = {
// selesai, gagal, kemajuan
                                  // nyatakan, isResolved, isRejected
                              // kemudian, sentiasa
                             // paip
                          // janji                                                               },
                                         // Baris gilir tak segerak               tertunda = promise.promise({}),
             kunci;
// Tambahkan kaedah untuk mencetuskan kejayaan, kegagalan dan senarai panggilan balik mesej
untuk (masuk senarai) {
              tertunda[kunci] = senarai[kunci].fire;
             ditangguhkan[ kunci "Dengan" ] = senaraikan[ kunci ].fireWith;
}
                     // Tambahkan fungsi panggil balik untuk menetapkan status
deferred.done( function() {
             keadaan = "diselesaikan";
}, failList.disable, progressList.lock )
         .fail( function() {
             keadaan = "ditolak";
            }, doneList.disable, progressList.lock );
                 // Jika fungsi parameter fungsi dimasukkan, ia akan dilaksanakan.
           jika ( func ) {
                func.call(ditunda, ditangguhkan);
}

// Kembalikan baris gilir tak segerak ditangguhkan

pemulangan tertunda;

},
}

jQuery.when( tertunda )

Menyediakan keupayaan untuk melaksanakan fungsi panggil balik berdasarkan keadaan satu atau lebih objek, biasanya berdasarkan baris gilir tak segerak dengan peristiwa tak segerak.

Penggunaan jQuery.when( tertunda )

Jika berbilang objek baris gilir tak segerak dihantar masuk, kaedah jQuery.when() mengembalikan salinan baca sahaja objek baris gilir tak segerak utama baharu Salinan baca sahaja akan menjejaki status akhir baris gilir tak segerak yang diluluskan.

Setelah semua baris gilir tak segerak berjaya, fungsi panggil balik kejayaan baris gilir tak segerak "utama" dipanggil;

Jika salah satu baris gilir tak segerak menjadi gagal, fungsi panggil balik kegagalan baris gilir tak segerak utama dipanggil.

Salin kod Kod adalah seperti berikut:

/*

Minta '/when.do?method=when1' mengembalikan {"when":1}

Minta '/when.do?method=when2' mengembalikan {"when":2}

Minta '/when.do?method=when3' mengembalikan {"when":3}

*/

var whenDone = function(){ console.log( 'done', arguments },

WhenFail = function(){ console.log( 'fail', arguments };

$.bila(

$.ajax( '/when.do?method=when1', { dataType: "json" } ),

$.ajax( '/when.do?method=when2', { dataType: "json" } ),

$.ajax( '/when.do?method=when3', { dataType: "json" } )

).selesai( apabilaSelesai ).gagal( apabilaGagal );

Perihalan imej

Baris Gilir Tak Segerak Ditunda

Menyahgandingkan tugas tak segerak dan fungsi panggil balik

Sediakan fungsi asas untuk modul ajax, modul baris gilir dan acara sedia.

Sifat dan kaedah prototaip

Sifat prototaip dan kaedah kod sumber:

Salin kod Kod adalah seperti berikut:

jQuery.fn = jQuery.prototype = {

pembina: jQuery,

init: fungsi(pemilih, konteks, rootjQuery) {}

pemilih: "",

jquery: "1.7.1",

panjang: 0,

Saiz 219: function() {},

toArray: function() {},

dapatkan: fungsi( nombor ) {},

pushStack: fungsi(elem, nama, pemilih) {},

setiap satu: fungsi( panggil balik, args ) {},

sedia: fungsi( fn ) {}, //

eq: function( i ) {},

pertama: function() {},

terakhir: function() {},

slice: function() {},

Peta 304: fungsi( panggil balik ) {},

hujung: function() {},

tolak: tolak,

jenis: [].isih,

sambung: [].sambung

};

Atribut pemilih digunakan untuk merekod ungkapan pemilih apabila jQuery mencari dan menapis elemen DOM.
Atribut .length mewakili bilangan elemen dalam objek jquery semasa.
Kaedah .size() mengembalikan bilangan elemen dalam objek jquery semasa Ia berfungsi bersamaan dengan panjang sifat, tetapi panjang harus digunakan dahulu kerana ia tidak mempunyai overhed panggilan fungsi.

.size() kod sumber adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

saiz():fungsi(){

Kembalikan ini.length;

}

Kaedah .toArray() menukar objek jQuery semasa kepada tatasusunan sebenar Tatasusunan yang ditukar mengandungi semua elemen Kod sumber adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

toArray: function() {

          return slice.call( this );

},

Method.get(index) mengembalikan elemen pada kedudukan yang ditentukan dalam objek jQuery semasa, atau tatasusunan yang mengandungi semua elemen. Sumbernya
Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

Dapatkan: function(num) {
pulangan nombor == batal ?

// Kembalikan susunan 'bersih'
This.toArray():

// Kembalikan objek sahaja
( num < 0 ? this[ this.length num ] : this[ num ] );
},

Jika tiada parameter dihantar masuk, memanggil .toArray() mengembalikan tatasusunan yang mengandungi elemen terkunci jika indeks parameter ditentukan, satu elemen dikembalikan. Indeks mula mengira dari 0 dan menyokong nombor negatif.

Pertama, ia akan dinilai sama ada nombor kurang daripada 0. Jika kurang daripada 0, subskrip akan dikira semula menggunakan nombor panjang, dan kemudian operator akses tatasusunan ([]) akan digunakan untuk mendapatkan elemen di kedudukan yang ditentukan Ini ialah kaedah kecil yang menyokong subskrip negatif jika ia lebih besar daripada atau sama dengan 0, kembalikan secara langsung elemen pada kedudukan yang ditentukan.

Penjelasan terperinci tentang penggunaan eg() dan get(): Ringkasan kaedah jquery biasa dan contoh penggunaan

Kaedah .each() digunakan untuk lelaran melalui objek jQuery semasa dan melaksanakan fungsi panggil balik pada setiap elemen. Method.each() dilaksanakan secara dalaman dengan hanya memanggil kaedah statik jQuery.each():

Salin kod Kod adalah seperti berikut:

setiap: fungsi( panggil balik, args ) {

          kembalikan jQuery.each( ini, panggil balik, args );

},

Fungsi panggil balik dicetuskan dalam konteks di mana elemen semasa ialah konteks, iaitu kata kunci ini sentiasa menunjuk kepada elemen semasa dan mengembalikan palsu dalam fungsi panggil balik boleh menamatkan traversal.

Kaedah .map() berulang melalui objek jQuery semasa, melaksanakan fungsi panggil balik pada setiap elemen dan meletakkan nilai pulangan fungsi panggil balik ke dalam objek jQuery baharu. Kaedah ini sering digunakan untuk mendapatkan atau menetapkan nilai koleksi elemen DOM.

Salin kod Kod adalah seperti berikut:

peta: fungsi( panggil balik ) {

          kembalikan this.pushStack( jQuery.map(this, function( elem, i ) {

                kembalikan panggilan balik.panggilan(elem, i, elem);

         }));

},

Kaedah prototaip .pushStack() mencipta objek jQuery kosong baharu, kemudian meletakkan koleksi elemen DOM ke dalam objek jQuery ini dan mengekalkan rujukan kepada objek jQuery semasa.

Kaedah prototaip.pushStack() ialah salah satu kaedah teras, yang menyediakan sokongan untuk kaedah berikut:

Perjalanan objek jQuery: .eq(), .first(), .last(), .slice(), .map().

Carian dan penapisan DOM: .find(), .not(), .filter(), .closest(), .add(), .andSelf().

Perjalanan DOM: .parent(), .parents(), .parentsUntil(), .next(), .prev(), .nextAll(), .prevAll(), .nextUnit(), .prevUnit() , .siblings(), .children(), .contents().

Sisipan DOM: jQuery.before(), jQuery.after(), jQuery.replaceWith(), .append(), .prepent(), .before(), .after(), .replaceWith().
Tentukan kaedah .push(elem, nama, pemilih), yang menerima 3 parameter:

Elemen parameter: Tatasusunan elemen (atau objek seperti tatasusunan) yang akan dimasukkan ke dalam objek jQuery baharu.

Nama parameter: Nama kaedah jQuery yang menjana elem tatasusunan elemen.

Pemilih parameter: Parameter yang dihantar kepada kaedah jQuery, digunakan untuk mengubah suai atribut.pemilih prototaip.
Kaedah .end() menamatkan operasi penapisan terbaharu dalam rantaian semasa dan memulihkan elemen padanan kepada keadaan sebelumnya

Salin kod Kod adalah seperti berikut:

tamat: function() {

         kembalikan this.prevObject ||. this.constructor(null);

},

Mengembalikan objek jQuery sebelumnya Jika atribut prevObect tidak wujud, objek jQuery kosong akan dibina dan dikembalikan. Kaedah .pushStack() digunakan untuk menolak ke dalam tindanan, dan kaedah .end() digunakan untuk keluar daripada tindanan

Sifat dan kaedah statik

Kod sumber yang berkaitan adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

388 jQuery.extend({

 389     tiadaConflict: function( deep ) {},

 402     sedia: palsu,

 406     sediaTunggu: 1,

 409     tahanSedia: fungsi( tahan ) {},

 418     sedia: fungsi( tunggu ) {},

 444     bindReady: function() {},

 492     isFunction: function( obj ) {},

 496     isArray: Array.isArray || fungsi( obj ) {},

 501     isWindow: function( obj ) {},

 505     isNumeric: function( obj ) {},

 509     jenis: function( obj ) {},

 515     isPlainObject: function( obj ) {},

 544     isEmptyObject: function( obj ) {},

 551     ralat: function( msg ) {},

 555     parseJSON: function( data ) {},

 581     parseXML: function( data ) {},

 601     noop: function() {},

 606     globalEval: function( data ) {},

 619     camelCase: function( string ) {},

 623     nodeName: function( elem, name ) {},

 628     setiap satu: fungsi( objek, panggil balik, args ) {},

 669     memangkas: memangkas ? function( text ) {} : function( text ) {},

 684     makeArray: function( array, results ) {},

 702     inArray: function( elem, array, i ) {},

 724     cantum: fungsi( pertama, kedua ) {},

 744     grep: function( elems, callback, inv ) {},

 761     peta: function( elems, callback, arg ) {},

 794     panduan: 1,

 798     proksi: function( fn, konteks ) {},

 825     akses: fungsi( elem, kunci, nilai, eksekutif, fn, pas ) {},

 852     sekarang: function() {},

 858     uaMatch: function( ua ) {},

 870     sub: function() {},

 891     penyemak imbas: {}

 892 });