Fortgeschrittenes Front-End, das Ihnen die Verwendung der Javascript-Speicherfunktion beibringt

Vorwort

Jedes SaaS-Unternehmen muss über eine eigene Low-Code-Plattform verfügen. Im Prozess der visuellen Low-Code-Frontend-Entwicklung werden viele interessante technische Anforderungen gefunden. Das Lösen dieser Anforderungen bringt einem oft große Vorteile. Lassen Sie uns heute die technischen Frontend-Probleme teilen, die im Prozess der Entwicklung von Dooring - JavaScript-Funktionsspeicher - aufgetreten sind.

Hintergrund

Wir alle wissen, dass wir zum Erstellen einer Front-End-Seite die folgenden drei Elemente benötigen:

• Elemente (Benutzeroberfläche)
• Daten
• Ereignis/Interaktion

Im Zeitalter datengesteuerter Ansichten ist die Beziehung zwischen diesen drei Elementen häufig wie folgt:

Die Designideen der visuellen Konstruktionsplattform basieren häufig auf dem oben genannten Prozess. Wir müssen eine Editorumgebung bereitstellen, in der Benutzer Ansichten erstellen und interagieren können. Das vom Benutzer gespeicherte Endprodukt kann wie folgt aussehen:

{
    "Name": "Dooring-Formular",
    "bgColor": "#666",
    "share_url": "http://xxx.cn",
    "Mount_Ereignis": [
        {
            "id": "123",
            "Funktion": () => {
                // Initialisierungslogik GamepadHapticActuator();
            },
            "Quelldaten": []
        }
    ],
    "Körper": [
        {
            "Name": "Überschrift",
            "Ereignis": [
                {
                    "id": "123",
                    "Typ": "Klick",
                    "Funktion": () => {
                        // Benutzerdefinierte Interaktionslogik der Komponente showModal();
                    }
                }
            ]
        }
    ]
}

Die Frage ist also, ob wir JSON-Strings speichern können (durch JSON.stringify-Serialisierung), aber wie speichern wir die Funktion zusammen? Wie können wir nach dem Speichern der Funktion dafür sorgen, dass JS diese Funktion normal ausführt, wenn die Seite gerendert wird?

Umsetzungsplandenken

Wir alle wissen, dass die Konvertierung von JS-Objekten in JSON mit JSON.stringify möglich ist, es gibt jedoch auch Einschränkungen, wie zum Beispiel:

1. Wenn der Wert über eine toJSON()-Methode verfügt, definiert toJson(), welcher Wert serialisiert wird.
2. Es kann nicht garantiert werden, dass die Eigenschaften von Nicht-Array-Objekten in einer bestimmten Reihenfolge in der serialisierten Zeichenfolge erscheinen.
3. Die gekapselten Objekte aus Booleschen Werten, Zahlen und Strings werden bei der Serialisierung automatisch in den entsprechenden Originalwert umgewandelt.
4. Undefinierte, beliebige Funktions- und Symbolwerte werden bei der Serialisierung entweder ignoriert (wenn sie in einem Eigenschaftswert eines Nicht-Array-Objekts vorkommen) oder in null umgewandelt (wenn sie in einem Array vorkommen). Wenn Funktionen und „undefined“ separat konvertiert werden, wird „undefined“ zurückgegeben, z. B. JSON.stringify(function(){}) oder JSON.stringify(undefined).
5. Alle Eigenschaften mit „Symbol“ als Schlüssel werden vollständig ignoriert, auch wenn sie im Ersetzungsparameter obligatorisch sind.
6. Date ruft toJSON() auf, um es in eine Zeichenfolge zu konvertieren (dasselbe wie Date.toISOString()), sodass es als Zeichenfolge behandelt wird.
7. Werte im NaN- und Infinity-Format sowie Null werden als Null behandelt.
8. Andere Objekttypen, einschließlich Map/Set/WeakMap/WeakSet, serialisieren nur aufzählbare Eigenschaften

Wir können in Punkt 4 sehen, dass eine Funktion, die das von uns serialisierte Objekt enthält, ignoriert wird! Es ist also verständlich, dass wir die Funktion nicht mit JSON.stringify speichern können. Gibt es also eine andere Möglichkeit?

Sie können die Funktion zunächst in einen String umwandeln, ihn dann mit JSON.stringify serialisieren und im Backend speichern und den String schließlich mit eval oder Function in eine Funktion umwandeln, wenn die Komponente verwendet wird. Der allgemeine Prozess ist wie folgt:

Ja, das Ideal ist schön, aber die Realität ist _______.

Als nächstes analysieren wir, wie die Schlüssellinks func2string und string2func implementiert werden.

js Speicherfunktion Lösungsdesign

Freunde, die mit der JSON-API vertraut sind, wissen möglicherweise, dass JSON.stringify 3 Parameter unterstützt und der zweite Parameterersetzer eine Funktion oder ein Array sein kann. Als Funktion hat es zwei Parameter, Schlüssel und Wert, die beide serialisiert sind. Die Funktion muss den Wert in einer JSON-Zeichenfolge zurückgeben, wie unten gezeigt:

