Pengenalan kepada jQuery framework_jquery

Saya telah menggunakan jQuery untuk seketika, tetapi terdapat beberapa pelaksanaan API yang saya benar-benar tidak dapat memahami. Editor merujuk kepada kod sumber yang berkaitan dan kini berkongsi proses pembelajaran dan keuntungan saya dengan semua orang.

Perkara berikut akan diperkenalkan menggunakan kod yang dipermudahkan, memfokuskan pada idea pelaksanaan jQuery~>_<~

//匿名立即执行函数
//.防止污染全局空间
//.选择性保护内部变量
(function(window, undefined){
//第二参数undefined设置而不传的原因：
// 外部发生这种情况:var undefined = 时，undefined会被篡改
// 设置第二参数而不传，则undefined就会被重置回原来值
function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype;
//对外暴露jQuery：将jQuery绑定在window上面
window.$ = jQuery;
})(window); 

-------------------------

jQuery pada mulanya membungkus bahagian dalamannya dengan fungsi pelaksanaan segera tanpa nama dan mendedahkannya kepada dunia luar pada baris 5;

Apa yang dipanggil fungsi pelaksanaan segera tanpa nama bermakna fungsi ini adalah tanpa nama (tanpa nama) dan dipanggil serta-merta selepas ditakrifkan

Apabila kami memanggil $("div") secara luaran, kami sebenarnya memanggil jQuery dalaman("div");

(function(window, undefined){
//内部变量
//对外暴露jQuery：将jQuery绑定在window上面
window.$ = jQuery;
})(window);
$("div")

-------------------------

Baiklah, mari menjadi lebih rumit Kod berikut terutamanya melaksanakan rujukan bersama seperti yang ditunjukkan dalam rajah:

Ambil panggilan $('div') sebagai contoh:

Seperti yang dapat dilihat dari baris kedua kod, jQuery menggunakan jQuery.prototype.init untuk membuat instantiate objek jQuery, tetapi ini akan menyebabkan masalah:

Objek instantiated hanya boleh mengakses pembolehubah di bawah init, tetapi bukan jQuery.prototype (API yang disediakan oleh jQuery terikat pada objek ini).

Jadi, hanya tulis baris ke-21 kod dan titik init.prototype ke jQuery.prototype.

Ini dilakukan, gunakan init untuk membuat instantiate, dan jQuery.prototype boleh diakses di bawah skop init.

function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype; 

Mengapa menggunakan jQuery.prototype.init untuk membuat instantiate objek dan bukannya menggunakan fungsi jQuery secara langsung?

Anggapkan bahawa fungsi jQuery digunakan untuk membuat instantiate objek, supaya rujukan antara objek sememangnya boleh dipermudahkan kepada jQuery-->jQuery.prototype.

Tetapi panggilan akan menjadi menyusahkan: $('div' baharu), jadi berdasarkan pertimbangan ini (rasa (⊙0⊙)), pelaksanaan yang lebih kompleks digunakan secara dalaman untuk memudahkan panggilan.

-------------------------

Baiklah, akhirnya, mari kita lihat pelaksanaan init. Kod ini juga dipermudahkan, dan hanya kes yang paling biasa digunakan dilaksanakan.

jQuery akan memproses nodeList yang diperoleh menjadi tatasusunan (untuk kegunaan seterusnya), dan melekapkan beberapa pembolehubah di bawahnya, seperti panjang dan pemilih.

init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
} 

Artikel ini berakhir di sini Artikel seterusnya akan memperkenalkan anda kepada

Analisis ringkas tentang panggilan berantai jQuery dan menunjukkan pengetahuan Untuk mendapatkan maklumat lanjut, sila perhatikan tapak web Script House!