So schreiben Sie hochwertigen JS-Code_Grundkenntnisse

Ich möchte eine effiziente JavaScript-Bibliothek schreiben, habe aber keine Ahnung, wie ich anfangen soll

Ich habe versucht, die Klassenbibliotheken anderer Leute zu lesen, aber ich schien sie zu verstehen

Ich habe vor, die erweiterten Funktionen von js zu studieren, aber der Inhalt des maßgeblichen Buches ist zu verstreut,

Auch wenn ich mich an die „Verwendung“ erinnere, denke ich nicht über die „Methode“ nach, wenn es um die „Verwendung“ geht.

Vielleicht geht es Ihnen wie mir, es scheint eine unsichtbare Kraft zu geben, die unsere Pläne einschränkt und uns immer wieder an die Grenzen des Wissens denken lässt, sodass wir stillstehen und es schwierig finden, voranzukommen.

Während dieser Zeit verdoppelte sich der Druck aufgrund verschiedener Aufgaben, Kursgestaltung und experimenteller Berichte. Es kommt selten vor, dass ich mir ein wenig Zeit nehme, nie verschlafe, die Bücher, die ich in der Vergangenheit gelesen habe, ordne und zusammenfasse, nur um dem Aufbau meiner eigenen Klassenbibliothek näher zu kommen.

Dieser Artikel bezieht sich auf „Javascript Language Essence“ und „Effective JavaScript“. Die Beispiele wurden debuggt, und nachdem ich sie verstanden habe, möchte ich einige „tiefgreifende“ Prinzipien etwas einfacher machen.

1. Variablenumfang

Scope ist für Programmierer wie Sauerstoff. Es ist überall und man denkt oft nicht einmal darüber nach. Wenn es jedoch verschmutzt ist (z. B. durch die Verwendung globaler Objekte), können Sie sich erstickt fühlen (z. B. reagiert die Anwendung weniger). Die grundlegenden Scoping-Regeln von JavaScript sind einfach, gut gestaltet und leistungsstark. Um JavaScript effektiv nutzen zu können, müssen einige grundlegende Konzepte des Variablenbereichs beherrscht und einige Randfälle verstanden werden, die zu schwer fassbaren und unangenehmen Problemen führen können.

1.1 Globale Variablen so wenig wie möglich verwenden

Javascript erleichtert das Erstellen von Variablen im globalen Namespace. Das Erstellen einer globalen Variablen ist mühelos, da keine Deklaration erforderlich ist und der gesamte Code im gesamten Programm automatisch darauf zugreift.

Für Anfänger wie uns gilt: Wenn wir auf bestimmte Anforderungen stoßen (z. B. werden die übertragenen Daten aufgezeichnet, beim Warten auf den Aufruf einer bestimmten Funktion zu einem bestimmten Zeitpunkt verwendet oder eine bestimmte Funktion wird häufig verwendet), tun wir dies nicht Zögern Sie nicht, an globale Funktionen oder sogar an globale Funktionen zu denken. Die C-Sprache, die ich in meinem ersten Studienjahr gelernt habe, ist zu tief im prozessorientierten Denken verwurzelt, und das System ist ordentlich voller Funktionen. Das Definieren globaler Variablen verschmutzt den gemeinsam genutzten öffentlichen Namensraum und kann zu unerwarteten Namenskonflikten führen. Globale Variablen wirken sich auch negativ auf die Modularität aus, da sie zu einer unnötigen Kopplung zwischen unabhängigen Komponenten in einem Programm führen. Im Ernst, zu viele Globals (einschließlich Stylesheets, die den Stil von div oder a direkt definieren) werden zu einem katastrophalen Fehler, wenn sie in einen Entwicklungsprozess mit mehreren Personen integriert werden. Aus diesem Grund ist der gesamte jQuery-Code in einen anonymen Ausdruck eingeschlossen, der sofort ausgeführt wird – eine selbstaufrufende anonyme Funktion. Wenn der Browser die jQuery-Datei lädt, beginnt die selbstaufrufende anonyme Funktion sofort mit der Ausführung und initialisiert jedes Modul von jQuery, um zu vermeiden, dass globale Variablen beschädigt und kontaminiert werden und andere Codes beeinträchtigt werden.

