Eine kurze Analyse der internen Prinzipien und Implementierungsmethoden von jQuery_jquery

Ich habe mich in dieser Zeit mit dem jQuery-Quellcode beschäftigt. Dank der wachsenden Entwicklung von jQuery sind auch die Lernmaterialien sehr viel einfacher zu finden Gute Ressourcen, wie z. B. die jQuery1.6.1-Quellcode-Analyseserie von Gao Yun. In diesen Tutorials werden die internen Prinzipien und Implementierungsmethoden von jQuery ausführlich analysiert, was für das Erlernen und Verstehen von jQuery sehr hilfreich ist. Ich persönlich bin jedoch der Meinung, dass viele Tutorials die Gesamtergebnisse von jQuery nicht vollständig verstehen. Ich versuche, die interne Implementierung von jQuery als Ganzes zu erklären.

Wie wir alle wissen, gibt es zwei Möglichkeiten, jQuery aufzurufen. Eine ist eine High-Level-Implementierung, die die DOM-Auswahl durch Übergabe eines Parameters implementiert, z. B. die Auswahl aller h1-Elemente über $("h1"), und die zweite ist eine relativ einfache Implementierung, wenn die Ajax-Operation über $.ajax implementiert wird. Was ist also der Unterschied zwischen diesen beiden Methoden? Verwenden Sie die Funktion typeof, um $('h1') und $.ajax zu erkennen. Jeder, der ein wenig mit jQuery vertraut ist, kennt es jQuery-Objekt und was ist es und welche Beziehung besteht zwischen jQuery und jQuery? Lassen Sie uns zunächst die Eigenschaften und entsprechenden Werte des jQuery-Objekts über for(var i in $(“)) document.write(i „::“ $(„“)[i] „““ ausdrucken Es verfügt über mehr als 100 Eigenschaften. Wenn Sie $("*") in die Konsole eingeben, können Sie sehen, dass die meisten Eigenschaften vom jQuery-Prototyp geerbt sind. Das jQuery-Objekt ist tatsächlich ein solches Objekt:

Lassen Sie uns also spekulieren, dass die Implementierung von jQuery etwa so aussehen könnte:

function jQuery(){
 this[0]="Some DOM Element";
 this[1]="Some DOM Element";
 this[2]="Some DOM Element";
 this.length=3;
 this.prevObject="Some Object";
 this.context="Some Object";
 this.selector="Some selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}

Diese Codes können über den neuen Operator ein jQuery-Objekt mit den oben genannten Eigenschaften erstellen. Tatsächlich verwenden wir jedoch nicht den neuen Operator, wenn wir jQuery aufrufen, um ein jQuery-Objekt zu erstellen. Schauen wir uns die Implementierung von jQuery an:

var jQuery = function( selector, context ) {
 // The jQuery object is actually just the init constructor 'enhanced'
 return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn=jQuery.prototype={
 jquery: core_version,
 init:function(selector,context){
 //some code
 return this;
 }
 //some code there
 //......
}
jQuery.fn.init.prototype=jQuery.fn;

Hier gibt es einige sehr clevere Dinge. Der erste Punkt besteht darin, Objekte über die Init-Methode des jQuery-Prototypenattributs zu erstellen, um den Zweck der Objekterstellung zu erreichen, ohne New zu verwenden Verfahren. Wir wissen, dass durch den Aufruf von init, um eine jQuery-Instanz zurückzugeben, diese Instanz die Eigenschaften von jQuery.prototype erben muss, und dass in init dann die Eigenschaften von jQuery.prototype erbt. Dies unterliegt jedoch in init Bereichsbeschränkungen und kann nicht auf andere Eigenschaften von jQuery.prototype zugreifen, indem jQuery seinen Prototyp über den Satz „jQuery.fn.init.prototype=jQuery.fn“ auf jQuery verweist Das von init generierte Objekt hat die Eigenschaften von jQuery.fn.

Zu diesem Zeitpunkt ist ein grundlegender Prototyp von jQuery aufgetaucht. Hier gibt es zwei Objekte, eines ist der jQuery-Konstruktor und das andere ist das von diesem Konstruktor generierte Objekt (wir nennen es ein jQuery-Objekt, das sich nicht von einem gewöhnlichen Objekt unterscheidet), wie im folgenden Beziehungsdiagramm gezeigt:

Sie können sehen, dass der jQuery-Konstruktor und jQuery.prototype eigene Eigenschaften und Methoden haben. Beide Objekte verfügen über eine Erweiterungsmethode, mit der ihre eigenen Eigenschaften und Methoden erweitert werden. Innerhalb von jQuery basiert die Implementierung von Extend tatsächlich auf demselben Code, der in der anschließenden Quellcode-Analyse detailliert analysiert wird.