10 praktische Tipps für JavaScript-Programmierung_Javascript-Kenntnisse-js-Tutorial-php.cn

In diesem Artikel werde ich 10 praktische Javascript-Tipps auflisten, hauptsächlich für Javascript-Neulinge und fortgeschrittene Entwickler. Hoffentlich lernt jeder Leser daraus mindestens einen nützlichen Tipp.

1. Variablenkonvertierung

Sieht einfach aus, aber soweit ich gesehen habe, ist die Verwendung von Konstruktoren wie Array() oder Number() zum Konvertieren von Variablen eine gängige Praxis. Verwenden Sie zum Konvertieren von Variablen immer primitive Datentypen (manchmal auch Literale genannt), was keine zusätzlichen Auswirkungen hat, aber effizienter ist.

Code kopieren Der Code lautet wie folgt:

var myVar = "3.14159",
str = "" myVar , // to string
int = ~~myVar, // to integer
float = 1*myVar, // to float
bool = !!myVar, /* to boolean – beliebige Zeichenfolge mit Länge
und jeder Zahl außer 0 sind wahr */
array = [myVar] // to array

Konstruktoren müssen zum Konvertieren von Datumsangaben (new Date(myVar)) und regulären Ausdrücken (new RegExp(myVar)) verwendet werden, und beim Erstellen regulärer Ausdrücke muss das Format /pattern/flags verwendet werden.

2. Dezimal in Hexadezimal oder Oktal umwandeln oder umgekehrt

Können Sie eine separate Funktion zum Konvertieren von Hexadezimalzahlen (oder Oktalzahlen) schreiben? Hören Sie jetzt auf! Es stehen einfachere vorgefertigte Funktionen zur Verfügung:

Kopieren Sie den Code Der Code lautet wie folgt:

(int ).toString(16); // konvertiert int in hexadezimal, zB 12 => ; "14" 
parseInt(string,16) // konvertiert Hex in Int, z. B. "FF" => 255
parseInt(string,8) // konvertiert Oktal in Int, z. B. => 16 

3. Spielen Sie mit Zahlen

Zusätzlich zu dem, was im vorherigen Abschnitt vorgestellt wurde, finden Sie hier weitere Tipps zur Verarbeitung von Zahlen

Kopieren Sie den CodeDer Code ist wie folgt:

0xFF; // Hex-Deklaration, gibt 255 zurück
020; // Oktal-Deklaration, gibt 16 zurück
1e3; // Exponential, wie 1 * Math.pow (10,3), gibt 1000
(1000).toExponential(); // Im Gegensatz zu previous, gibt 1e3
(3.1415).toFixed(3); // Rundung der Zahl zurück, gibt „3.142“ zurück 🎜>

4.Javascript-Versionserkennung

Wissen Sie, welche Javascript-Version Ihr Browser unterstützt? Wenn Sie es nicht wissen, gehen Sie zu Wikipedia und sehen Sie sich die Javascript-Versionstabelle an. Aus irgendeinem Grund werden einige Funktionen von Javascript 1.7 nicht allgemein unterstützt. Die meisten Browser unterstützen jedoch die Funktionen der Versionen 1.8 und 1.8.1. (Hinweis: Alle IE-Browser (IE8 oder älter) unterstützen nur Javascript-Version 1.5) Hier ist ein Skript, das nicht nur die JavaScript-Version durch Erkennung von Funktionen erkennen kann, sondern auch die von einer bestimmten Javascript-Version unterstützten Funktionen überprüfen kann.

Code kopieren Der Code lautet wie folgt:

var JS_ver = [];

 (Number.prototyp.toFixed)?JS_ver.push("1.5"):false;