Code kopieren Der Code lautet wie folgt:

(Funktion(Fenster,undefiniert){
var jQuery = ...
//...
​ window.jQuery = window.$ = jQuery;
})(Fenster);

Darüber hinaus denken Sie vielleicht, dass es bequemer ist, „zuerst so zu schreiben, wie Sie möchten, und es später zu organisieren“, aber gute Programmierer werden ständig auf die Struktur des Programms achten, weiterhin verwandte Funktionen klassifizieren und irrelevante Komponenten trennen . und beziehen Sie diese Verhaltensweisen in den Programmierprozess ein.

Da der globale Namespace die einzige Möglichkeit für unabhängige Komponenten in einem JavaScript-Programm ist, zu interagieren, ist die Verwendung global benannter Steuerelemente unumgänglich. Komponenten oder Bibliotheken müssen einige globale Variablen definieren. zur Verwendung durch andere Teile des Programms. Ansonsten ist es besser, lokale Variablen zu verwenden.

Code kopieren Der Code lautet wie folgt:

this.foo ;//undefiniert
foo = "global foo";
this.foo ;//"global foo"
var foo = "global foo";
this.foo = "geändert";
foo ;//geändert

Der globale Namespace von JavaScript wird auch einem globalen Objekt ausgesetzt, auf das im globalen Bereich des Programms zugegriffen werden kann und das als Anfangswert des Schlüsselworts this dient. In Webbrowsern sind globale Objekte an die globale Fenstervariable gebunden. Das bedeutet, dass Sie zwei Möglichkeiten haben, eine globale Variable zu erstellen: Deklarieren Sie sie mithilfe von var im globalen Gültigkeitsbereich oder fügen Sie sie dem globalen Objekt hinzu. Der Vorteil der Verwendung der var-Deklaration besteht darin, dass sie die Auswirkungen globaler Variablen im Programmbereich klar ausdrücken kann.

Angesichts der Tatsache, dass Verweise auf gebundene globale Variablen Laufzeitfehler verursachen können, ist es für Benutzer Ihres Codes einfacher zu verstehen, welche globalen Variablen das Programm deklariert, wenn Sie die Bereiche klar und prägnant halten.

Da das globale Objekt einen dynamischen Antwortmechanismus für die globale Umgebung bereitstellt, können Sie es verwenden, um eine laufende Umgebung abzufragen und zu erkennen, welche Funktionen auf dieser Plattform verfügbar sind.

eg.ES5 führt ein globales JSON-Objekt zum Lesen und Schreiben von Daten im JSON-Format ein.

Code kopieren Der Code lautet wie folgt:

if(!this.JSON){
This.JSON = {
           parse: ..,
          stringify: ...                         }  
}

Wenn Sie eine JSON-Implementierung bereitstellen, können Sie natürlich einfach und bedingungslos Ihre eigene Implementierung verwenden. Aber die von der Hosting-Umgebung bereitgestellten integrierten Implementierungen sind fast besser geeignet, da sie in C in den Browser geschrieben werden. Weil sie streng auf Korrektheit und Konsistenz anhand bestimmter Standards überprüft werden und im Allgemeinen eine bessere Leistung bieten als Implementierungen von Drittanbietern.

Der ursprüngliche Entwurf des Datenstrukturkurses simulierte die grundlegenden Operationen von Zeichenfolgen und erforderte, dass von der Sprache selbst bereitgestellte Methoden nicht verwendet werden konnten. JavaScript implementiert die grundlegenden Operationen auf Arrays sehr gut, wenn es nur für allgemeine Lernzwecke dient, ist die Idee, die von der Sprache selbst bereitgestellten Methoden zu simulieren, aber wenn Sie wirklich in die Entwicklung investieren, besteht keine Notwendigkeit Erwägen Sie zunächst die Verwendung der integrierten Methoden von JavaScript.

