Die Rolle des JavaScript -Entwurfsmusters besteht darin, die Wiederverwendbarkeit und Lesbarkeit des Codes zu verbessern und den Code zu erleichtern und zu erweitern.
In JavaScript ist eine Funktion eine Klasse von Objekten, was bedeutet, dass sie als Parameter an andere Funktionen übergeben werden kann. Darüber hinaus kann die Funktion auch Umfang bieten.
Syntax zum Erstellen einer Funktion
Benannte Funktionsausdrücke
Die Codekopie lautet wie folgt:
// Namensfunktion Ausdruck
var add = Funktion add (a, b) {
Return a+b;
};
Funktionsausdrücke
Die Codekopie lautet wie folgt:
// auch als anonyme Funktion bezeichnet
var add = Funktion (a, b) {
Return a+b;
};
Der Wert, der dem Variablen -Add zugewiesen wird, ist die Funktionsdefinition selbst. Auf diese Weise wird Add zu einer Funktion, die überall aufgerufen werden kann.
Funktionserklärung
Die Codekopie lautet wie folgt:
Funktion foo () {
// Code hier
} // Hier wird kein Semikolon benötigt
Bei nachlaufenden Semikolonen sollten Funktionsausdrücke immer Semikolonen verwenden, und das Ende von Semikolonen ist in der Erklärung der Funktion nicht erforderlich.
Funktionserklärungen und Ausdrücke
Funktionsförderung (Heben)
Das Verhalten einer Funktionserklärung entspricht nicht einem benannten Funktionsausdruck. Der Unterschied ist das Hebeverhalten. Siehe das folgende Beispiel:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
// Globale Funktion
Funktion foo () {alert ("global foo!");}
Funktions bar () {alert ('Global balk');};
Funktion hoist () {
console.log (typeof foo); // Funktion
console.log (typeof bar); // undefiniert
foo (); // Lokale Foo!
bar (); // typeerror: 'undefined' ist keine Funktion
// Variable Foo und Implementierer werden befördert
Funktion foo () {
ALERT ('LOCAL FOO! ');
}
// Nur der variable Balken wird gefördert, der Teil der Funktionsinimposition wird nicht gefördert
var bar = function () {
ALERT ('Local Bar!');
};
}
hissen();
</script>
Für alle Variablen, wo immer sie im Körper deklariert werden, werden sie intern auf die oberste Funktion befördert. Der Grund für die allgemeine Anwendung von Funktionen ist, dass Funktionen nur Objekte sind, die Variablen zugeordnet sind.
Wie der Name schon sagt, bedeutet Verbesserung, die folgenden Dinge an die Spitze zu erwähnen. In JS soll die in den folgenden definierten Dinge (Variablen oder Funktionen) auf die vorherige Definition definiert werden. Wie aus dem obigen Beispiel ersichtlich ist, bewegen sich Foo und Bar in der Funktion im Inneren der Funktion nach oben, wodurch die globalen Foo- und Barfunktionen abdeckt. Der Unterschied zwischen lokalen Funktionen Bar und Foo besteht darin, dass Foo nach oben befördert wird und normal laufen kann, während die Definition von bar () nicht verbessert wurde, nur seine Erklärung wird gefördert. Wenn bar () ausgeführt wird, ist das Ergebnis daher undefiniert, anstatt als Funktion verwendet zu werden.
Echtzeit-Funktionsmodus
Funktionen sind auch Objekte, sodass sie als Rückgabewerte verwendet werden können. Der Vorteil der Verwendung von Selbstversorgungsfunktionen besteht darin, eine anonyme Funktion direkt zu deklarieren und sofort zu verwenden, um zu vermeiden, dass eine Funktion nicht verwendet wird, die nicht einmal verwendet wird, und sie wird vom Problem der Namenskonflikte vermieden. Es gibt kein Konzept des Namespace in JS, daher ist es einfach, Funktionsnamenkonflikte zu haben. Sobald ein Namenskonflikt vorgenommen wurde, wird der zuletzt erklärte, dass man sich durchsetzt.
Modus 1:
Die Codekopie lautet wie folgt:
<Script>
(function () {
var a = 1;
return function () {
Alarm (2);
};
} () ()); // pop 2, die ersten Klammern führen sich selbst aus, und die zweiten Klammern führen die interne anonyme Funktion aus
</script>
Muster 2: Zeigen von Selbstversorgungsfunktionsvariablen
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
var result = (function () {
Rückkehr 2;
}) (); // Die Funktion wurde hier ausgeführt
Alarm (Ergebnis); // Ergebnispunkte auf den Rückgabewert 2 der selbst ausgeführten Funktion; Wenn Ergebnis () auftaucht, tritt ein Fehler auf.
</script>
Muster drei: verschachtelte Funktionen
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
var result = (function () {
return function () {
Rückkehr 2;
};
}) ();
alarm (result ()); // 2 taucht beim Alarm auf (Ergebnis); function () {return 2}
</script>
Modus 4: Self-Execution-Funktion weist ihren Rückgabewert einer Variablen zu
Die Codekopie lautet wie folgt:
var abc = (function () {
var a = 1;
return function () {
return ++ a;
}
}) (); // Die Selbstversorgungsfunktion gibt die Funktion nach der Rückkehr zur Variablen zurück
ALERT (ABC ()); // Wenn es alarm (ABC) ist, wird der Code nach der Rückkehrerklärung angezeigt. Wenn es ABC () ist, wird die Funktion nach der Rückgabe ausgeführt
Muster 5: Die Funktion führt sich intern aus, rekursiv
Die Codekopie lautet wie folgt:
// Dies ist eine Selbstausnahmefunktion, die Funktion führt sich intern aus, rekursiv
Funktion ABC () {ABC (); }
Rückrufmodus
Rückruffunktion: Wenn Sie eine Funktion übergeben, write () als Argument an eine andere Funktion CALL (), dann kann Call () irgendwann ausführen (oder aufrufen). Schreiben Sie (). In diesem Fall wird Write () als Rückruffunktion bezeichnet.
Asynchroner Event -Hörer
Der Callback -Modus hat viele Verwendungszwecke, beispielsweise wenn ein Ereignishörer an ein Element auf der Seite angeschlossen ist, bietet er tatsächlich einen Zeiger auf eine Rückruffunktion, die aufgerufen wird, wenn das Ereignis auftritt. wie:
Die Codekopie lautet wie folgt:
document.addeventListener ("click", console.log, false);
Das obige Codebeispiel zeigt die Rückruffunktionskonsole.Log () im Blasenmodus, wenn das Dokument klickt.
JavaScript ist besonders für die ereignisgesteuerte Programmierung geeignet, da der Callback-Modus die Programme unterstützt, um asynchron auszuführen.
Auszeit
Ein weiteres Beispiel für die Verwendung des Callback -Modus ist die Verwendung der Zeitüberschreitungsmethode, die vom Fensterobjekt des Browsers bereitgestellt wird: setTimeout () und setInterval (), wie z. B.:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
var call = function () {
console.log ("100 ms wird gefragt ...");
};
setTimeout (Anruf, 100);
</script>
Rückrufmodus in der Bibliothek
Beim Entwerfen einer JS -Bibliothek wird die Rückruffunktion nützlich sein. Der Code einer Bibliothek sollte so weit wie möglich wiederverwendbarer Code verwenden, und der Rückruf kann dazu beitragen, diese Verallgemeinerung zu erreichen. Wenn wir eine riesige JS -Bibliothek entwerfen, können wir uns nicht auf Kernfunktionen konzentrieren und Rückruffunktionen in "Hook -Form" bereitstellen, die es uns erleichtern, Bibliotheksmethoden zu erstellen, zu skalieren und anzupassen
Currying
Currying ist eine Technik, die eine Funktion in eine neue vereinfachte Funktion umwandelt (um weniger Parameter zu akzeptieren), indem mehrere Parameter in eine Funktionskörper füllen. - 【JavaScript -kompetent】
Einfach ausgedrückt ist Curryisierung ein Konvertierungsprozess, dh der Prozess unserer Umsetzung der Funktionsumleitung. Wie im folgenden Beispiel gezeigt:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
// Curry-basierte add () Funktion
Funktion add (x, y) {
var oldx = x, oldy = y;
if (typeof oldy == "undefined") {
Rückgabefunktion (newy) {
kehren Sie Oldx + Newy zurück;
};
}
// vollständige Anwendung
Rückgabe x+y;
}
//prüfen
Typeof add (5); // Ausgabe "Funktion"
Fügen Sie (3) (4); // 7 hinzu
// eine neue Funktion erstellen und speichern
var add2000 = add (2000);
Add2000 (10); // Ausgabe 2010
</script>
Wenn add () zum ersten Mal aufgerufen wird, schafft es einen Verschluss für die zurückgegebene interne Funktion. Dieser Verschluss speichert die ursprünglichen X- und Y -Werte in die privaten Variablen Oldx und Oldy.
Jetzt können wir willkürliche Funktionen Curry gemeinsame Methoden verwenden, wie z. B.:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
// normale Funktionen
Funktion add (x, y) {
Rückgabe x + y;
}
// Curry Eine Funktion, um eine neue Funktion zu erhalten
var newadd = test (add, 5);
Newadd (4); // 9
// Rufen Sie die neue Funktion direkt an
Test (add, 6) (7); // Ausgabe 13
</script>
Wann man Curry benutzt
Wenn festgestellt wird, dass dieselbe Funktion aufgerufen wird und die meisten der übergebenen Parameter gleich sind, kann die Funktion ein guter Kandidat für die Curryisierung sein