jQuery constructor init parameter analysis

jQuery constructor init parameter analysis_jquery

WBOY

Lepaskan： 2016-05-16 15:59:28

asal

1343 orang telah melayarinya

Dalam esei terakhir saya, saya menganalisis pembina jQuery Terdapat kaedah prototaip init dalam objek jQuery, yang merupakan pembina sebenar Objek prototaip init mengekalkan hubungan rujukan dengan objek prototaip jQuery itu Contoh boleh memanggil kaedah prototaip jQuery secara normal, sama seperti ia adalah contoh jQuery. Mari kita lihat bagaimana init pembina di belakang tabir ditulis:

init: function( selector, context, rootjQuery ) {

...

}

Salin selepas log masuk

Anda boleh melihat bahawa kaedah ini menerima 3 parameter, dua parameter pertama diluluskan oleh kaedah jQuery

var jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery );

},

Salin selepas log masuk

Pemilih pada dasarnya boleh memasukkan sebarang nilai, tetapi tidak semua nilai bermakna Hanya tidak ditentukan, elemen DOM, rentetan, fungsi, objek jQuery dan objek JavaScript biasa Parameter ini biasanya diisi tetapi tidak ralat akan dilaporkan jika anda tidak mengisinya

Salin kod Kod adalah seperti berikut:

console.log($());

//[pembina: fungsi, init: fungsi, pemilih: "", jquery: "1.7.1", saiz: fungsi…]

Konteks boleh dihantar sebagai konteks pelaksanaan atau skop pelaksanaan, atau ia boleh dihantar dalam salah satu elemen DOM, objek jQuery dan objek JavaScript biasa

Parameter rootjQuery: objek jQuery yang mengandungi objek dokumen, digunakan apabila document.getElementById() gagal ditemui, pemilih ialah ungkapan pemilih dan tiada konteks ditentukan, dan pemilih ialah fungsi, ia sebenarnya $(dokumen).

Perkara berikut dibahagikan kepada 12 situasi dan dibincangkan satu persatu mengikut parameter yang berbeza

1.pemilih boleh ditukar kepada palsu

// Handle $(""), $(null), or $(undefined)

if ( !selector ) {

return this;

}

Salin selepas log masuk

Komen dalam kod sumber telah ditulis dengan sangat jelas Dalam tiga situasi ini, kembalikan terus tanpa sebarang pemprosesan

2. Pemilih parameter ialah elemen DOM

Contohnya: $(dokumen)

// Handle $(DOMElement)

if ( selector.nodeType ) {

this.context = this[0] = selector;

this.length = 1;

return this;

}

Salin selepas log masuk

Selagi ia adalah elemen dom, ia mesti mempunyai jenis nod, dan kemudian tukar nod ini menjadi elemen pertama objek jquery dan tetapkan ia kepada konteks Atribut panjang ialah atribut prototaip jQuery dan lalai kepada 0

// Panjang lalai objek jQuery ialah 0

panjang: 0,
Selepas terdapat elemen di sini, tukar atribut panjang kepada 1. Pemulangan operasi ini menjadikan hasil pelaksanaan fungsi masih menjadi objek jQuery, supaya panggilan berantai seperti $(document).each() boleh dilaksanakan. Objek akhir yang diperoleh adalah serupa dengan {0:document,context:document,length:1....}. Malah, semua situasi akhirnya akan menjadi objek dalam bentuk ini, kecuali untuk sifat dan kaedah prototaip jQuery disusun mengikut urutan dengan angka Arab, jadi kita boleh menggunakan borang $(selector)[0] dan bukannya $(selector).get(0) untuk mendapatkan objek DOM. Contohnya:

<!doctype html>

<html>

  <head>

   <title></title>

  </head>

  <body>

    <div></div>

    <div></div>

    <div></div>

  </body>

  <script src='jquery-1.7.1.js'></script>

  <script>

   console.log($('div'));

/*[div, div, div, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "div", constructor: function, init: function…]

0: div
1: div
2: div
context: document
length: 3
prevObject: jQuery.fn.jQuery.init[1]__proto__: jQuery[0]
selector: "div"
.
*/
  </script>

</html>

Salin selepas log masuk

3. Parameter ialah rentetan khas "badan"

Memandangkan hanya terdapat satu elemen badan dalam objek dokumen, ia disenaraikan secara berasingan untuk diproses

// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

Salin selepas log masuk

Terdapat tiga syarat di sini yang mesti dipenuhi pada masa yang sama Saya tidak begitu memahami syarat kedua bahawa mesti tiada konteks Kaedah penulisan yang kelihatan seperti $('body',document) juga "diabaikan" oleh situasi ini

 console.log($('body',document));

 /*

 jQuery.fn.jQuery.init[1]

0: body

context: document

length: 1

prevObject: jQuery.fn.jQuery.init[1]

selector: "body"

__proto__: jQuery[0]

*/

Salin selepas log masuk

Walaupun hasilnya sama dengan $('body'), ia dianggap sebagai dua situasi. Ini mungkin kerana badan hanya mempunyai satu konteks dan ia hanya boleh menjadi dokumen. anda perlu menilai sama ada konteksnya adalah dokumen. Syarat ketiga ialah memastikan dokumen.badan mesti wujud Jadi dalam keadaan apakah dua syarat pertama akan dipenuhi tetapi dokumen.badan tidak wujud? Yang pertama ialah apabila kod js dimuatkan sebelum kod html, ini adalah kesilapan yang sering dilakukan oleh pemula Biasanya kita perlu menulis:

$(fungsi(){...})

atau

$(dokumen).sedia(fungsi(){...})
Sebenarnya, kedua-dua ini adalah sama dan memanggil kaedah yang sama DOM akan memuatkan bahagian ini dan menganalisisnya kemudian. Untuk ini kita boleh membuat kod html ujian seperti berikut:

<!doctype html>
 
<html>
 
  <head>
 
   <title></title>
 
    <script src='jquery-1.7.1.js'></script>
 
   <script>
 
       $('body')
 
  </script>
 
  </head>
 
  <body>
 
    <div></div>
 
    <div></div>
 
    <div></div>
 
  </body>
 
</html>

Salin selepas log masuk

Kemudian keluarkan pemilih, konteks dan document.body dalam kod sumber jQuery

console.log(selector+context+document.body);

// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

Salin selepas log masuk

Walaupun kami hanya menulis satu, ia sebenarnya telah dilaksanakan empat kali Hanya kali terakhir adalah hasil selepas kami memanggilnya. Pada masa ini, dua yang pertama berpuas hati . Ingat bahawa dalam seni bina keseluruhan jQuery yang pertama, undefined akan ditulis semula, begitu juga document.body akan ditulis semula sebagai null? Apabila saya cuba mengubah suai kod, ralat akan dilaporkan Nampaknya ia tidak mungkin Kemudian syarat ini adalah untuk menghalang pelaksanaan tanpa memuatkan html

Jenis keempat ialah rentetan selain daripada situasi rentetan yang disebutkan di atas Kami akan meninggalkan lebih banyak situasi dalam artikel seterusnya.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.