1.2 Vermeiden Sie die Verwendung mit

Die with-Anweisung bietet jegliche „Annehmlichkeit“, die Ihre Anwendung unzuverlässig und ineffizient macht. Wir müssen eine Reihe von Methoden für ein einzelnes Objekt nacheinander aufrufen. Durch die Verwendung der with-Anweisung können wiederholte Verweise auf Objekte leicht vermieden werden:

Code kopieren Der Code lautet wie folgt:

Funktionsstatus(Info){
var widget = new Widget();
mit(Widget){
             setBackground("blue");
             setForeground("white");
             setText("Status: " info);
show();
}  
}

Es ist auch verlockend, Variablen aus Modulobjekten mithilfe der with-Anweisung zu „importieren“.

Code kopieren Der Code lautet wie folgt:

Funktion f(x,y){
with(Mathe){
           return min(round(x),sqrt(y));//Abstrakte Referenz
}
}

Tatsächlich behandelt JavaScript alle Variablen gleich. JavaScript sucht nach Variablen, beginnend im innersten Bereich und nach außen arbeitend. Die with-Sprache behandelt ein Objekt so, als ob es einen Variablenbereich darstellt. Daher beginnt die Variablensuche innerhalb eines with-Blocks mit der Suche nach den Eigenschaften des angegebenen Variablennamens. Wenn die Eigenschaft in diesem Objekt nicht gefunden wird, wird die Suche im äußeren Bereich fortgesetzt. Jeder Verweis auf eine externe Variable in einem with-Block setzt implizit voraus, dass es im with-Objekt (und keinem seiner Prototypobjekte) keine Eigenschaft mit demselben Namen gibt. Das Erstellen oder Ändern des with-Objekts oder seines Prototypobjekts an anderer Stelle im Programm folgt nicht unbedingt dieser Annahme. Natürlich liest die JavaScript-Engine nicht den lokalen Code, um herauszufinden, welche lokalen Variablen Sie verwenden. JavaScript-Bereiche können als effiziente interne Datenstrukturen dargestellt werden und die Suche nach Variablen kann sehr schnell erfolgen. Da der With-Codeblock jedoch die Prototypenkette des Objekts durchsuchen muss, um alle Variablen im With-Code zu finden, ist seine Ausführungsgeschwindigkeit viel langsamer als die normaler Codeblöcke.

Statt mit Sprache besteht die einfache Möglichkeit darin, das Objekt an einen kurzen Variablennamen zu binden.

Code kopieren Der Code lautet wie folgt:

Funktionsstatus(Info){
var w = new Widget();
 
w.setBackground("blue");
w.setForeground("white");
              w.setText("Status: " info);
w.show();

}

In anderen Fällen besteht der beste Ansatz darin, die lokale Variable explizit an die relevante Eigenschaft zu binden.

Code kopieren Der Code lautet wie folgt:

Funktion f(x,y){
var min = Math.min,
Round = Math.round,
          sqrt   = Math.sqrt;                                         Gibt min(round(x),sqrt(y));
zurück }

1.3 Beherrscht Verschlüsse

Es gibt ein einziges Konzept zum Verständnis von Abschlüssen:

a) Mit JavaScript können Sie auf Variablen verweisen, die außerhalb der aktuellen Funktion definiert sind.

Code kopieren Der Code lautet wie folgt:

Funktion makeSandwich(){
var magicIngredient = "Erdnussbutter";
Funktion make(filling){
         return magicIngredient " und " Füllung;
}
Return make("jelly");
}
makeSandwich();// "Erdnussbutter und Gelee"

b) Auch wenn die externe Funktion zurückgegeben wurde, kann die aktuelle Funktion immer noch auf die in der externen Funktion definierten Variablen verweisen

Code kopieren Der Code lautet wie folgt:

