Eine kurze Diskussion zum jQuery-Konstruktoranalysis_jquery

In meinem letzten Artikel habe ich das allgemeine Framework von jQuery erklärt. Ich weiß, dass der gesamte Code in einer selbstaufrufenden anonymen Funktion geschrieben ist und das Fensterobjekt übergeben wird. Der Quellcode sieht so aus:

(function( window, undefined ) {...})( window );

Wir wissen durch Alert (jquery), dass es sich um ein Objekt handelt. Wie ist dieses Objekt also aufgebaut? Wir verwenden eine Schreibmethode ähnlich $(document), um Elemente abzurufen, genau wie der direkte Aufruf einer gewöhnlichen Methode. Ist jQuery eine gewöhnliche Funktion? Wenn es sich um einen Konstruktor handelt, warum ist es dann keine übliche Form eines neuen $(Dokuments)?

Tatsächlich ist jQuery eine objektorientierte js-Bibliothek und verfügt auch über einen Konstruktor. Jedes Mal, wenn eine jQuery-Methode aufgerufen wird, wird ein jQeury-Objekt instanziiert, aber die Art und Weise, wie jQuery geschrieben wird, ist sehr clever.

Lassen Sie uns zunächst über die objektorientierte Sprache von js sprechen: Obwohl js keine objektorientierte Sprache ist, verfügt es über viele objektorientierte Schreibmethoden. Ich empfehle Ihnen, einen Blick auf den objektorientierten Programmierteil von Turing zu werfen „Erweiterte Javascript-Programmierung“. Unter vielen Methoden ist die Konstruktions-Plus-Prototyp-Methode die am häufigsten verwendete Schreibmethode. Hier ist ein Beispiel:

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+'说'+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('你好');// tom说你好

Tatsächlich verwendet jQuery auch diese Methode, aber sie verwendet eine intelligentere Schreibweise. Schauen wir uns die Unterschiede zwischen den Konstruktoren von jQuery an

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

Aus dem Quellcode können wir ersehen, dass die eigentliche Funktion in jQuery die Init-Methode ist. Wenn wir jQuery aufrufen, wird das Ergebnis von new init() anstelle von new jQuery() direkt zurückgegeben.

Was ist jQuery.fn? Wir werden diesen Code später sehen

jQuery.fn = jQuery.prototype = {...

Das ist leicht zu verstehen. Tatsächlich ist jQuery.fn das Prototypobjekt, was bedeutet, dass es im jQuery-Prototyp eine Init-Methode gibt, die der eigentliche Konstruktor ist. Der Vorteil dieser Schreibweise besteht darin, dass keine Operationen wie $().init() geschrieben werden müssen und die Methode direkt initialisiert wird. Es gibt jedoch ein weiteres Problem: Da init der Konstruktor ist, ist die Methodeninstanz, auf die wir schreiben jQuery kann nicht aufgerufen werden? Natürlich kann die Instanziierung von init nur die init-Methode aufrufen

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

Ich habe jQuery.fn=jQuery.protype bereits erwähnt, was bedeutet, dass das Prototypobjekt von jQuery dem Prototyp von init zugewiesen ist, sodass die Prototypmethode von jQuery natürlich in init verfügbar ist. Durch diese Konstruktionsmethode S kann jQuery Die Methode ist sehr einfach und erfordert weder den Betrieb von new jQuery() noch eine manuelle Initialisierung. Sie ist so einfach wie der Aufruf einer gewöhnlichen Funktion.