Eine kurze Diskussion über das Verhaltensobjekt im Polymer-Framework von JavaScript

In diesem Artikel wird hauptsächlich das Verhaltensobjekt im Polymer-Framework von JavaScript vorgestellt. Polymer ist ein von Google entwickeltes Web-UI-Framework. Freunde in Not können sich darauf beziehen.

Sollte localStorage ein bekannter Name sein? Aber die lokale Speicherfamilie bietet noch viel mehr. Wir haben bereits über sessionStorage gesprochen, aber jetzt gibt es auch einen magischen CacheStorage. Es wird zum Speichern von Antwortobjekten verwendet. Mit anderen Worten: Es wird zum Zwischenspeichern von HTTP-Antworten verwendet. Obwohl localStorage dies auch kann, ist es wahrscheinlich spezialisierter.

Der Verweis auf CacheStorage im Browser lautet „Caches“ statt „cacheStorage“ in der Kamel-Schreibweise, was in der ServiceWorker-Spezifikation definiert ist. CacheStorage ist eine Sammlung mehrerer Caches, und jeder Cache kann mehrere Antwortobjekte speichern.

Kein Unsinn mehr, hier ist die Demo

<script>
caches.delete(&#39;c1&#39;);
caches.delete(&#39;c2&#39;);
Promise.all([
 caches.open(&#39;c1&#39;).then(function(cache) {
  return cache.put(&#39;/hehe&#39;, new Response(&#39;aaa&#39;, { status: 200 }));
 }),
 caches.open(&#39;c2&#39;).then(function(cache) {
  return cache.put(&#39;/hehe&#39;, new Response(&#39;bbb&#39;, { status: 200 }));
 })
]).then(function() {
 return caches.match(&#39;/hehe&#39;);
}).then(function(response) {
 return response.text();
}).then(function(body) {
 console.log(body);
});
</script>

Rufen Sie zunächst die open-Methode für Caches auf, um asynchron einen Verweis auf ein Cache-Objekt zu erhalten. In dieses Objekt können wir das Response-Objekt einfügen (die Parameter sind eine URL und ein Response-Objekt) und die Match-Methode verwenden, um es abzurufen (eine URL übergeben und das entsprechende Response-Objekt abrufen).

Die Match-Methode kann nicht nur im Cache, sondern auch im CacheStorage aufgerufen werden. Im obigen Beispiel werden beispielsweise zwei Caches geöffnet und eine URL namens /hehe geschrieben. Nachdem der Schreibvorgang abgeschlossen ist, wird die Match-Methode auf dem externen CacheStorage aufgerufen, um mit /hehe übereinzustimmen. Das Ergebnis ist zufällig (ich kann nicht finden, wo diese Regel definiert ist).

Obwohl im obigen Beispiel nur ein Datenelement in das Cache-Objekt eingefügt wird, kann das Cache-Objekt selbst mehr URL/Antwort-Paare speichern. Und stellt Methoden wie delete (Benutzerlöschung) und Schlüssel (zum Durchlaufen) bereit. Allerdings verfügt der Cache nicht über eine Clear-Methode wie localStorage. Wenn Sie einen Cache leeren müssen, können Sie den gesamten Cache direkt auf CacheStorage löschen und erneut öffnen.

Diese API ist dieselbe wie ServiceWorker. Sie wird normalerweise in ServiceWorker verwendet. Der gesamte Designstil basiert ebenfalls auf Promise.

Das Obige ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!