Funktion makeSandwich(){
var magicIngredient = "Erdnussbutter";
Funktion make(filling){
         return magicIngredient " und " Füllung;
}
Zurück machen;
}
var f = sandwichMaker();
f("Gelee");                                                                                                                                                                                                // „Erdnussbutter und Gelee“
f("Bananen");                        // "Erdnussbutter und Bananen"
f("Malven");                         // "Erdnussbutter und Malven"

Die Funktionswerte von Javascriptd enthalten mehr Informationen als der Code, der zum Ausführen erforderlich ist, wenn sie aufgerufen werden. Darüber hinaus speichern JavaScript-Funktionswerte auch intern Variablen, auf die sie verweisen können und die in ihrem umschließenden Bereich definiert sind. Funktionen, die Variablen innerhalb des von ihnen abgedeckten Bereichs verfolgen, werden als Abschlüsse bezeichnet.

Die Make-Funktion ist ein Abschluss und ihr Code bezieht sich auf zwei externe Variablen: magicIngredient und Füllung. Immer wenn die Make-Funktion aufgerufen wird, kann ihr Code auf diese beiden Variablen verweisen, da der Abschluss diese beiden Variablen speichert.

Eine Funktion kann auf jede Variable innerhalb ihres Gültigkeitsbereichs verweisen, einschließlich Parameter und externe Funktionsvariablen. Wir können dies nutzen, um eine allgemeinere SandwichMaker-Funktion zu schreiben.

Code kopieren Der Code lautet wie folgt:

Funktion makeSandwich(magicIngredient){
Funktion make(filling){
         return magicIngredient " und " Füllung;
}
Zurück machen;
}
var f = sandwichMaker("ham");
f("Käse");                               // „Schinken und Käse“
f("Senf");                                   // "Schinken und Senf"

Verschlüsse sind eine der elegantesten und ausdrucksstärksten Funktionen von JavaScript und bilden das Herzstück vieler Redewendungen.

c) Abschlüsse können den Wert externer Variablen aktualisieren. Tatsächlich speichern Abschlüsse Verweise auf externe Variablen, keine Kopien ihrer Werte. Daher können Aktualisierungen für jeden Abschluss vorgenommen werden, der Zugriff auf diese externen Variablen hat.

Code kopieren Der Code lautet wie folgt:

Funktionsbox(){
var val = undefiniert;
Geben Sie {
zurück ​​​​​ set: function(newval) {val = newval;},
             get: function (){return val;},
         Typ: function(){return typeof val;}
};
}
var b = box();
b.type(); //undefiniert
b.set(98.6);
b.get();//98.6
b.type();//number

Dieses Beispiel erzeugt ein Objekt, das drei Abschlüsse enthält. Diese drei Abschlüsse sind Set-, Type- und Get-Eigenschaften. Sie haben alle Zugriff auf die Variable val. Der Set-Abschluss aktualisiert den Wert von val. Rufen Sie dann get auf und geben Sie ein, um die aktualisierten Ergebnisse anzuzeigen.

1.4 Verbesserungen der Variablendeklaration verstehen

Javascript unterstützt diese Scoping-Methode (der Verweis auf die Variable foo wird an den Bereich gebunden, der der Deklaration der foo-Variablen am nächsten liegt), unterstützt jedoch kein Scoping auf Blockebene (der Gültigkeitsbereich der Variablendefinition ist nicht der (nächster umschließender Bereich) Anweisung oder Codeblock).

Wenn Sie diese Funktion nicht verstehen, kann dies zu einigen subtilen Fehlern führen:

Code kopieren Der Code lautet wie folgt:

Funktion isWinner(player,others){
var most = 0;
for(var i = 0,n = other.length ;i            var player = other[i];
If(player.score > most){
                                                                                                                                                           höchste = Spielerpunktzahl;           }
}
Gibt den höchsten Spielerscore zurück;
}

