einführen
Einige der in diesem Artikel eingeführten Modi werden als Initialisierungsmodus und Leistungsmodus bezeichnet, die hauptsächlich für die Initialisierung und Leistungsverbesserung verwendet werden. Einige Modi wurden bereits erwähnt, daher ist hier nur eine Zusammenfassung.
Funktionen, die sofort ausgeführt werden
Im 4. Kapitel dieser Serie "Funktionsausdrücke nun now" haben wir ähnliche Funktionen im Detail beschrieben. Hier geben wir nur zwei einfache Beispiele zum Zusammenfassen.
Die Codekopie lautet wie folgt:
// Führen Sie die Funktion nach der Deklaration sofort aus
(function () {
console.log ('pass out!');
} ());
// Auf diese Weise deklarierte Funktionen können auch sofort ausgeführt werden
! function () {
console.log ('pass out!');
} ();
// Die folgende Methode ist auch in Ordnung
~ function () { / * code * /} ();
-Function () { / * Code * /} ();
+function () { / * code * /} ();
Sofort ausgeführte Objektinitialisierung
Dieses Muster bedeutet, dass eine der Methoden im Objekt sofort ausgeführt wird, um die Initialisierungsarbeiten auszuführen (keine Funktion), wenn ein Objekt deklariert wird (keine Funktion). Normalerweise kann dieses Muster in Code verwendet werden, das gleichzeitig ausgeführt wird.
Die Codekopie lautet wie folgt:
({{
// Hier können Sie Konstanten definieren und andere Werte festlegen
Maxwidth: 600,
MaxHeight: 400,
// Natürlich können Sie auch Dienstprogrammmethoden definieren
Gimmemax: function () {
Gibt dies zurück. Maxwidth + "x" + this.maxHeight;
},
// Initialisierung
init: function () {
console.log (this.gimmemax ());
// mehr Code ...
}
}). init (); // Dies beginnt die Initialisierung
Zweiginitialisierung
Die Initialisierung der Zweigbeschreibung bezieht sich auf die Initialisierung verschiedener Codes gemäß verschiedenen Bedingungen (Szenarien), die die sogenannte bedingte Anweisungszuweisung ist. Bei der Ereignisverarbeitung verwendeten wir in der Regel Codes wie folgende Codes:
Die Codekopie lautet wie folgt:
var utils = {
addierener: function (el, type, fn) {
if (typeof window.addeventListener === 'Funktion') {
El.AddeventListener (Typ, fn, false);
} else if (typeof document.attachEvent! == 'undefined') {
El.AttacheEvent ('on' + Typ, fn);
} anders {
el ['on' + type] = fn;
}
},
removelistener: function (el, type, fn) {
}
};
Lassen Sie es uns verbessern. Zunächst müssen wir zwei Schnittstellen definieren, eine für das Add -Ereignisgriff und das andere für das Entfernen von Ereignisgründen. Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
var utils = {
Addierener: null,
Removelistener: NULL
};
Der Implementierungscode lautet wie folgt:
Die Codekopie lautet wie folgt:
if (typeof window.addeventListener === 'Funktion') {
utils.AddListener = Funktion (el, type, fn) {
El.AddeventListener (Typ, fn, false);
};
} else if (typeof document.attachEvent! == 'undefined') {// dh
utils.AddListener = Funktion (el, type, fn) {
El.AttacheEvent ('on' + Typ, fn);
};
utils.removelistener = function (el, type, fn) {
El.DetACHEvent ('on' + Typ, fn);
};
} else {// andere alte Browser
utils.AddListener = Funktion (el, type, fn) {
el ['on' + type] = fn;
};
utils.removelistener = function (el, type, fn) {
el ['on' + type] = null;
};
}
Ist es nicht sehr bequem zu bedienen? Der Code ist viel eleganter.
Selbstverstärkerungsfunktionen
Im Allgemeinen wird der gleichnamige Funktionscode innerhalb der Funktion umschreiben, wie z. B.:
Die Codekopie lautet wie folgt:
var scareme = function () {
Alarm ("Boo!");
scarme = function () {
Alarm ("Double Boo!");
};
};
Diese Art von Code ist sehr verwirrend. Schauen wir uns zunächst die Ausführungsergebnisse des Beispiels an:
Die Codekopie lautet wie folgt:
// 1. Fügen Sie neue Attribute hinzu
scarme.property = "richtig";
// 2. Scareme weist einen neuen Wert zu
var priank = scarme;
// 3.. Rufen Sie als Methode auf
var spooky = {
Boo: Scarme
};
// rufen Sie mit einem neuen variablen Namen an
Streich(); // "Boo!"
Streich(); // "Boo!"
console.log (priank.property); // "richtig"
// rufen Sie mit der Methode auf
spooky.boo (); // "Boo!"
spooky.boo (); // "Boo!"
console.log (spooky.boo.property); // "richtig"
Durch das Ausführungsergebnis ist festzustellen, dass die Zuordnung der Funktion einer neuen Variablen (oder einer internen Methode) den Code nicht den überladenen Scarme -Code ausführt und das folgende Beispiel genau das Gegenteil ist:
Die Codekopie lautet wie folgt:
// Verwenden Sie Selbstdeklarierungsfunktionen
Scarme (); // Double Boo!
Scarme (); // Double Boo!
console.log (scareme.property); // undefiniert
Bei der Verwendung dieses Modells müssen Sie sehr vorsichtig sein, andernfalls kann sich das tatsächliche Ergebnis von dem erwarteten Ergebnis unterscheiden. Natürlich können Sie dieses Special auch einige besondere Operationen ausführen.
Speicheroptimierung
Dieses Muster verwendet hauptsächlich die Attributmerkmale der Funktion, um eine große Anzahl wiederholter Berechnungen zu vermeiden. Das übliche Codeformular lautet wie folgt:
Die Codekopie lautet wie folgt:
var myfunc = function (param) {
if (! myfunc.cache [param]) {
var result = {};
// ... komplexer Betrieb ...
myfunc.cache [param] = result;
}
Myfunc.cache [Param] zurückgeben;
};
// Cache -Speicher
myfunc.cache = {};
Es gibt jedoch ein Problem mit dem obigen Code. Wenn der übergebene Parameter toString oder einige gemeinsame Methoden wie das Objekt ist, tritt das Problem auf. Zu diesem Zeitpunkt müssen Sie die legendäre HasownProperty -Methode verwenden, der Code ist wie folgt:
Die Codekopie lautet wie folgt:
var myfunc = function (param) {
if (! myfunc.cache.hasownProperty (param)) {
var result = {};
// ... komplexer Betrieb ...
myfunc.cache [param] = result;
}
Myfunc.cache [Param] zurückgeben;
};
// Cache -Speicher
myfunc.cache = {};
Wenn Sie mehrere Parameter übergeben, können Sie die Stringyify -Methode von JSON verwenden, um einen Cachekey -Wert für den Speicher zu erzeugen. Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
var myfunc = function () {
var cachekey = json.stringify (array.prototype.slice.call (argumente)),
Ergebnis;
if (! myfunc.cache [cachekey]) {
result = {};
// ... komplexer Betrieb ...
myfunc.cache [cachekey] = Ergebnis;
}
Myfunc.cache [cachekey] zurückgeben;
};
// Cache -Speicher
myfunc.cache = {};
Oder mehrere Parameter können Sie auch die Feature von Argumente verwenden.
Die Codekopie lautet wie folgt:
var myfunc = function (param) {
var f = argumente.callee,
Ergebnis;
if (! f.cache [param]) {
result = {};
// ... komplexer Betrieb ...
F.Cache [Param] = Ergebnis;
}
return f.cache [param];
};
// Cache -Speicher
myfunc.cache = {};
Zusammenfassen
Sie müssen nicht zusammengefasst werden. Schauen Sie sich den Code einfach sorgfältig an