Einführung in das jQuery-Framework_jquery

Ich verwende jQuery schon seit einiger Zeit, aber es gibt einige API-Implementierungen, die ich wirklich nicht verstehen kann. Der Herausgeber verweist auf den relevanten Quellcode und teilt nun meinen Lernprozess und meine Gewinne mit allen.

Das Folgende wird mit vereinfachtem Code eingeführt und konzentriert sich auf die Implementierungsideen von 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 verpackt seine Interna zunächst in eine anonyme Funktion zur sofortigen Ausführung und macht sie in Zeile 5 der Außenwelt zugänglich

Die sogenannte anonyme Funktion zur sofortigen Ausführung bedeutet, dass diese Funktion anonym (ohne Namen) ist und sofort nach ihrer Definition aufgerufen wird

Wenn wir $("div") extern aufrufen, rufen wir tatsächlich die interne jQuery("div");

auf

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

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

Okay, lassen Sie uns etwas komplizierter werden. Der folgende Code implementiert hauptsächlich gegenseitige Referenzen, wie in der Abbildung gezeigt:

Nehmen Sie den $('div')-Aufruf als Beispiel:

Wie aus der zweiten Codezeile ersichtlich ist, verwendet jQuery jQuery.prototype.init, um jQuery-Objekte zu instanziieren. Dies führt jedoch zu einem Problem:

Das instanziierte Objekt kann nur auf die Variablen unter init zugreifen, nicht jedoch auf jQuery.prototype (die von jQuery bereitgestellte API ist an dieses Objekt gebunden).

Schreiben Sie also einfach die 21. Codezeile und verweisen Sie init.prototype auf jQuery.prototype.

Dies ist erledigt, verwenden Sie init zum Instanziieren, und auf jQuery.prototype kann im Init-Bereich zugegriffen werden.

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; 

Warum jQuery.prototype.init verwenden, um Objekte zu instanziieren, anstatt jQuery-Funktionen direkt zu verwenden?

Angenommen, jQuery-Funktionen werden zum Instanziieren von Objekten verwendet, sodass Referenzen zwischen Objekten tatsächlich auf jQuery -> jQuery.prototype vereinfacht werden können.

Aber der Aufruf wird umständlich: new $('div'), daher wird basierend auf dieser Überlegung (Schätzung (⊙0⊙)) intern eine komplexere Implementierung verwendet, um den Aufruf zu vereinfachen.

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

Okay, werfen wir zum Schluss einen Blick auf die Implementierung von init. Außerdem wurde der Code vereinfacht und nur der am häufigsten verwendete Fall implementiert.

jQuery verarbeitet die erhaltene Knotenliste in einem Array (zur einfacheren späteren Verwendung) und stellt darunter einige Variablen bereit, z. B. Länge und Selektor.

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;
}
} 

Dieser Artikel endet hier.

Eine kurze Analyse der jQuery-Kettenaufrufe und Showwissen Weitere Informationen finden Sie auf der Script House-Website!