1.5 Vorsicht vor der umständlichen Festlegung des Gültigkeitsbereichs benannter Funktionsausdrücke

Code kopieren Der Code lautet wie folgt:

Funktion double(x){ return x*2; var f = function(x){ return x*2;


Derselbe Funktionscode kann auch als Ausdruck verwendet werden, hat aber völlig unterschiedliche Bedeutungen. Der offizielle Unterschied zwischen anonymen Funktionen und benannten Funktionsausdrücken besteht darin, dass letztere an eine Variable mit demselben Funktionsnamen wie eine lokale Variable der Funktion gebunden sind. Dies kann zum Schreiben rekursiver Funktionsausdrücke verwendet werden.

Code kopieren Der Code lautet wie folgt: var f = Funktion find(tree,key){

//....

Geben Sie find(tree.left, key) || zurück                     find(tree.right,key);                                                 }



Es ist zu beachten, dass der Gültigkeitsbereich der Variablen find nur innerhalb ihrer eigenen Funktion liegt. Im Gegensatz zu Funktionsdeklarationen können benannte Funktionsausdrücke nicht extern über ihre internen Funktionsnamen referenziert werden.

Code kopieren

Der Code lautet wie folgt: find(myTree,"foo");//Fehler: find ist nicht definiert; var Konstruktor = function(){ return null; var f= function(){ Return-Konstruktor();

};

f();//{}(in ES3-Umgebungen)

Dieses Programm sieht so aus, als würde es Null generieren, aber es generiert tatsächlich ein neues Objekt.

Da der Bereich der benannten Funktionsvariablen genau wie die with-Anweisung Object.prototype.constructor (d. h. den Konstruktor von Object) erbt, wird dieser Bereich von der dynamischen Änderung von Object.prototype beeinflusst. Um zu vermeiden, dass Objekte den Umfang von Funktionsausdrücken in Ihrem System verunreinigen, vermeiden Sie das Hinzufügen von Eigenschaften zu Object.prototype und vermeiden Sie die Verwendung lokaler Variablen mit demselben Namen wie Standardeigenschaften von Object.prototype.

Ein weiterer Mangel beliebter JavaScript-Engines ist die Förderung von Deklarationen benannter Funktionsausdrücke.

Code kopieren Der Code lautet wie folgt:

var f = function g(){return 17;}
g(); //17 (in nicht konformer Umgebung)

Einige JavaScript-Umgebungen behandeln die beiden Funktionen f und g sogar als unterschiedliche Objekte, was zu unnötiger Speicherzuweisung führt.

1.6 Vorsicht vor umständlichen Bereichsdeklarationen für lokale Blockfunktionen

Code kopieren Der Code lautet wie folgt:

Funktion f() {return „global“ ; Funktionstest(x){
Funktion f(){return "local";}
var result = [];
If(x){
          result.push(f());
}  
result.push(f());
Ergebnis Ergebnis;
}
test(true); //["local","local"]
test(false); //["local"]

Code kopieren Der Code lautet wie folgt:

Funktion f() {return „global“ ; Funktionstest(x){
var result = [];
If(x){
           function f(){return "local";}
          result.push(f());
}  
result.push(f());
Ergebnis Ergebnis;
}
test(true); //["local","local"]
test(false); //["local"]

Javascript hat keinen Geltungsbereich auf Blockebene, daher sollte der Geltungsbereich der internen Funktion f die gesamte Testfunktion sein. Dies gilt für einige JavaScript-Umgebungen, aber nicht alle JavaScript-Implementierungen melden solche Funktionen als Fehler im strikten Modus (ein Programm im strikten Modus mit einer lokalen Blockfunktionsdeklaration meldet dies als Syntaxfehler). -Portabler Code und geben Sie lokalen Blockfunktionsdeklarationen für zukünftige Versionen des Standards eine sinnvollere und zuverlässigere Semantik. In dieser Situation können Sie erwägen, eine lokale Variable in der Testfunktion zu deklarieren, die auf die globale Funktion f zeigt.