Une brève discussion sur l'objet behaviors dans le framework Polymer de JavaScript

Cet article présente principalement l'objet behaviors dans le framework Polymer de JavaScript. Polymer est un framework lié à l'interface utilisateur Web développé par Google. Les amis dans le besoin peuvent s'y référer

localStorage devrait-il être un nom familier ? Mais la famille du stockage local a bien plus à offrir que cela. Nous avons déjà parlé de sessionStorage, mais il existe désormais également un CacheStorage magique. Il est utilisé pour stocker les objets Response. En d’autres termes, il est utilisé pour mettre en cache les réponses HTTP. Bien que localStorage puisse également le faire, il est probablement plus spécialisé.

La référence à CacheStorage sur le navigateur est les caches au lieu de cacheStorage en cas de chameau, qui est défini dans la spécification ServiceWorker. CacheStorage est une collection de plusieurs Cache, et chaque Cache peut stocker plusieurs objets Response.

Fin de bêtises, voici la démo

<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>

Tout d'abord, appelez la méthode open sur les caches pour obtenir une référence à un objet Cache de manière asynchrone. Sur cet objet, nous pouvons mettre l'objet Response (les paramètres sont une URL et un objet Response) et utiliser la méthode match pour le récupérer (passer une URL et récupérer l'objet Response correspondant).

La méthode match peut être appelée non seulement sur Cache mais également sur CacheStorage. Par exemple, l'exemple ci-dessus ouvre deux Cache et écrit une URL appelée /hehe. Une fois l'opération d'écriture terminée, la méthode match est appelée sur le CacheStorage externe pour correspondre à /hehe. Le résultat est aléatoire (je ne trouve pas où cette règle est définie).

Bien que l'exemple ci-dessus ne place qu'une seule donnée dans l'objet Cache, l'objet Cache lui-même peut stocker plus de paires URL/Réponse. Et fournit des méthodes telles que la suppression (suppression de l'utilisateur) et les clés (pour la traversée). Cependant, Cache n'a pas de méthode claire comme localStorage. Si vous devez vider un cache, vous pouvez directement supprimer l'intégralité du cache sur CacheStorage et le rouvrir.

Cette API est la même que ServiceWorker. Elle est généralement utilisée dans ServiceWorker. L'ensemble du style de conception est également basé sur Promise comme ServiceWorker.

Ce qui précède représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !