Mit der Entwicklung der Zeit sind im JavaScript-Lager immer mehr hervorragende Frameworks aufgetaucht, was unsere Entwicklungsarbeit erheblich vereinfacht. Sollten wir bei der Verwendung dieser Frameworks auch über ihre Herkunft nachdenken und darüber nachdenken, wie sie aufgebaut sind? Wenn Sie sich nicht damit zufrieden geben, nur einige vorgefertigte APIs zu verwenden, sondern über ein tiefes Verständnis ihrer internen Implementierungsmechanismen verfügen (jemandem zufolge sind APIs die am schnellsten abwertenden Dinge), ist es der beste Weg, ihren Quellcode zu lesen dass du es lesen kannst.
Ich habe in den letzten zwei Tagen den Quellcode von jQuery studiert und werde hier einige meiner oberflächlichen Kenntnisse teilen. Bitte korrigieren Sie mich, wenn ich unangemessen bin. Okay, werfen wir einen Blick auf die Funktionsweise von jQuery. Ich gehe davon aus, dass Sie bereits über einige Grundkenntnisse in JavaScript verfügen. Wenn die Grundlagen nicht ausreichen, empfehle ich Ihnen, die beiden Bücher „JavaScript Advanced Programming“ und „Understanding JavaScript“ zu lesen. Dieser Artikel ist nicht für Freunde geeignet, die Konzepte wie Klassen, Objekte, Funktionen, Prototypen usw. in js nicht verstehen.
Fangen wir ganz von vorne an:
Konstruieren Sie zunächst ein Objekt für den Benutzer, vorausgesetzt, unser Framework heißt Shaka (mein Name ;)).
var Shaka = function(){}; Hier erstellen wir eine leere Funktion ohne Inhalt. Diese Funktion ist eigentlich unser Konstruktor. Damit das von uns generierte Objekt die im Prototyp definierten Methoden aufrufen kann, müssen wir mithilfe des Prototyps einige Methoden zu Shaka hinzufügen (stellen Sie sich Shaka als eine Klasse vor), also definieren wir:
Shaka.fn = Shaka.prototype = {};
Shaka.fn entspricht hier dem Alias von Shaka.prototype für die zukünftige Verwendung. Sie verweisen auf dieselbe Referenz.
OK, fügen wir eine sayHello-Methode und einen Parameter zu Shaka hinzu, damit das grundlegendste Erscheinungsbild dieses Frameworks bereits vorhanden ist. Wenn es aktiv ist, ist es jetzt 1 Jahr alt.
Codefeld ausführen
[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]
Okay, seien Sie nicht aufgeregt. Wir haben festgestellt, dass es einige Unterschiede in der Verwendung dieses Frameworks und jQuery gibt. In jq können wir beispielsweise so schreiben:
jQuery('#myid').someMethod();
Wie wird das gemacht? Das heißt, der jQuery()-Konstruktor gibt eine jQuery-Objektinstanz zurück, damit wir seine Methode darauf aufrufen können, sodass Shakas Konstruktor eine Instanz zurückgeben sollte und diese so aussehen sollte:
var Shaka = function(){ return //Die Instanz von Shaka zurückgeben };
Wie erhalten wir also eine Instanz von Shaka? Sehen wir uns zunächst an, wie wir mit dem Prototyp eine Klasse simulieren. Zu diesem Zeitpunkt erstellen wir tatsächlich ein neues Objekt, das als Zeiger verwendet wird die MyClass-Funktion, die der Konstruktor der Klasse ist, und dann ruft someObj die in MyClass.prototype definierten Methoden ab. Der this-Zeiger in diesen Methoden verweist auf die aktuelle Objektinstanz.