淺談JavaScript的Polymer框架中的behaviors對象

這篇文章主要介紹了淺談JavaScript的Polymer框架中的behaviors對象,Polymer是由Google開發的Web UI相關框架,需要的朋友可以參考下

localStorage 應是家喻戶曉的？但本地儲存這個家族可遠不止它。以前扯過 sessionStorage，現在還有個神奇的 CacheStorage。它用來儲存 Response 物件的。也就是說用來對 HTTP ，回應做快取的。雖然 localStorage 也能做，但它可能更專業。

CacheStorage 在瀏覽器上的引用名叫 caches 而不是駝峰寫法的 cacheStorage，它定義在 ServiceWorker 的規格中。 CacheStorage 是多個 Cache 的集合，而每個 Cache 可以儲存多個 Response 物件。

廢話不能說再多，下面是 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>

首先，在 caches 上呼叫 open 方法就可以異步地得到一個 Cache 物件的參考。在這個物件上我們可以把 Response 物件 put 進去（參數是一個 URL 和一個 Response 物件）、用 match 方法取出（傳入一個 URL 取出對應的 Response 物件）。

match 方法不僅可以在 Cache 上呼叫 CacheStorage 上也有 match 方法，例如上面範例就開啟了兩個 Cache，都寫入一個叫 /hehe 的 URL。在寫入操作完成之後，到外部的 CacheStorage 上呼叫 match 方法來匹配 /hehe，結果是隨機的（沒找到這個規則在哪裡定義的）。

雖然上面的範例只對 Cache 物件 put 了一個數據，而 Cache 物件本身可以存放更多的 URL/Response 對。並且提供了 delete（用戶刪除）、keys（用於遍歷）等方法。但 Cache 不像 localStorage 一樣有 clear 方法，如果非要清空一個 Cache，可以直接在 CacheStorage 上把整個 Cache 給 delete 掉再重新 open。

這套 API 和 ServiceWorker 一家的，它通常被用於 ServiceWorker 中，整個設計風格也和 ServiceWorker 一樣都基於 Promise。 

以上就是本章的全部內容，更多相關教學請造訪JavaScript影片教學！