Wie man die Idee von Vue nutzt, um einen Speicher zu kapseln

Hintergrund

Die beiden APIs localStorage und sessionStorage sind leistungsstarke Speichertools in unserer täglichen Frontend-Entwicklung. Wir verwenden sie häufig, um bestimmte Daten zu speichern. Beim täglichen Betrieb verwenden wir normalerweise localStorage und sessionStorage direkt:

: localStorage.setItem(xxx, xxx);
: sessionStorage.setItem(xxx, xxx);
localStorage.getItem(xxx);
: sessionStorage.getItem(xxx);

Oder manche Studenten fassen es einfach so zusammen:

const getItem = (Schlüssel) => {
   const serializedValue = window.localStorage.getItem(Schlüssel) als beliebig;
   gibt JSON.parse(serialisierterWert) zurück;
};
const setItem = (Schlüssel, Wert) => {
  wenn (Fenster && Fenster.localStorage) {
    window.localStorage.setItem(Schlüssel, JSON.stringify(Wert));
  }
};

Obwohl dies bei der Verwendung kein großes Problem darstellt, habe ich immer das Gefühl, dass der Code nicht elegant genug ist. Es ist passiert, dass ich kürzlich einige zugrunde liegende Basisbibliotheken gekapselt habe, einschließlich der Kapselung der beiden Brüder. Habe ein paar lustige Sachen gefunden. Der Herausgeber hat auch einige neue Erfahrungen und Ideen, die er mit allen teilen möchte.

Funktion

• localStorage-, sessionStorage-Einstellungen
• localStorage, sessionStorage-Erfassung
• Löschen Sie ein Element aus localStorage und sessionStorage
• localStorage, sessionStorage löscht den gesamten Speicher

Zweck

Kapseln Sie eine localStorage- und sessionStorage-API, um das Hinzufügen, Löschen, Ändern und Überprüfen von Speicher zu implementieren.

Ideenquelle

Wenn Sie Vue2.0 verwendet haben, müssen Sie die Methode Object.defineProperty kennen. Diese API ist der Kern der Reaktionsfähigkeit von Vue und wird zum Beobachten von Datenänderungen verwendet, hat jedoch einige Nachteile:

• Wenn in Objekttypdaten ein neues Schlüssel/Wert-Paar hinzugefügt oder ein vorhandenes Schlüssel/Wert-Paar gelöscht wird, kann dies nicht beobachtet werden. Wenn wir den Objektdaten Werte hinzufügen oder daraus löschen, können wir die Abhängigkeiten daher nicht benachrichtigen und die Ansicht nicht dazu veranlassen, reaktionsschnelle Aktualisierungen durchzuführen.
• Vue2.0 implementiert die Array-Änderungserkennung durch Interceptors. Dies bedeutet, dass das Array erkannt werden kann, solange es über die Methoden des Array-Prototyps bedient wird. Wenn die Daten jedoch über den Array-Index bedient werden, muss dies manuell erfolgen.

Diese Probleme wurden in Vue 3.0 gelöst und die Lösung ist die Proxy-Methode in ES6.

Proxy wird verwendet, um das Standardverhalten bestimmter Vorgänge zu ändern, was einer Änderung auf Sprachebene gleichkommt. Es handelt sich also um eine Art „Metaprogrammierung“, d. h. um die Programmierung der Programmiersprache.

Unter Proxy versteht man das Einrichten einer „Abfangschicht“ vor dem Zielobjekt. Jeder externe Zugriff auf das Objekt muss zuerst diese Abfangschicht durchlaufen. Daher bietet es einen Mechanismus zum Filtern und Umschreiben des externen Zugriffs. Die ursprüngliche Bedeutung des Wortes Proxy ist Agent. Es wird hier verwendet, um auszudrücken, dass es für bestimmte Vorgänge „als Agent fungiert“, was mit „Agent“ übersetzt werden kann.

Proxy ist ein natürlicher Interceptor und Proxy, daher können wir Proxy auch für Proxy-Operationen auf localStorage und sessionStorage verwenden. Kommen wir ohne weitere Umschweife direkt zum Code.

erreichen