([].indexOf && [].forEach)?JS_ver.push("1.6"):false;
(( function() {try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?JS_ver.push("1.7"):false;
([ ].reduce && [].reduceRight && JSON)?JS_ver.push("1.8"):false;
("".trimLeft)?JS_ver.push("1.8.1"):false;
JS_ver .supports = function()
{
　if (arguments[0])
　 return (!!~this.join().indexOf(arguments[0] ",") "," );
 else
 return (this[this.length-1]);
}
alert("Neueste unterstützte Javascript-Version: " JS_ver.supports());
alert(" Unterstützung für Version 1.7: " JS_ver.supports("1.7"));

5. Verwenden Sie window.name für eine einfache Sitzungsverarbeitung

Das ist etwas, was mir wirklich gefällt. Sie können eine Zeichenfolge als Wert der Eigenschaft window.name angeben, bis Sie die Registerkarte oder das Fenster schließen. Obwohl ich keine Skripte bereitgestellt habe, empfehle ich Ihnen dringend, diese Methode zu nutzen. Beim Erstellen einer Website oder Anwendung ist es beispielsweise sehr nützlich, zwischen dem Debug- und Testmodus zu wechseln.

6. Bestimmen Sie, ob das Attribut vorhanden ist

Dieses Problem umfasst zwei Aspekte: nicht nur die Überprüfung der Existenz des Attributs, sondern auch das Ermitteln des Typs des Attributs. Aber diese Kleinigkeiten übersehen wir immer:

Code kopieren Der Code lautet wie folgt:

// SCHLECHT: Dies führt zu einem Fehler im Code, wenn foo undefiniert ist
if (foo) {
　doSomething();
}
// GUT: Dies funktioniert nicht Es verursacht jedoch keine Fehler. Selbst wenn 
// foo auf NULL oder false gesetzt ist, wird die Bedingung als wahr validiert
if (typeof foo != "undefined") {
　doSomething();
}
// BESSER: Dies verursacht keine Fehler und außerdem
// Werte NULL oder false werden nicht als wahr validiert
if (window.foo) {
　doSomething () ;
}

In einigen Fällen jedoch, wenn wir eine tiefere Struktur haben und eine angemessenere Inspektion benötigen, können wir Folgendes tun:

Kopieren Sie den Code Der Code lautet wie folgt:

// HÄSSLICH: Wir müssen die Existenz jedes
// Objekts nachweisen, bevor wir sicher sein können, dass die Eigenschaft tatsächlich existiert 
if ( window.oFoo && oFoo.oBar && oFoo.oBar.baz) {
　doSomething();
}

7. Übergeben Sie Parameter an die Funktion

Wenn eine Funktion sowohl erforderliche als auch optionale Parameter hat, könnten wir Folgendes tun:

Code kopieren Der Code lautet wie folgt:

function doSomething(arg0, arg1, arg2, arg3, arg4) {
　...
}
doSomething('', 'foo', 5, [], false);

Und die Übergabe eines Objekts ist immer bequemer als die Übergabe einer Reihe von Parametern:

Code kopieren Der Code lautet wie folgt:

function doSomething() {
　/ Verlässt die Funktion, wenn nichts übergeben wird
　if (!arguments[0]) {
　return false; 
　}
 var oArgs = arguments[0]
 arg0 = oArgs.arg0 ||. "",
 arg1 = oArgs.arg1 ||. "",
 arg2 = oArgs.arg2 || 0,
 arg3 = oArgs.arg3 ||. [],
 arg4 = oArgs.arg4 ||. false;
}
doSomething({
 arg1 : "foo",
 arg2 : 5,
 arg4 : false
});

Dies ist nur ein sehr einfaches Beispiel für die Übergabe eines Objekts als Parameter. Wir können beispielsweise auch ein Objekt mit dem Variablennamen als deklarieren Schlüssel und der Standardwert als Wert.

8. Verwenden Sie document.createDocumentFragment()

Möglicherweise müssen Sie mehrere Elemente dynamisch an das Dokument anhängen. Das Einfügen direkt in das Dokument führt jedoch dazu, dass das Dokument jedes Mal neu gestaltet werden muss. Stattdessen sollten Sie Dokumentfragmente verwenden und diese nach der Fertigstellung nur einmal anhängen:

Code kopieren Der Code lautet wie folgt:

function createList() {
　var aLI = ["first item", "second item", "dritte item ",
 "viertes Element", "fünftes Element"];
 // Erstellt das Fragment
 var oFrag = document.createDocumentFragment();
 while (aLI.length) {
 var oLI = document. createElement("li");
 // Entfernt das erste Element aus dem Array und hängt es an
 // als Textknoten an LI-Element
 oLI.appendChild(document.createTextNode(aLI. shift()) );
　oFrag.appendChild(oLI);
　}
　document.getElementById('myUL').appendChild(oFrag);
}

9. Übergeben Sie eine Funktion an die Methode replace()

Manchmal möchten Sie einen bestimmten Teil einer Zeichenfolge durch einen anderen Wert ersetzen. Der beste Weg besteht darin, eine separate Funktion an String.replace() zu übergeben. Das Folgende ist ein einfaches Beispiel:

Code kopieren Der Code lautet wie folgt:

var sFlop = „Flop: [Ah] [Ks] [7c]“;
var aValues ​​​​= {“A“: „Ass“, „K“: „König“, 7: „Sieben“};
 var aSuits = {"h":"Herzen", "s": "Pik",
"d": "Diamanten", "c": "Kreuze"};
sFlop = sFlop.replace(/ [w ]/gi, function(match) {
 Match = match.replace(match[2], aSuits[match[2]]);
 match = match.replace(match[1], aValues[ match[1]] " of ");
　return match;
});
// string sFlop enthält jetzt:
// "Flop: [Herz-Ass] [Pik-König] [Kreuzsieben]“ 

10. Verwendung von Etiketten in Schleifen

Manchmal gibt es Schleifen, die in Schleifen verschachtelt sind. Möglicherweise möchten Sie die Schleife verlassen, sodass Sie Tags verwenden können:

Code kopieren Der Code lautet wie folgt:

outerloop:
for (var iI=0;iI<5;iI ) {
　if (somethingIsTrue()) {
 // Unterbricht die Iteration der äußeren Schleife
 break äußerer Schleife;
}
 innerloop:
 for (var iA=0;iA<5;iA ) {
 if (somethingElseIsTrue()) {
 // Unterbricht die Iteration der inneren Schleife
　break innerloop;
　}
　}
}