Haben Sie jemals auf eine Situation gestoßen, in der Sie die Werte in einem Objekt oder Array steuern möchten? Vielleicht möchten Sie bestimmte Datenarten blockieren und die Daten sogar validieren, bevor Sie sie in das Objekt speichern. Angenommen, Sie möchten auf eingehende Daten oder sogar ausgehende Daten auf irgendeine Weise reagieren? Vielleicht möchten Sie beispielsweise die DOM aktualisieren oder die Klasse austauschen, die den Stil ändert, indem die Ergebnisse angezeigt werden, da sich die Daten ändern. Wollten Sie schon immer an einer einfachen Seitenidee oder einem einfachen Teil arbeiten, das nur einige Funktionen von Frameworks wie Vue oder React erfordert, aber keine neue App starten möchten?
Dann ist JavaScript -Proxy möglicherweise genau das, was Sie brauchen!
Lassen Sie mich zuerst eine Aussage machen: Ich bin eher ein UI- Entwickler in der Front-End-Technologie. Ich würde gerne nur schöne Projekte erstellen, die im Browser konsistent sind und alle relevanten Funktionen haben. Wenn es also um reinere JavaScript -Funktionalität geht, gehe ich nicht tiefer.
Ich liebe es jedoch immer noch, recherchiert zu machen, und ich bin immer auf der Suche nach etwas, das ich zu meiner neuen Lernliste hinzufügen kann. Es stellt sich heraus, dass JavaScript -Proxy ein interessantes Thema ist, da es sich nur um die Grundlagen zurückblickt, wie diese Funktionen nutzen können. Trotzdem kann der Code auf den ersten Blick schnell schwer werden. Natürlich hängt alles von Ihren Bedürfnissen ab.
Das Konzept der Proxy -Objekte gibt es schon seit einiger Zeit. In meiner Forschung kann ich Referenzen von vor ein paar Jahren finden. Es steht jedoch nicht ganz oben auf meiner Liste, da es im Internet Explorer noch nie unterstützt wurde. Im Vergleich dazu wurde es im Laufe der Jahre in allen anderen Browsern hervorragend unterstützt. Dies ist einer der Gründe, warum Vue 3 mit Internet Explorer 11 unvereinbar ist, da der Proxy im neuesten Vue -Projekt verwendet wird.
Was genau ist das Proxy -Objekt?
MDN beschreibt ein Proxy -Objekt als:
[…] Ermöglicht es Ihnen, einen Proxy für ein anderes Objekt zu erstellen, das die zugrunde liegenden Operationen dieses Objekts abfängt und neu definiert.
Die allgemeine Idee ist, dass Sie ein Objekt mit Funktionalität erstellen können, mit dem Sie die typischen Aktionen steuern können, die bei der Verwendung des Objekts auftreten. Die beiden häufigsten sind die in Objekte gespeicherten Werte und Einstellungswerte.
const myobj = {
Mykey: 'Wert'
}
console.log (myobj.mykey);
myobj.mykey = 'aktualisiert';In unserem Proxy -Objekt werden wir also "Fallen" erstellen, um diese Operationen abzufangen und alle Funktionen auszuführen, die wir möglicherweise ausführen möchten. Es sind bis zu dreizehn solcher Fallen verfügbar. Ich bin nicht unbedingt alle diese Fallstricke ab, da nicht alle für die einfachen Beispiele, die ich unten zur Verfügung stelle, notwendig sind. Auch hier hängt es davon ab, was Sie für den spezifischen Kontext des Erstellens des Inhalts benötigen. Vertrauen Sie mir, nur die Grundlagen zu beherrschen, kann einen langen Weg zurücklegen.
Um das obige Beispiel zu erweitern, um einen Proxy zu erstellen, werden wir Folgendes tun:
const myobj = {
Mykey: 'Wert'
}
const Handler = {
GET: Funktion (Ziel, Prop) {
return target [prop];
},
SET: Funktion (Ziel, Prop, Wert) {
Ziel [prop] = Wert;
zurückkehren;
}
}
const proxy = neuer Proxy (MyObj, Handler);
console.log (proxy.mykey);
Proxy.MyKey = 'Aktualisiert';Beginnen wir zunächst mit dem Standardobjekt. Wir erstellen dann ein Handler -Objekt, das die Handler -Funktion hält, die allgemein als Falle bekannt ist. Diese repräsentieren Aktionen, die an herkömmlichen Objekten ausgeführt werden können, in diesem Fall, die einfach Inhalte ohne Änderungen bestehen. Danach erstellen wir unseren Proxy mit einem Konstruktor mit dem Zielobjekt und dem Handlerobjekt. Zu diesem Zeitpunkt können wir auf das Proxy -Objekt verweisen, um Werte zu erhalten und festzulegen, die der Proxy für das ursprüngliche Zielobjekt MYOBJ sind.
Beachten Sie die Rückgabe der Rückgabe am Ende der festgelegten Falle. Dies soll den Proxy darüber informieren, dass der Einstellwert als erfolgreich angesehen werden sollte. Wenn Sie in einigen Fällen die Einstellungswerte verhindern möchten (unter Berücksichtigung von Überprüfungsfehlern), sollten Sie False zurückgeben. Dies führt auch zu einem Konsolenfehler und Ausgabe eines TypenErrors.
Eine Sache, die Sie sich an dieses Muster erinnern müssen, ist, dass das ursprüngliche Zielobjekt noch verfügbar ist. Dies bedeutet, dass Sie den Proxy umgehen und den Wert des Objekts ohne Verwendung des Proxy ändern können. Während ich über die Verwendung von Proxy -Objekten lese, habe ich einige nützliche Muster gefunden, die bei diesem Problem helfen können.
lass myobj = {
Mykey: 'Wert'
}
const Handler = {
GET: Funktion (Ziel, Prop) {
return target [prop];
},
SET: Funktion (Ziel, Prop, Wert) {
Ziel [prop] = Wert;
zurückkehren;
}
}
myobj = neuer Proxy (myobj, Handler);
console.log (myobj.mykey);
myobj.mykey = 'aktualisiert';In diesem Modus verwenden wir das Zielobjekt als Proxy -Objekt, während wir das Zielobjekt im Proxy -Konstruktor verweisen. Ja, das war's. Das funktioniert, aber ich finde es einfach, zu verwechseln, was passiert. Erstellen wir also das Zielobjekt im Proxy -Konstruktor:
const Handler = {
GET: Funktion (Ziel, Prop) {
return target [prop];
},
SET: Funktion (Ziel, Prop, Wert) {
Ziel [prop] = Wert;
zurückkehren;
}
}
const proxy = neuer Proxy ({{
Mykey: 'Wert'
}, Handler);
console.log (proxy.mykey);
Proxy.MyKey = 'Aktualisiert';Tatsächlich können wir im Konstruktor Zielobjekte und Handlerobjekte erstellen, wenn wir möchten:
const proxy = neuer Proxy ({{
Mykey: 'Wert'
}, {
GET: Funktion (Ziel, Prop) {
return target [prop];
},
SET: Funktion (Ziel, Prop, Wert) {
Ziel [prop] = Wert;
zurückkehren;
}
});
console.log (proxy.mykey);
Proxy.MyKey = 'Aktualisiert';Tatsächlich ist dies das Muster, das ich im folgenden Beispiel am häufigsten verwende. Zum Glück ist der Weg, Proxy -Objekte zu erstellen, flexibel. Verwenden Sie einfach einen beliebigen Modus, der zu Ihnen passt.
Hier sind einige Beispiele, die die Verwendung von JavaScript -Proxy von der grundlegenden Datenvalidierung bis zur Verwendung von Fetch bis zur Aktualisierung von Formulardaten abdecken. Denken Sie daran, dass diese Beispiele die Grundlagen des JavaScript -Proxy abdecken. In einigen Fällen erstellen sie lediglich einen regulären JavaScript -Code im Proxy -Objekt, um regelmäßige JavaScript -Vorgänge auszuführen. Stellen Sie sich sie als Möglichkeiten vor, einige gemeinsame JavaScript -Aufgaben durch mehr Kontrolle über die Daten zu erweitern.
Mein erstes Beispiel deckt das ab, was ich immer für eine ziemlich einfache und seltsame Frage des Codierungsinterviews hielt: invertieren die Zeichenfolge. Ich habe diese Frage noch nie gemocht und diese Frage während der Interviews nie gestellt. Als jemand, der gerne gegen den Strom dieser Art von Dingen verstößt, habe ich nicht-traditionelle Lösungen versucht. Weißt du, nur zum Spaß, der es manchmal rauswirft, ist eine der Lösungen ein großartiger Front-End-Spaß. Es bietet auch ein einfaches Beispiel, das zeigt, wie der Proxy verwendet wird.
Wenn Sie die Eingabe eingeben, werden Sie feststellen, dass die eingegebene Gegebene nach unten in umgekehrter gedruckt wird. Offensichtlich gibt es viele Möglichkeiten, Zeichenfolgen zu umkehren, die verwendet werden können. Schauen wir uns jedoch meine seltsame Inversionsmethode an.
const reverse = neuer Proxy (
{
Wert: ''
},
{
SET: Funktion (Ziel, Prop, Wert) {
Ziel [prop] = Wert;
document.querySelectorAll ('[data-reverse]'). foreach (item => {
let el = document.createelement ('div');
El.InnerHtml = '\ u {202e}' Wert;
item.inNertext = el.innerhtml;
});
zurückkehren;
}
}
)
Document.querySelector ('Eingabe'). AddEventListener ('Eingabe', e => {
reverse.Value = e.target.Value;
});Zunächst erstellen wir einen neuen Proxy, das Zielobjekt ist ein einzelner Wert, der alles in der Eingabe enthält. Die GET -Trap existiert nicht, da wir nur ein einfaches Durchgang benötigen, da wir keine tatsächlichen Funktionen haben, um daran zu binden. In diesem Fall ist nichts erforderlich. Wir werden dies später besprechen.
Für die SET -Falle haben wir einige Funktionen. Es gibt immer noch ein einfaches Durchgang, bei dem der Wert wie gewohnt als Wertschlüssel im Zielobjekt festgelegt wird. Dann gibt es eine QuerySelectorAll, die auf der Seite nach allen Elementen sucht, die das Datenattribut für Datenreverse haben. Auf diese Weise können wir mehrere Elemente auf der Seite gleichzeitig suchen und aktualisieren. Dies gibt uns eine rahmenartige Bindungsoperation, die jeder gerne sieht. Dies kann auch auf die Positionierung von Eingaben aktualisiert werden, um den Fall geeigneter Zwei-Wege-Bindungsarten zu ermöglichen.
Hier kommt meine skurrile Art, Saiten zu invertieren, ins Spiel. Ein DIV wird im Speicher erstellt und dann mit der Zeichenfolge auf das innere Element des Elements aktualisiert. Der erste Teil der Zeichenfolge verwendet einen speziellen Unicode -Dezimalcode, der alles danach tatsächlich umgeht und es von rechts nach links herstellt. Anschließend wird der InnerText des tatsächlichen Elements auf der Seite die Innerhtml des In-Memory-Divs erhält. Dies wird jedes Mal ausgeführt, wenn Sie etwas in die Eingabe eingeben.
Schließlich setzen wir einen Ereignishörer für die Eingabe, die den Wertschlüssel im Zielobjekt durch den Eingabewert festlegt (d. H. Das Ziel des Ereignisses).
Schließlich ein sehr einfaches Beispiel für die Ausführung von Nebenwirkungen auf die DOM der Seite, indem der Wert auf ein Objekt festgelegt wird.
Ein gemeinsames UI -Muster besteht darin, Eingabewerte in Sequenzen zu formatieren, die genauer sind als nur Buchstaben und numerische Zeichenfolgen. Ein Beispiel hierfür ist die Telefoneingabe. Manchmal, wenn die eingegebene Telefonnummer wie eine Telefonnummer aussieht, sieht es besser aus und fühlt sich besser an. Der Trick ist jedoch, dass wir, wenn wir die Eingabewerte formatieren, möglicherweise noch eine nicht formatierte Version der Daten benötigen.
Dies ist eine leichte Aufgabe für den JavaScript -Proxy.
Wenn Sie Zahlen in die Eingabe eingeben, werden sie als Standard-US-amerikanische Telefonnummern (z. B. (123) 456-7890) formatiert. Beachten Sie, dass die Telefonnummer auch unter der Eingabe in einfachem Text angezeigt wird, genau wie das Beispiel für die Reverse -Zeichenfolge. Diese Taste gibt sowohl die formatierten als auch nicht formatierten Versionen der Daten zur Konsole aus.
Hier ist der Code für den Proxy:
const Telefon = neuer Proxy (
{
_sauber: '',
Nummer: '',
Get Clean () {
Gibt dies zurück._Clean;
}
},
{
GET: Funktion (Ziel, Prop) {
if (! prop.startswith ('_')) {
return target [prop];
} anders {
Return "Eintrag nicht gefunden!"
}
},
SET: Funktion (Ziel, Prop, Wert) {
if (! prop.startswith ('_')) {
target._clean = value.replace (/\ d/g, '') .substring (0, 10);
const §s = {
Bereich: target._clean.substring (0, 3),
Präfix: target._clean.substring (3, 6),
Zeile: target._clean.substring (6, 10)
}
Ziel.number =
target._clean.length> 6?
target._clean.length> 3?
target._clean.length> 0?
document.querySelectorAll ('[data-mone_number]'). foreach (item => {
if (item.tagname === 'Eingabe') {
item.Value = target.number;
} anders {
item.Innertext = target.number;
}
});
zurückkehren;
} anders {
false zurückgeben;
}
}
}
);In diesem Beispiel gibt es mehr Code. Lassen Sie uns ihn also aufschlüsseln. Der erste Teil ist das Zielobjekt, das wir im Proxy intern initialisieren. Es hat drei Aspekte.
{
_sauber: '',
Nummer: '',
Get Clean () {
Gibt dies zurück._Clean;
}
},Der erste Schlüssel _clean ist unsere Variable, die die nicht formatierte Version der Daten enthält. Es beginnt mit dem traditionellen Variablen -Benennungsmuster und behandelt es als "privat". Wir wollen es unter normalen Umständen nicht verfügbar machen. Wenn wir tiefer gehen, werden wir dies mehr vorstellen.
Die zweite Schlüsselnummer speichert einfach den formatierten Telefonnummerwert.
Der dritte "Schlüssel" ist eine Get -Funktion mit dem Namen sauber. Dadurch wird der Wert unserer privaten _clean -Variablen zurückgeführt. In diesem Fall geben wir diesen Wert nur zurück, aber dies bietet die Möglichkeit, andere Operationen darauf auszuführen, wenn wir wollen. Dies ist wie der Stellvertreter des Stellvertreters. Dies mag seltsam erscheinen, aber es bietet eine einfache Möglichkeit, die Daten zu steuern. Abhängig von Ihren spezifischen Bedürfnissen kann dies eine ziemlich einfache Möglichkeit sein, mit dieser Situation umzugehen. Es funktioniert hier für unser einfaches Beispiel, aber zusätzliche Schritte können erforderlich sein.
Jetzt ist die Get Trap für den Proxy.
GET: Funktion (Ziel, Prop) {
if (! prop.startswith ('_')) {
return target [prop];
} anders {
Return "Eintrag nicht gefunden!"
}
},Zunächst überprüfen wir den eingehenden Requisius- oder Objektschlüssel, um festzustellen, ob sie nicht mit einem Unterstrich beginnt. Wenn es nicht mit dem Unterstrich beginnt, müssen wir es nur zurückgeben. Wenn es mit einem Unterstrich beginnt, geben wir eine Zeichenfolge zurück, die angibt, dass der Eintrag nicht gefunden wurde. Diese Art von negativer Rendite kann bei Bedarf auf unterschiedliche Weise behandelt werden. Gibt eine Zeichenfolge zurück, gibt einen Fehler zurück oder führt Code mit unterschiedlichen Nebenwirkungen aus. Es hängt vollständig von der spezifischen Situation ab.
Eine Sache, die in meinem Beispiel zu beachten ist, ist, dass ich mich nicht mit anderen Proxy -Fallen befasse, die möglicherweise mit einer privaten Variablen im Proxy verwendet werden. Um diese Daten ausführlicher zu schützen, müssen Sie andere Fallstricke wie [DefineProperty] ( //m.sbmmt.com/link/cd69510f4a69bc0ef6ba504331b9d546 ) berücksichtigen Wenn es sich um eine andere Person handelt, möchten Sie möglicherweise in Betracht ziehen, so viel Inhalt wie möglich zu sperren.
Jetzt, wo der größte Teil der Magie in diesem Beispiel geschieht - set Trap:
SET: Funktion (Ziel, Prop, Wert) {
if (! prop.startswith ('_')) {
target._clean = value.replace (/\ d/g, '') .substring (0, 10);
const §s = {
Bereich: target._clean.substring (0, 3),
Präfix: target._clean.substring (3, 6),
Zeile: target._clean.substring (6, 10)
}
Ziel.number =
target._clean.length> 6?
target._clean.length> 3?
target._clean.length> 0?
document.querySelectorAll ('[data-mone_number]'). foreach (item => {
if (item.tagname === 'Eingabe') {
item.Value = target.number;
} anders {
item.Innertext = target.number;
}
});
zurückkehren;
} anders {
false zurückgeben;
}
}Führen Sie zunächst die gleichen Überprüfungen über private Variablen im Proxy durch. Ich teste andere Arten von Requisiten nicht wirklich, aber vielleicht möchten Sie dies hier in Betracht ziehen. Ich gehe davon aus, dass nur der Zahlenschlüssel im Proxy -Zielobjekt angepasst wird.
Der in (der eingegebene Wert) übergebene Wert wird alles außer den numerischen Zeichen ausziehen und es auf den _clean -Schlüssel speichern. Dieser Wert wird dann während des gesamten Prozesses verwendet, um in einen formatierten Wert umzubauen. Grundsätzlich wird jedes Mal, wenn Sie eingeben, die gesamte Saite in Echtzeit in das erwartete Format umgebaut. Die Substring-Methode sperrt die Nummer auf eine zehnstellige Nummer.
Erstellen Sie dann ein Objekt eines Abschnitte, um verschiedene Teile unserer Telefonnummer zu speichern, basierend auf einer Aufschlüsselung der Telefonnummern. Mit zunehmender Länge der _clean -Variablen aktualisieren wir die Zahl auf das Formatmuster, das wir zu diesem Zeitpunkt sehen möchten.
Eine QuerySelectorAllAll sucht nach Elementen mit dem Datenattribut "Data-Phone_Number" und sucht sie über eine Foreach-Schleife. Wenn das Element eine Eingabe ist, um den Wert zu aktualisieren, wird der InnerText eines anderen Elements aktualisiert. So erscheint der Text unterhalb der Eingabe. Wenn wir mit diesem Datenattribut ein anderes Eingabeelement einsetzen möchten, werden wir sehen, wie der Wert in Echtzeit aktualisiert wird. Dies ist eine Möglichkeit, abhängig von den Anforderungen Einweg- oder Zwei-Wege-Bindungen zu erstellen.
Schließlich kehren Sie treu zurück, um den Proxy wissen zu lassen, dass alles gut läuft. Gibt false zurück, wenn die eingehende Requisite oder der Schlüssel mit einem Unterstrich beginnt.
Schließlich der Event -Hörer, der diese Arbeit macht:
document.querySelectorAll ('Eingabe [data-mone_number]'). foreach (item => {
item.addeventListener ('Eingabe', (e) => {
Telefon.number = e.target.Value;
});
});
document.querySelector ('#get_data'). AddEventListener ('Click', (e) => {
console.log (Telefon.number);
console.log (Telefon.Clean);
});Die erste Gruppe sucht nach allen Eingaben mit unseren spezifischen Datenattributen und fügt ihnen Ereignishörer hinzu. Für jedes Eingabeereignis wird der Zahlenschlüsselwert des Proxy mit dem derzeit eingegebenen Wert aktualisiert. Da wir den Eingangswert jedes Mal, wenn wir ihn senden, formatieren, löschen wir alle Zeichen, die keine Zahlen sind.
Der zweite Satz von Schaltflächen, die nach Ausgabe zwei Datensätze (nach Bedarf) und Ausgabe an die Konsole suchen. Dies zeigt, wie wir Code schreiben, um die erforderlichen Daten auf Bedarf anzufordern. Hoffentlich ist es klar, dass das Telefon. Clean verweist auf die GET -Proxy -Funktion im Zielobjekt, die die _clean -Variable im Objekt zurückgibt. Beachten Sie, dass es nicht als Funktion wie Telefon genannt wird.
Sie können Arrays als Ziel "Objekt" im Proxy anstelle von Objekten verwenden. Da es sich um ein Array handelt, müssen einige Dinge berücksichtigt werden. Die Funktionalität eines Arrays (wie Push ()) wird in der Setterfalle des Proxys irgendwie behandelt. In diesem Fall funktioniert das Erstellen einer benutzerdefinierten Funktion im Zielobjektkonzept nicht tatsächlich. Es gibt jedoch einige nützliche Dinge mit Arrays als Ziele zu tun.
Natürlich ist das Speichern von Zahlen in Arrays nichts Neues. Offensichtlich. Ich werde jedoch einige Regeln für dieses Ziffernspeicher -Array anhängen, z. B. keine doppelten Werte zuzulassen und nur Zahlen zuzulassen. Ich werde auch einige Ausgabeoptionen wie Sortieren, Summieren, Mittelung und Löschen von Werten bereitstellen. Aktualisieren Sie dann eine kleine Benutzeroberfläche, die all dies steuert.
Im Folgenden finden Sie Proxy -Objekte:
const numbers = neuer Proxy ([],
{
GET: Funktion (Ziel, Prop) {
Message.ClassList.remove ('Fehler');
if (prop === 'sort') return [... Ziel] .Sort ((a, b) => a - b);
if (prop === 'sum') return [... Ziel] .Reduce ((a, b) => ab);
if (prop === 'Durchschnitt') return [... Ziel] .Reduce ((a, b) => ab) / Ziel.Length;
if (prop === 'clear') {
Message.Innertext = `$ {target.length} Nummer $ {target.length === 1?
Target.SPLICE (0, Target.Length);
Sammlung.Innertext = Ziel;
}
return target [prop];
},
SET: Funktion (Ziel, Prop, Wert) {
if (prop === 'länge') return true;
DataNput.Value = '';
Message.ClassList.remove ('Fehler');
if (! number.issinterger (value)) {
console.Error ('Daten sind keine Nummer!');
Message.InnerText = 'Daten sind keine Nummer!';
Message.ClassList.add ('Fehler');
false zurückgeben;
}
if (target.includes (value)) {
console.Error (`nummer $ {value} wurde bereits eingereicht!`);
Message.Innertext = `Nummer $ {value} wurde bereits eingereicht!`;
Message.ClassList.add ('Fehler');
false zurückgeben;
}
Ziel [prop] = Wert;
Sammlung.Innertext = Ziel;
Message.InnerText = `Nummer $ {value} hinzugefügt!`;
zurückkehren;
}
});In diesem Beispiel werde ich mit der Setter -Falle beginnen.
Das erste, was Sie tun müssen, ist zu überprüfen, ob das Längenattribut auf ein Array eingestellt ist. Es kehrt nur wahr, so dass es auf die übliche Weise passiert. Wenn Sie auf die festgelegte Länge reagieren müssen, kann dies jederzeit Code an der richtigen Stelle hinzufügen.
Die nächsten beiden Codezeilen beziehen sich auf zwei HTML -Elemente, die auf der Seite mit QuerySelector gespeichert sind. DataNput ist das Eingabeelement, das wir bei der Eingabe löschen möchten. Nachricht ist das Element, das die Antwort auf Array -Änderungen hält. Da es das Konzept eines Fehlerzustands hat, stellen wir sicher, dass es nicht jedes Mal in diesem Zustand ist, wenn es eingegeben wird.
Der erste, wenn der Eingang tatsächlich eine Zahl ist. Wenn nicht, dann wird es ein paar Dinge ausführen. Es gibt einen Konsolenfehler aus, der das Problem angibt. Das Nachrichtenelement erhält dieselbe Anweisung. Anschließend gibt die Nachricht über die CSS -Klasse einen Fehlerstatus ein. Schließlich kehrt es False zurück, was auch dazu führt, dass der Agent seinen eigenen Fehler der Konsole ausgibt.
Die zweite, wenn die Eingabe im Array bereits vorhanden ist. Wenn es Doppelarbeit gibt, wird dieselbe Nachricht wie in der ersten, falls erfolgt. Die Zustellung der Nachrichten ist geringfügig anders, da es sich um eine Vorlage handelt, sodass wir doppelte Werte sehen können.
Der letzte Teil geht davon aus, dass alles gut läuft und weitermachen kann. Der Wert wird wie gewohnt festgelegt, und dann aktualisieren wir die Sammelliste. Die Sammlung bezieht sich auf ein anderes Element auf der Seite, das uns die aktuelle Sammlung von Zahlen im Array zeigt. In ähnlicher Weise werden Nachrichten mit den hinzugefügten Einträgen aktualisiert. Schließlich kehren wir treu zurück, um den Stellvertreter wissen zu lassen, dass alles gut läuft.
Jetzt unterscheidet sich die Get -Trap etwas vom vorherigen Beispiel.
GET: Funktion (Ziel, Prop) {
Message.ClassList.remove ('Fehler');
if (prop === 'sort') return [... Ziel] .Sort ((a, b) => a - b);
if (prop === 'sum') return [... Ziel] .Reduce ((a, b) => ab);
if (prop === 'Durchschnitt') return [... Ziel] .Reduce ((a, b) => ab) / Ziel.Length;
if (prop === 'clear') {
Message.Innertext = `$ {target.length} Nummer $ {target.length === 1?
Target.SPLICE (0, Target.Length);
Sammlung.Innertext = Ziel;
}
return target [prop];
},Was hier passiert, ist, dass eine "Requisite" keine normale Array -Methode ist. Zum Beispiel wird die erste "Requisite" von diesem Ereignishörer ausgelöst:
datasort.addeventListener ('klick', () => {
Message.InnerText = numbers.sort;
});Wenn die Schaltfläche "Sortier" angeklickt wird, wird der InnerText des Nachrichtenelements mit dem von Nummern.Sort zurückgegebenen Inhalt aktualisiert. Es fungiert als Proxy-Abschnitt und gibt Getter für atypische Array-bezogene Ergebnisse zurück.
Nachdem wir den potenziellen Fehlerstatus des Nachrichtenelements gelöscht haben, stellen wir fest, ob ein nicht standardmäßiges Array-Fetch-Betrieb erwartet wird. Jeder Vorgang gibt einen Vorgang auf den ursprünglichen Array -Daten zurück, ohne das ursprüngliche Array zu ändern. Dies erfolgt durch die Verwendung des Erweiterungsoperators im Ziel, um ein neues Array zu erstellen und dann die Standard -Array -Methode zu verwenden. Jeder Name sollte bedeuten, was er tut: sortieren, summe, durchschnittlich und klar. Nun, Clearing ist keine Standard -Array -Methode, aber das klingt gut. Da Einträge in beliebiger Reihenfolge sortiert werden können, können wir es uns mit einer sortierten Liste versorgen oder mathematische Funktionen für die Einträge ausführen. Löschen Sie einfach das Array, wie Sie vielleicht erwarten.
Hier sind andere Event -Hörer für Schaltflächen:
DataForm.AdDeVentListener ('Submit', (e) => {
E.PreventDefault ();
numbers.push (number.parseInt (datainput.Value));
});
dataSubmit.addeventListener ('klick', () => {
numbers.push (number.parseInt (datainput.Value));
});
datasort.addeventListener ('klick', () => {
Message.InnerText = numbers.sort;
});
datasum.addeventListener ('klick', () => {
Message.InnerText = numbers.sum;
});
DataAverage.adDeVentListener ('Click', () => {
Message.InnerText = number. Durchschnitt;
});
Dataclear.addeventListener ('Click', () => {
Zahlen.Clear;
});Wir können Arrays auf verschiedene Arten erweitern und Funktionen hinzufügen. Ich habe ein Beispiel für ein Array gesehen, das die Auswahl von Einträgen mit einem negativen Index ermöglicht, der vom Ende zählt. Finden Sie Einträge im Objektarray basierend auf den Attributwerten innerhalb des Objekts. Geben Sie eine Nachricht anstelle von undefiniert zurück, wenn Sie versuchen, einen Wert zu erhalten, der im Array nicht existiert. Es gibt viele Ideen, die Proxy in Arrays nutzen und erkunden können.
Adressformulare sind ziemlich Standard -Sachen auf Webseiten. Fügen wir ihm eine gewisse Interaktivität zur unterhaltsamen (und nicht standardmäßigen) Bestätigung hinzu. Es kann auch als Datenerfassung für Formungswerte in einem einzelnen Objekt fungieren, das bei Bedarf angefordert werden kann.
Im Folgenden finden Sie Proxy -Objekte:
const model = neuer Proxy (
{
Name: '',
Adresse1: '',
Adresse2: '',
Stadt: '',
Zustand: '',
Reißverschluss: '',
getData () {
zurückkehren {
Name: this.name ||.
Adresse1: this.address1 ||.
Adresse2: this.address2 ||.
Stadt: this.city ||.
Zustand: this.state ||.
ZIP: this.zip ||.
};
}
},
{
GET: Funktion (Ziel, Prop) {
return target [prop];
},
SET: Funktion (Ziel, Prop, Wert) {
Ziel [prop] = Wert;
if (prop === 'ZIP' && value.length === 5) {
fetch (`https://api.zippopotam.us/us/$ {value}`)
.then (response => response.json ())
.then (data => {
model.city = data.places [0] ['Ortsname'];
document.querySelector ('[data-model = "City"]'). value = target.city;
Modell.State = data.Places [0] ['Zustandsabkürzung'];
document.querySelector ('[data-model = "state"]'). value = target.state;
});
}
document.querySelectorAll (`[data-model =" $ {prop} "]`) .foreach (item => {
if (item.tagname === 'Eingabe' || item.tagname === 'select') {
item.Value = Wert;
} anders {
item.inNertext = Wert;
}
})
zurückkehren;
}
}
);Das Zielobjekt ist sehr einfach; Die Funktion getData gibt das Objekt zurück, aber wenn der Wert der Eigenschaft eine leere Zeichenfolge ist, ändert sich sie in "NO -Eintrag!"
Die Getter -Funktion übergibt in den Inhalten wie gewohnt. Möglicherweise müssen Sie dies nicht tun, aber ich möchte es gerne einschließen, um es vollständig zu machen.
Die Setterfunktion legt den Wert auf Prop fest. Wenn jedoch prüft, ob die festgelegte Requisite die Postleitzahl ist. Wenn ja, prüfen wir, ob die Wertlänge 5 beträgt. Wenn wir auf True ausgewertet werden, werden wir einen Abruf ausführen, der die API des Postcode -Dit -Adressfinders verwendet. Jeder zurückgegebene Wert wird in die Objekteigenschaft, die Eingabe der Stadt und die Auswahl des Status im Element SELECT eingefügt. Dies ist ein bequemes Abkürzungsbeispiel, mit dem der Benutzer diese Werte nicht eingeben muss. Diese Werte können bei Bedarf manuell geändert werden.
Sehen wir uns für den nächsten Abschnitt ein Beispiel eines Eingabelements an:
<code></code>
Der Proxy verfügt über eine QuerySelectorAll, die nach jedem Element mit passenden Datenattributen sucht. Dies ist das gleiche wie das Beispiel für umgekehrte Zeichenfolge, das wir zuvor gesehen haben. Wenn es eine Übereinstimmung findet, aktualisiert es den Eingabewert oder den InnerText des Elements. Auf diese Weise wird die Rotary -Karte in Echtzeit aktualisiert, um das Erscheinungsbild der abgeschlossenen Adresse anzuzeigen.
Eine Sache zu beachten ist die Datenmodelleigenschaft für die Eingabe. Der Wert dieses Datenattributs informiert tatsächlich den Agenten über den Schlüssel, um während seines Betriebs zu sperren. Der Agent schaut die beteiligten Elemente an, die auf den beteiligten Schlüssel basieren. Der Event -Hörer führt den gleichen Betrieb durch, indem der Proxy mitgeteilt wird, welcher Schlüssel verwendet wird. So sieht es aus:
document.querySelector ('main'). addEventListener ('Eingabe', (e) => {
Modell [e.target.dataset.model] = e.target.Value;
});Daher werden alle Eingänge innerhalb des Hauptelements gefunden und der Agent wird aktualisiert, wenn das Eingabeereignis ausgelöst wird. Der Wert der Datenmodelleigenschaft wird verwendet, um zu bestimmen, welcher Schlüssel im Proxy zu finden ist. Tatsächlich verwenden wir ein Modellsystem. Überlegen Sie, wie so etwas weiter verwendet werden kann.
Wie für die Schaltfläche "Daten abrufen"? Es ist ein einfaches Konsolenprotokoll der GetData -Funktion ...
getDatabtn.addeventListener ('klick', () => {
console.log (model.getData ());
});Dies ist ein interessantes Beispiel, um das Konzept zu erstellen und zu untersuchen. Dies ist ein Beispiel, das mich darüber nachdenken lässt, was ich mit JavaScript -Proxy erstellen kann. Manchmal benötigen Sie nur ein kleines Widget, das einige Funktionen für Datenerfassung/Schutz verfügt und das DOM durch einfaches Interagieren mit den Daten manipulieren kann. Ja, Sie können Vue oder React verwenden, aber manchmal können sie für etwas so Einfaches zu kompliziert sein.
"Genau das ist es" bedeutet, dass es von jedem von Ihnen abhängt und ob Sie tiefer in den JavaScript -Proxy eintauchen. Wie ich zu Beginn dieses Artikels sagte, habe ich nur die Grundlagen dieser Funktion behandelt. Es kann mehr Funktionen liefern und größer sein als die Beispiele, die ich anbietet. In einigen Fällen kann es die Grundlage für ein kleines Helferprogramm für Nischenlösungen bilden. Es ist offensichtlich, dass diese Beispiele einfach mit grundlegenden Funktionen erstellt werden können, die dieselbe Funktion ausführen. Sogar der größte Teil meines Beispielcodes wird mit regulärem JavaScript mit Proxy -Objekten gemischt.
Es geht jedoch darum, Beispiele für die Verwendung eines Proxy zur Reaktion auf Dateninteraktionen anzugeben - auch um zu steuern, wie auf diese Interaktionen reagiert werden, um Daten zu schützen, Daten zu validieren, DOM zu manipulieren und neue Daten zu erhalten - alle basierend auf jemandem, der versucht, Daten zu speichern oder zu erhalten. Dies kann langfristig sehr leistungsfähig sein und ermöglicht die Erstellung einfacher Anwendungen, für die möglicherweise keine größeren Bibliotheken oder Frameworks erforderlich sind.
Wenn Sie also ein Front-End-Entwickler sind, der sich mehr auf die Benutzeroberfläche konzentriert, können Sie wie ich einige der Grundlagen erkunden, um zu sehen, ob es ein kleines Projekt gibt, das möglicherweise von JavaScript-Proxy profitieren könnte. Wenn Sie eher ein JavaScript -Entwickler sind, können Sie sich tiefer in Agenten für größere Projekte befassen. Vielleicht ein neues Framework oder eine neue Bibliothek?
Nur eine Idee ...
Das obige ist der detaillierte Inhalt vonEin Intro in den JavaScript -Proxy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So bereinigen Sie das Laufwerk C des Computers, wenn es voll ist
Fil-Währungspreis Echtzeitpreis
So schützen Sie Cloud-Server vor DDoS-Angriffen
So laden Sie Binance herunter
So kaufen und verkaufen Sie Bitcoin auf Huobi.com
So öffnen Sie eine ISO-Datei
Welche Funktionen haben Computernetzwerke?
So verbergen Sie die IP-Adresse
So lösen Sie Probleme beim Parsen von Paketen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