var ProxyStorage = {
  /**
   * @returns Speicherproxy
   * @Beispiel
   * proxyStorage.getStorageProxy(localStorage, '_')
   */
  getStorageProxy: (Speicher, Präfix) => {
    wenn (!Speicher)
      gibt false zurück;
    const getKey = (prop) => `${prefix}.${String(prop)}`;
    gib neuen Proxy zurück(neues Objekt(), {
      /**
       * Speicher festlegen
       * @returns Boolescher Wert
       * @Beispiel
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * storageProxy.a = 1;
       */
      setze(Ziel, Eigenschaft, Wert) {
        Ziel[Eigenschaft] = Wert;
        storage.setItem(getKey(Eigenschaft), JSON.stringify(Wert));
        gibt true zurück;
      },
      /**
       * Holen Sie sich Speicherplatz
       * @returns Boolescher Wert
       * @Beispiel
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * console.log(storageProxy.a);
       */
      bekomme(_, prop) {
        gibt JSON.parse zurück (storage.getItem(getKey(prop)) || '');
      },
      /**
       * Speicher löschen
       * @returns Boolescher Wert
       * @Beispiel
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * storageProxy.a löschen;
       */
      löscheEigenschaft(_, prop) {
        Speicher.removeItem(getKey(prop));
        gibt true zurück;
      },
      /**
       * Klarer Speicher
       * @returns Boolescher Wert
       * @Beispiel
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * Objekt.preventExtensions(storageProxy);
       */
      Erweiterungen verhindern(Ziel) {
        Objekt.preventExtensions(Ziel);
        Speicher.löschen();
        gibt true zurück;
      },
      /**
       * Abfragespeicher
       * @returns Boolescher Wert
       * @Beispiel
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * „a“ in Speicherproxy;
       */
      hat(Ziel, Eigenschaft) {
        versuchen {
          gibt !!storage.key(Eigenschaft) zurück;
        } Fehler abfangen {
          gibt false zurück;
        }
      }
    });
  },
};

var proxyStorageTest = proxyStorage.getStorageProxy(localStorage, '_');

Verwenden Sie Proxy, um ein Proxy-Objekt von localStorage und sessionStorage zurückzugeben. Dieses Proxy-Objekt kapert Vorgänge wie „set“, „get“, „delete“, „preventextensions“ und „in“.

Satz

Fängt die Einstellung einer Objekteigenschaft wie storage.foo = v oder storage['foo'] = v ab und gibt einen booleschen Wert zurück. Weisen Sie den Eigenschaften des Proxy-Objekts Werte zu, fangen Sie die Zuweisung ab, bedienen Sie das SetItem des entsprechenden Speichers und speichern Sie den Wert dann direkt im entsprechenden Speicher.

Speicher.a = 1;
// oder
Speicher['a'] = 1;

erhalten

Fängt das Lesen von Objekteigenschaften wie storage.foo und storage['foo'] ab. Lesen Sie den Attributwert des Proxy-Objekts, fangen Sie den Erfassungsvorgang ab, rufen Sie den entsprechenden Schlüssel ab, führen Sie das getItem des entsprechenden Speichers aus und rufen Sie den entsprechenden Wert aus dem entsprechenden Speicher ab.

konsole.log(speicher.a); // 1

Eigenschaft löschen

Unterbrechen Sie den Vorgang zum Löschen von Storage[propKey] und geben Sie einen booleschen Wert zurück. Was hier abgefangen wird, ist der Vorgang des Löschens der Daten des Objekts, und der Vorgang „removeItem“ wird intern im Speicher ausgeführt, um die Daten zu löschen.

lösche proxyStorageTest.a;

Erweiterungen verhindern

Fängt Object.preventExtensions(storage) ab und gibt einen booleschen Wert zurück. Fangen Sie den nicht erweiterbaren Vorgang des Objekts ab und führen Sie intern einen Löschvorgang für den entsprechenden Speicher aus, um alle gespeicherten Werte zu löschen.

Objekt.preventExtensions(proxyStorageTest);

hat

Fängt Operationen an propKey im Proxy und die hasOwnProperty-Methode eines Objekts ab und gibt einen booleschen Wert zurück. Unterbrechen Sie den Vorgang der Abfrage von Attributen eines Objekts und fragen Sie ab, ob im entsprechenden Speicher ein Schlüssel vorhanden ist.

„a“ in ProxyStorageTest;

Zusammenfassen

Verwenden Sie Proxy, um Vorgänge auf localStorage und sessionStorage durchzuführen und eine einfache Speicher-API zu kapseln. Proxy kann zum Betreiben von localStorage, sessionStorage, document.cookie und indexedDB verwendet werden. Natürlich ist die Funktion von Proxy nicht darauf beschränkt. Es gibt auch viele andere Verwendungsmöglichkeiten, wie z. B. die Verwendung von Proxy in Vue 3.0 oder anderen. Der Schwerpunkt dieses Artikels liegt nicht auf der Kapselung einer einfachen API, sondern darauf, jedem beim Erlernen dieser Idee zu helfen.

Dies ist das Ende dieses Artikels zur Verwendung der Ideen von Vue zum Einkapseln eines Speichers. Weitere relevante Ideen von Vue zum Einkapseln eines Speichers finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!