Perbincangan ringkas tentang objek tingkah laku dalam rangka kerja Polimer JavaScript

Artikel ini terutamanya memperkenalkan objek tingkah laku dalam rangka kerja Polimer JavaScript Polimer ialah rangka kerja berkaitan UI Web yang dibangunkan oleh Google Rakan yang memerlukan boleh merujuknya

Sekiranya localStorage menjadi nama rumah? Tetapi terdapat lebih banyak lagi kepada keluarga simpanan tempatan daripada itu. Kami bercakap tentang sessionStorage sebelum ini, tetapi kini terdapat juga CacheStorage ajaib. Ia digunakan untuk menyimpan objek Respons. Dalam erti kata lain, ia digunakan untuk cache respons HTTP. Walaupun localStorage juga boleh melakukannya, ia mungkin lebih khusus.

Rujukan kepada CacheStorage pada penyemak imbas ialah cache dan bukannya cacheStorage dalam kotak unta, yang ditakrifkan dalam spesifikasi ServiceWorker. CacheStorage ialah koleksi berbilang Cache, dan setiap Cache boleh menyimpan berbilang objek Respons.

Tiada lagi perkara karut, inilah demonya

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

Pertama, panggil kaedah terbuka pada cache untuk mendapatkan rujukan kepada objek Cache secara tidak segerak. Pada objek ini, kita boleh meletakkan objek Respons (parameter ialah URL dan objek Respons) dan menggunakan kaedah padanan untuk mendapatkannya (lalui URL dan dapatkan objek Respons yang sepadan).

Kaedah padanan boleh dipanggil bukan sahaja pada Cache tetapi juga pada CacheStorage Contohnya, contoh di atas membuka dua Cache dan menulis URL yang dipanggil /hehe. Selepas operasi tulis selesai, kaedah padanan dipanggil pada CacheStorage luaran untuk dipadankan /hehe Hasilnya adalah rawak (saya tidak dapat mencari di mana peraturan ini ditakrifkan).

Walaupun contoh di atas hanya meletakkan satu data pada objek Cache, objek Cache itu sendiri boleh menyimpan lebih banyak pasangan URL/Respons. Dan menyediakan kaedah seperti padam (penghapusan pengguna) dan kunci (untuk traversal). Walau bagaimanapun, Cache tidak mempunyai kaedah yang jelas seperti localStorage Jika anda mesti mengosongkan Cache, anda boleh memadamkan keseluruhan Cache pada CacheStorage dan membukanya semula.

API ini adalah sama dengan ServiceWorker Ia biasanya digunakan dalam ServiceWorker Keseluruhan gaya reka bentuk juga berdasarkan Promise seperti ServiceWorker.

Di atas ialah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial Video JavaScript!