Sprechen Sie über das Design der jQuery-Kernarchitektur

jQuery ist nicht jedem fremd, daher werde ich hier nicht viel darüber sagen, was es ist und was es tut. Der Zweck dieses Artikels besteht darin, den Kern von jQuery anhand einer einfachen Analyse des Architekturdesigns zu diskutieren und wie jQuery erweiterte Funktionen in JavaScript nutzt, um eine so großartige JavaScript-Bibliothek aufzubauen.

1 Erste Einführung in jQuery

Aus Sicht der Kernfunktion führt jQuery nur eine einfache und gewöhnliche Sache aus: Abfragen. Seine Syntax ist so prägnant und klar, dass viele Menschen jQuery bereits verwendet haben, ohne zu wissen, was Javascript ist. Um es mit einem Wort zu beschreiben: Einfachheit und Einfachheit.

Aus gestalterischer Sicht können wir die von jQuery bereitgestellten Methoden in zwei Hauptkategorien einteilen: statische Methoden und Instanzmethoden. Statische Methoden sind Methoden, auf die direkt über $ zugegriffen wird. Diese Methoden arbeiten im Allgemeinen nicht mit DOM-Elementen, bieten jedoch einige gängige Tools wie Ajax-Anfragen und einige gängige Operationen für Zeichenfolgen. Darüber hinaus bietet jQuery auch einen eigenen Erweiterungsmechanismus Schreiben Sie die benötigten Komponenten über die Extend-Methode. Die Instanzmethode unterscheidet sich von der statischen Methode. Sie wird verwendet, um die von jQuery abgefragten DOM-Elemente zu bearbeiten. Dieses Objekt speichert alle abgefragten DOM-Elemente in einer Array-Methode Dies Die Prototypenkette des Objekts implementiert Methoden zum Betreiben dieser DOMs. Beispielsweise wird die Methode every() zum Durchlaufen jedes DOM-Elements verwendet.

Vielleicht ist Ihnen aufgefallen, dass ich gerade gesagt habe, dass dieses Objekt „als Array“ gespeichert wird, das heißt, das von jQuery erstellte Objekt ist kein Array. Was genau ist dieses Objekt also? Tatsächlich ist dieses Objekt der Kern von jQuery und wird auch als „jQuery-Objekt“ bezeichnet. Daher liegt der Schwerpunkt dieses Artikels auf der Analyse und Diskussion von jQuery-Objekten.

2 jQuery-Objekt

Im Allgemeinen verwenden wir jQuery wie folgt:

$('div').each(function(index){
  //this ...
});

$('div') kehrt nach der Ausführung zurück. Gibt a zurück jQuery-Objekt. Die every()-Methode durchläuft die DOM-Elemente in diesem Objekt. Schauen wir uns zunächst den Ausführungsprozess von $('div') an (der Quellcode dieses Artikels stammt aus jQuery 3.0):

jQuery = function( selector, context ) {
 
 return new jQuery.fn.init( selector, context );

}

Diese Methode ist die Eingabemethode von $('div'). $ ist die Abkürzung für jQuery('div'). Es ist ersichtlich, dass diese Methode nur eines tut: um das Funktionsinstanzobjekt jQuery.fn.init () zurückzugeben. Was ist also jQuery.fn.init? Schauen wir uns den folgenden Code an:

init = jQuery.fn.init = function( selector, context, root ) {
 //... 
 return this;
}
init.prototype = jQuery.fn;

jQuery.fn.init und init beziehen sich auf dieselbe Methode Diese Methode basiert auf: Der Selektor fragt die DOM-Elemente ab, die die Bedingungen erfüllen, und Sie werden feststellen, dass Folgendes zurückgegeben wird: Was ist das? Wir werden es später analysieren. Schauen wir uns zunächst den folgenden Satz an:

init.prototype = jQuery.fn;
Was bedeutet dieser Satz? Der Satz lässt das Prototypobjekt der Init-Methode auf das jQuery.fn-Objekt zeigen. Was zum Teufel ist also jQuery.fn? Schauen wir uns den Code weiter an:

jQuery.fn = jQuery.prototype = {

 // The current version of jQuery being used
 jquery: version,

 constructor: jQuery,

 // The default length of a jQuery object is 0
 length: 0,

 // Execute a callback for every element in the matched set.
 each: function( callback ) {
  return jQuery.each( this, callback );
 },
  
 splice: arr.splice
};

Um Platz zu sparen, habe ich einen Teil des Codes weggelassen. Wie Sie hier sehen können, ist jQuery.fn tatsächlich das Prototypobjekt von jQuery Das Objekt definiert einige Verweise auf die Methode, mit der das Objekt arbeitet. Wenn Sie an dieser Stelle etwas verwirrt sind, machen Sie sich keine Sorgen, lassen Sie uns die Ideen klären: jQuery definiert zunächst eine Init-Methode und definiert dann eine Reihe von Operationsmethoden für den Init-Prototyp-Objektprototyp. Abschließend wird das Instanzobjekt der Init-Methode zurückgegeben. Der obige Prozess kann also wie folgt vereinfacht werden (Pseudocode-Darstellung):

var init = function(selector,context,root){
 //...
 return this;
}

init.prototype = {
 length:0,
 each:function(callback){
  //...
 },
 splice:[].splice
}

jQuery = function(selector,context,root){

 return new init(selector,context,root);
}

Dann stellt sich die Frage, warum die Methoden in jQuery.fn nicht direkt auf dem Prototyp von init, sondern auf dem Prototyp definiert sind von jQuery? Auf dem Objekt?

Der eigentliche Zweck besteht darin, die Abfrageeffizienz von jQuery zu verbessern. Wenn es direkt im Prototypobjekt von init definiert wird, wird bei jeder Ausführung einer Abfrage ein so großes Prototypobjekt erstellt den Speicher, und wenn dieses Objekt im jQuery-Prototyp definiert ist, wird dieses Objekt beim Laden von jQuery initialisiert und ist immer im Speicher vorhanden. Jedes Mal, wenn $() in der Zukunft ausgeführt wird, müssen Sie nur auf den Prototyp in init verweisen dieses Objekt, anstatt jedes Mal das gleiche Objekt zu erstellen.

Schauen wir uns an, was in der Init-Funktion zurückgegeben wird. Ich habe in meinem vorherigen Blog gesagt, dass dies in der Funktion während der Laufzeit immer auf den Aufrufer verweist. Es scheint, dass der Aufrufer im obigen Code nicht zu finden ist. Zu diesem Zeitpunkt müssen wir den Funktionsmechanismus des neuen Operators genau verstehen und die Beschreibung des neuen Operators in meinem vorherigen Blog ausführen new init(). Es ist wie folgt aufgeteilt:

new init(selector,context,root) = {

 var obj = {};

 obj.__proto__ = init.prototype;

 init.call(obj,selector,context,root);

 return typeof result === 'obj'? result : obj;

}