einführen
In diesem Artikel wird hauptsächlich den nächsten Artikel über das Muster des Erstellens von Objekten vorgestellt. Die Verwendung verschiedener Techniken kann Fehler erheblich vermeiden oder einen sehr optimierten Code schreiben.
Muster 6: Funktionssyntaxzucker
Funktionssyntaxzucker ist eine Erweiterung, um einem Objekt schnell Methoden (Funktionen) hinzuzufügen. Dies verwendet hauptsächlich die Eigenschaften des Prototyps. Der Code ist relativ einfach. Schauen wir uns zunächst den Implementierungscode an:
Die Codekopie lautet wie folgt:
if (typeof function.prototype.method! == "function") {
Function.prototype.method = Funktion (Name, Implementierung) {
this.Prototype [name] = Implementierung;
gib dies zurück;
};
}
Wenn Sie ein Objekt erweitern, können Sie es so verwenden:
Die Codekopie lautet wie folgt:
var person = function (name) {
this.name = name;
}
.Method ('GetName',
function () {
kehre diesen namennamen zurück;
})
.Method ('setName', function (name) {
this.name = name;
gib dies zurück;
});
Auf diese Weise fügen wir zwei Methoden hinzu: GetName und SetName zur Personfunktion. Überprüfen wir als nächstes das Ergebnis:
Die Codekopie lautet wie folgt:
var a = neue Person ('adam');
console.log (a.getName ()); // 'Adam'
console.log (A.SetName ('Eve'). getName ()); // 'Vorabend'
Muster 7: Objektkonstante
Objektkonstanten sind die Verkörperung verschiedener Methoden, die von Set, Get, ifdefiniert in einem Objekt bereitgestellt wurden. Darüber hinaus behält die SET -Methode nur die erste Objekt -Set bei, und die spätere Einstellung ist ungültig, was den Zweck erreicht hat, dass andere nicht überlasten können. Der Implementierungscode lautet wie folgt:
Die Codekopie lautet wie folgt:
var konstant = (function () {
var constants = {},
OwnProp = Object.Prototype.hasownProperty,
// Nur diese drei Wertearten sind zulässig
erlaubt = {
Zeichenfolge: 1,
Nummer: 1,,
Boolescher: 1
},
Präfix = (math.random () + "_"). Slice (2);
zurückkehren {
// Setzen Sie die Eigenschaft mit Namensname
SET: Funktion (Name, Wert) {
if (this.isdefined (name)) {
false zurückgeben;
}
if (! OwnProp.call (erlaubt, typeof value)) {
false zurückgeben;
}
Konstanten [Präfix + Name] = Wert;
zurückkehren;
},
// Bestimmen Sie, ob es eine Eigenschaft namens Name gibt
isdefined: function (name) {
return OverProp.call (Constants, Präfix + Name);
},
// Erhalten Sie das Attribut mit dem Namen namens Name
GET: Funktion (Name) {
if (this.isdefined (name)) {
Rückgabekonstanten [Präfix + Name];
}
null zurückkehren;
}
};
} ());
Der Verifizierungscode lautet wie folgt:
Die Codekopie lautet wie folgt:
// Überprüfen Sie, ob es existiert
console.log (konstant.isdefiniert ("maxwidth")); // FALSCH
// Definition
console.log (konstant.set ("maxwidth", 480)); // WAHR
// erneut test
console.log (konstant.isdefiniert ("maxwidth")); // WAHR
// versuche neu zu definieren
console.log (konstant.set ("maxwidth", 320)); // FALSCH
// Bestimmen Sie, ob die ursprüngliche Definition noch vorhanden ist
console.log (konstant.get ("maxwidth")); // 480
Modus 8: Sandbox -Modus
Der Sandbox -Modus bietet einen separaten Kontext für einen oder mehrere Module, ohne den Kontext anderer Module zu beeinflussen. Zum Beispiel gibt es eine Sandbox mit drei Methodenereignissen, DOM und AJAX. Wenn zwei von ihnen aufgerufen werden, eine Umgebung zu bilden, besteht keine Störung der drei Umgebungen. Der Sandbox -Implementierungscode lautet wie folgt:
Die Codekopie lautet wie folgt:
Funktion sandbox () {
// Parameter in Array konvertieren
var args = array.prototype.slice.call (Argumente),
// Der letzte Parameter ist der Rückruf
callback = args.pop (),
// mit Ausnahme des letzten Parameters alle anderen Module ausgewählt werden
modules = (args [0] && typeof args [0] === "String")? Args: Args [0],
ich;
// den neuen Bediener zwingen
if (! (diese Instanz von Sandbox)) {
Neue Sandbox zurückgeben (Module, Rückruf);
}
// Eigenschaften hinzufügen
this.a = 1;
this.b = 2;
// Module diesem Objekt hinzufügen
// Wenn es kein Modul gibt oder der übergebene Parameter "*" ist, werden alle Module in übergeben
if (! Module || module == '*') {
Module = [];
für (i in sandbox.modules) {
if (sandbox.modules.hasownProperty (i)) {
modules.push (i);
}
}
}
// Initialisieren Sie das erforderliche Modul
für (i = 0; i <modules.length; i += 1) {
Sandbox.modules [module [i]] (this);
}
// Anrufrückruf
Rückruf (dies);
}
// standardmäßig Prototypobjekt hinzufügen
Sandbox.prototype = {
Name: "Meine Bewerbung",
Version: "1.0",
GetName: function () {
kehre diesen namennamen zurück;
}
};
Dann definieren wir das Standard -Anfangsmodul:
Die Codekopie lautet wie folgt:
Sandbox.modules = {};
Sandbox.modules.dom = function (box) {
box.getElement = function () {
};
box.getStyle = function () {
};
box.foo = "bar";
};
Sandbox.modules.event = function (box) {
// Zugang zum Sandbox -Prototyp bei Bedarf:
// box.constructor.prototype.m = "mmmm";
box.attachEvent = function () {
};
box.detACHEvent = function () {
};
};
Sandbox.modules.ajax = function (box) {
box.makeRequest = function () {
};
box.getResponse = function () {
};
};
Die Anrufmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
// Rufmethode
Sandbox (['ajax', 'event'], function (box) {
console.log (typeof (box.foo));
// Es gibt keine DOM -Auswahl, also existiert Box.foo nicht
});
Sandbox ('ajax', 'dom', function (box) {
console.log (typeof (box.attachEvent));
// Es wird kein Ereignis ausgewählt
});
Sandbox ('*', function (box) {
console.log (Box); // Alle oben definierten Methoden sind zugänglich
});
Durch drei verschiedene Anrufmethoden können wir sehen, dass der Kontext der drei Methoden unterschiedlich ist. Der erste hat nicht foo; Der zweite hat keinen Anhang, da nur Ajax und DOM geladen sind, das Ereignis jedoch nicht geladen ist. Der dritte lädt nicht alles.
Muster 9: Statische Mitglieder
Statische Mitglieder sind nur statische Eigenschaften, die durch eine Funktion oder ein Objekt bereitgestellt werden, die in privat und öffentliches und öffentliches statisches und privates Statik in C# oder Java unterteilt werden können.
Schauen wir uns zunächst öffentliche Mitglieder an. Öffentliche Mitglieder sind sehr einfach. Die Methoden und Funktionen, die wir deklarieren, sind in der Regel öffentlich, wie zum Beispiel:
Die Codekopie lautet wie folgt:
// Konstruktor
var gadget = function () {
};
// öffentliche statische Methode
Gadget.isshininy = function () {
kehre "du wette" zurück;
};
// normale Methode zum Hinzufügen des Prototyps
Gadget.prototype.setprice = function (preis) {
this.price = Preis;
};
// statische Methoden aufrufen
console.log (gadget.isshiny ()); // "du wette"
// Erstellen Sie eine Instanz und rufen Sie die Methode auf
var iPhone = new gadget ();
iPhone.SetPrice (500);
console.log (typeof gadget.setPrice); // "undefiniert"
console.log (typeof iPhone.isshiny); // "undefiniert"
Gadget.prototype.isshiny = gadget.isshiny;
console.log (iPhone.isshininy ()); // "du wette"
In Bezug auf private statische Mitglieder können wir ihre Schließfunktionen nutzen, um sie zu implementieren. Im Folgenden finden Sie zwei Implementierungsmethoden.
Die erste Implementierungsmethode:
Die Codekopie lautet wie folgt:
var gadget = (function () {
// statische Variablen/Eigenschaften
var counter = 0;
// Closeur gibt eine neue Implementierung des Konstruktors zurück
return function () {
console.log (Zähler += 1);
};
} ()); // sofort ausführen
var g1 = new gadget (); // Protokolle 1
var g2 = new gadget (); // Protokolle 2
var g3 = new gadget (); // Protokolle 3
Es ist ersichtlich, dass es zwar jedes Mal ein neues Objekt ist, die Zahl jedoch immer noch inkrementiert ist und den Zweck statischer Mitglieder erreicht.
Die zweite Methode:
Die Codekopie lautet wie folgt:
var gadget = (function () {
// statische Variablen/Eigenschaften
var counter = 0,,
Newgadget;
// Neue Konstruktorimplementierung
NewGadget = function () {
Zähler += 1;
};
// Zugriff auf Methoden autorisieren
Newgadget.prototype.getLastid = function () {
Rückgabeschalter;
};
// Konstruktor überschreiben
Neue Newgadget zurückgeben;
} ()); // sofort ausführen
var iPhone = new gadget ();
iPhone.getLastid (); // 1
var ipod = new gadget ();
iPod.getLastid (); // 2
var iPad = new gadget ();
ipad.getLastid (); // 3
Die Zahl wird ebenfalls erhöht, was unter Verwendung der Verschlussfunktion ihrer internen Autorisierungsmethode erreicht wird.
Zusammenfassen
Dies ist der nächste Artikel des Objekterstellungsmodus. Die beiden Artikel zusammen haben 9 Muster. Sie sind die Objekterstellungsmodi, die wir häufig in der täglichen JavaScript -Programmierung verwenden. Verschiedene Szenarien spielen unterschiedliche Rollen. Ich hoffe, jeder wird den anwendbaren Modus entsprechend seinen jeweiligen Bedürfnissen wählen.