• Wenn eine Zahl zurückgegeben wird, wird sie in eine entsprechende Zeichenfolge umgewandelt und der JSON-Zeichenfolge als Attributwert hinzugefügt.
• Wenn ein String zurückgegeben wird, wird dieser dem JSON-String als Eigenschaftswert hinzugefügt.
• Wenn ein Boolescher Wert zurückgegeben wird, wird der JSON-Zeichenfolge als Eigenschaftswert „true“ oder „false“ hinzugefügt.
• Wenn ein anderes Objekt zurückgegeben wird, wird dieses Objekt rekursiv in eine JSON-Zeichenfolge serialisiert, wobei für jede Eigenschaft die Ersetzungsmethode aufgerufen wird. Sofern es sich bei dem Objekt nicht um eine Funktion handelt, wird es nicht in JSON-Zeichenfolgen serialisiert.
• Wenn „undefined“ zurückgegeben wird, wird der Eigenschaftswert nicht in der JSON-Zeichenfolge ausgegeben.

So können wir die Daten, deren Werttyp eine Funktion ist, in den zweiten Funktionsparameter konvertieren. wie folgt:

const stringify = (obj) => {
    returniere JSON.stringify(obj, (k, v) => {
      wenn(Typ von v === 'Funktion') {
          gebe `${v}` zurück
      }
      zurückgeben v
    })
}

Auf diese Weise scheinen wir die Funktion im Backend speichern zu können. Als Nächstes sehen wir uns an, wie das JSON mit der Funktionszeichenfolge deserialisiert wird.

Da wir die Funktion in einen String konvertiert haben, müssen wir wissen, welche Strings beim Deparsen in Funktionen konvertiert werden müssen. Wenn wir mit der Funktion nichts machen, müssen wir sie möglicherweise manuell identifizieren.

Der Nachteil der menschlichen Fleischerkennung besteht darin, dass wir reguläre Ausdrücke verwenden müssen, um Zeichenfolgen mit Funktionseigenschaften zu extrahieren. Es gibt jedoch viele Möglichkeiten, Funktionen zu schreiben, und wir müssen viele Situationen berücksichtigen. Es gibt keine Garantie dafür, dass eine Zeichenfolge mit Funktionseigenschaften definitiv eine Funktion ist.

Daher habe ich eine einfachere Methode gewählt, um die Funktion zu extrahieren, ohne komplexe reguläre Ausdrücke schreiben zu müssen. Die Methode besteht darin, bei der Serialisierung der Funktion Bezeichner einzufügen, damit wir wissen, welche Zeichenfolgen als Funktionen analysiert werden müssen. Dies geht wie folgt:

stringify: Funktion(Objekt: beliebig, Leerzeichen: Zahl | Zeichenfolge, Fehler: (Fehler: Fehler | unbekannt) => {}) {
        versuchen {
            returniere JSON.stringify(obj, (k, v) => {
                wenn(Typ von v === 'Funktion') {
                    gibt `${this.FUNC_PREFIX}${v}` zurück
                }
                zurückgeben v
            }, Raum)
        } Fang(Fehler) {
            Fehler && Fehler(err)
        }
}

this.FUNC_PREFIX ist der von uns definierte Bezeichner, damit wir die Funktion bei Verwendung von JSON.parse schnell analysieren können. JSON.parse unterstützt auch einen zweiten Parameter, der dem zweiten Parameter von JSON.stringify ähnelt. Wir können ihn wie folgt konvertieren:

parse: function(jsonStr: string, error: (err: Error | unknown) => {}) {
        versuchen {
            return JSON.parse(jsonStr, (Schlüssel, Wert) => {
                wenn(Wert && Typ des Wertes === 'Zeichenfolge') {
                    Rückgabewert.indexOf(this.FUNC_PREFIX) > -1 ? neue Funktion(`return ${value.replace(this.FUNC_PREFIX, '')}`)() : Wert
                }
                Rückgabewert
            })
        } Fang(Fehler) {
            Fehler && Fehler(err)
        }
    }

New Function kann einen String in eine JS-Funktion umwandeln. Es akzeptiert nur String-Parameter. Seine optionalen Parameter sind die Eingabeparameter der Methode und die erforderlichen Parameter sind der Inhalt des Methodenkörpers. Ein anschauliches Beispiel:

Der Inhalt des Funktionskörpers im obigen Code ist:

neue Funktion(`return ${value.replace(this.FUNC_PREFIX, '')}`)()

Der Grund für die Rückgabe besteht darin, die ursprüngliche Funktion intakt wiederherzustellen. Sie können auch eval verwenden, aber aus Gründen der öffentlichen Meinung ist es besser, es mit Vorsicht zu verwenden.

Die obige Lösung kann bereits die Funktion der Front-End-Speicherfunktion realisieren, aber um technischer und robuster zu sein, sind viele zusätzliche Verarbeitungs- und Optimierungsschritte erforderlich, damit mehr Leute Ihre Bibliothek sofort verwenden können.

endlich

Damit mehr Leute diese Funktion direkt nutzen können, habe ich die komplette JSON-Serialisierungslösung in einer Klassenbibliothek gekapselt.

Die unterstützenden Funktionen sind wie folgt:

• stringify unterstützt Serialisierungsfunktionen und Fehlerrückrufe basierend auf nativem JSON.stringify
• parse unterstützt Deserialisierungsfunktionen und Fehlerrückrufe basierend auf nativem JSON.parse
• funcParse serialisiert die Funktionen im js-Objekt mit einem Klick und lässt den js-Objekttyp unverändert

Die Installationsmethode ist wie folgt:

# oder npm install xijs
Garn hinzufügen xijs

verwenden:

importiere { Parser } von 'xijs';

Konstante a = {
    x: 12,
    b: Funktion() {
      Alarm(1)
    }
 }
 
 const json = parser.stringify(a);
 const obj = parser.parse(json);
 //Methode obj.b() aufrufen;

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von JavaScript zum Speichern von Funktionen. Weitere relevante Inhalte zur Verwendung von JavaScript zum Speichern von Funktionen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!