Detaillierte Erläuterung alternativer Schreibmethoden für JavaScript

JavaScript ist eine Skriptsprache, die zum Netzwerk gehört!

JavaScript wird von Millionen von Webseiten verwendet, um das Design zu verbessern, Formulare zu überprüfen, Browser zu erstellen, Cookies zu erstellen und vieles mehr.

JavaScript ist die beliebteste Skriptsprache im Internet.

JavaScript ist einfach zu bedienen! Du wirst es lieben!

JavaScript ist eine interpretierte Skriptsprache mit flexibler Syntax, mit der verschiedene Personen verschiedene Funktionen auf viele verschiedene Arten schreiben können. Wie organisiere ich JavaScript -Code, damit andere auf einen Blick sehen können, dass Sie nicht einfach sind? Freuen Sie sich auf jemanden, der nach dem Lesen Ihres Codes seufzt, "es stellt sich heraus, dass Sie so schreiben können"?

N Möglichkeiten, anonyme Funktionen zu schreiben

Die anonyme Funktion von JS ist eine selbstversorgende Funktion mit nicht deklarierter Funktionsname, und das Format lautet wie folgt:

 (Funktion(){})();

Tatsächlich setzen wir oft ";" Vor dem Projekt:

 ;Funktion(){}();

Weil die Syntax von JS Semikolonen weglassen kann, kann dieser Mechanismus auch zu unerwarteten Fehlern führen. Um Syntaxfehler zu vermeiden, die durch das Zusammenführen und Komprimieren des Codes nach dem Start des Starts verursacht werden, addiert ""; " kann unbekannte Fehler vermeiden.

Aber manchmal sehen wir, dass die Bibliotheken oder Plug-Ins anderer Leute anonyme Funktionen wie diese schreiben:

 +function () {} ();

"+" ist hier ein Bediener, und der Bediener hat eine extrem hohe Priorität. Daher wird der Teil der Funktionserklärung auf der rechten Seite mit Klammern (eigentlich die Art, Funktionen auszuführen) direkt ausgeführt. Tatsächlich kann es nicht nur das "+" -Schild vorhanden sein, sondern auch das Operatoren wie "-", "!", "~" Und "++" können verwendet werden. Hier sind wir nur eine Einführung in die Erweiterung. Welche spezifische Schreibmethode verwendet wird, hängt von den einheitlichen Standards des Teams ab.

Mathematik aufgeben.

Vielleicht habe ich diese beiden Symbole ~~ und | 0 in anderen Codes gesehen und die laufenden Ergebnisse direkt betrachten:

 >> var a1 = 1.23 >> ~~ a11 >> var a2 = 2.345 >> a2 | 02 >> var a3 = -3.45 >> ~~ a3-3 >> var a4 = -4.5 >> a4 | 0-4

Beachten Sie, dass diese Schreibmethode nicht original ist, sondern nur zitiert wird, um diese alternative Schreibmethode zu analysieren und zu erklären. Eine einfache Erklärung ist, dass ~ ein bitgewieller inverser Operator ist, der schwimmende Punktzahlen in ganze Zahlen umwandeln kann, indem alle Bits nach dem Dezimalpunkt verworfen werden. Positive Ganzzahlen können in nicht signierte hexadezimale Werte umgewandelt werden. Dann inverse (~~) negativ und negativ, um positiv zu werden und die ursprüngliche Ganzzahl zu erhalten. Es ist nur so, dass er so mutwillig und ungehindert ist. Glaubst du, es ist eine Optimierung?

Hinweis: Wenn Sie strenge Rundungsvorgänge durchführen müssen, müssen Sie diese Methode mit Vorsicht verwenden, dann müssen Sie die Mathematikfunktion weiterhin verwenden.

Wenn und sonst nicht die einzigen sind

Die Verwendung von IF-ELSE-Bedingungen ist eine sehr klare Logik. Es sieht nicht sehr präzise aus, wenn die Verarbeitung von Daten nicht groß ist:

 if (a === 1) {// Es wird dringend empfohlen, das streng gleiche Symbol "===" zu verwenden, und die Typumwandlung wird nicht durchgeführt.

Schauen Sie sich Folgendes an, um || zu verwenden und &&, damit der Code Gewicht verliert:

 ((a === 1) && (true, a = 2)) || ((a === 3) && (true, a = 4)) || (a = 5)

Es wird in einer Linie geschehen und Sie werden erfolgreich das Gewicht verlieren. || und &&, das einfache Prinzip ist nicht zu erwähnen. Es ist nicht leicht zu verstehen, wenn Sie den Komma -Operator verwenden. Sie können es weiterhin in den ternären Operator ändern:

 (a === 1)? a = 2 :( (a === 3)? (a = 4): (a = 5))

Diese Art des Schreibens scheint vereinfacht genug zu sein, aber es wird für andere etwas schwierig sein, Ihren Code zu sehen.

Ersetzen Sie die Dom -Struktur der störenden Zeichenfolge durch das ToString

Wenn wir dynamisch eine DOM -Struktur erzeugen wollen, implementieren wir sie im Allgemeinen wie folgt:

 var template = "<div>"+ "<h2> {title} </h2>"+ "<div class = 'content' yattr = ''> {content} </div>"+ "</div>"

Wenn verschiedene Attribute und Parameter hinzugefügt werden, ist es einfach, Fehler zu melden, wenn die großen und kleinen Zitate verwirrt sind. ES6 bietet jedoch eine Vorlagenzeichenfolge, mit der wir dieses Problem lösen können. Sie können sie so schreiben:

 var template = <div> <h2> {title} </h2> <div class = 'content' yattr = ''> {content} </div> </div>

Das Problem ist jedoch, dass ES6 noch nicht offiziell angekommen ist ... Hab keine Angst, Funktion. TOString wird die Verlegenheit lösen, wenn wir nicht verbunden sind:

 var rcompompment = ////*([/s/s]*?)/*///; // String -Funktion ms (fn) {return fn.toString (). Match (rcomport) [1]}; ms (function () {/ * <div> <h2> {title} </h2> <div class = 'content' yattr = ''> {content} </div> </div> */})

Die Ausgabe hier entspricht der vorherigen String -Ausgabe. Front-End-Programmierer müssen nur auf ihre eigene DOM-Struktur achten.

Fügen Sie AMD -Modulunterstützung hinzu, Eingabeaufforderung Code B

Deklarieren Sie die Spezifikation „AMD (Asynchronous Modul Definition) in den von Ihnen geschriebenen Code, damit andere Ihr Modul direkt durch die AMD -Spezifikation laden können. Wenn andere Ihr Modul nicht durch die Spezifikation laden, können Sie auch ein reguläres globales Objekt elegant zurückgeben. Schauen wir uns die Schreibmethode von Jqueryui an:

 (Funktion (factory) {if (typeof define === "function" && define.amd) {// amd modus. Und verlassen Sie sich auf das Plug-In "jQuery" define (["jQuery"], factory);} else {// Browser Global Mode Factory (jQuery);}} (Funktion ($) {{$) {// Die Module, die die Module $ zurückgegeben haben.

Ändern Sie es in die Struktur des AMD-Moduls, um Ihren Code für den Browser-Side-Lade-Skriptabhängigkeiten besser geeignet zu machen. Schreiben Sie Code in diesem Format, um sicherzustellen, dass andere wissen, dass Sie ein professioneller Entwickler sind, sobald Sie sich den Code ansehen.

Die beste Vererbungsmethode

JavaScript verfügt über mehr als zehn Vererbungsmethoden, sowohl groß als auch klein. Die Vor- und Nachteile jeder Schreibmethode sind unterschiedlich, und jede Methode ist nicht nacheinander aufgeführt. Nehmen Sie als Beispiel eine gemeinsame Vererbungsmethode an, die Prototyp -Vererbung:

 function parent () {} function child () {} child.prototype = parent.prototypechild.prototype.Constructor = child;

Diese Methode zeigt tatsächlich den in Child.Prototyp und übergeordneten Zeiger gespeicherten Zeiger auf dasselbe Objekt. Wenn also einige Eigenschaften im Child -Objektprototyp erweitert werden, so dass der übergeordnete Objektprototyp später weiterhin wird, wird auch der übergeordnete Objektprototyp neu geschrieben. Um dieses Problem zu lösen, versuchen Sie, eine vorübergehende Konstruktor -Schreibmethode auszuleihen:

 Funktion leer () {} leere

Auf diese Weise sind die eigenen Eigenschaften und Prototypmethoden des übergeordneten Objekts geschützt. "Optimal" ist etwas übertrieben, aber im Vergleich. Ich glaube, jeder hat seinen eigenen Schreibstil, und es gibt auch die Vor- und Nachteile des Kreditaufrufs und der Anwendung, um Attributerbschaft zu implementieren. Die Länge ist begrenzt und ich werde sie nacheinander nicht vorstellen.

Zusammenfassen

Alle oben genannten alternativen Schreibmethoden von JavaScript sind Syntaxzucker für leicht verständliche oder verbesserte Effizienz. Solche Methoden sind vorzuziehen, wie die Praxis, wie oben erwähnt IF-ELSE wegzulassen. Einige sollen die Kompatibilität und Leistung unseres Codes wie AMD- und Vererbungsmethoden verbessern. ... Ich bin ein Anfänger, und es gibt sicherlich einige unvollständige und ungeklärte Inhalte im obigen Inhalt.

Der obige Inhalt ist eine verwandte Einführung in alternative Schreibmethoden für JavaScript. Ich hoffe, dass es für alle hilfreich sein wird!