Penjanaan Imej Rawak dan Caching dalam JavaScript

Penjanaan Imej Rawak dan Caching dalam JavaScript

Dalam banyak aplikasi web, adalah perkara biasa untuk memaparkan imej rawak untuk pelbagai tujuan seperti ruang letak, lakaran kenit atau kandungan visual. Walau bagaimanapun, menjana imej rawak untuk setiap permintaan boleh menjadi tidak cekap, terutamanya jika kita ingin menggunakan semula imej yang sama beberapa kali. Dalam artikel ini, kami akan meneroka cara menjana imej rawak dengan cekap menggunakan JavaScript dan melaksanakan mekanisme caching untuk mengelakkan panggilan API berlebihan.

Fungsi getRandomImage

Fungsi getRandomImage ialah fungsi utiliti yang menjana URL imej rawak berdasarkan lebar, ketinggian dan ID rawak yang disediakan. Mari kita lihat dengan lebih dekat bagaimana fungsi ini berfungsi:

const imageCache = {};

const getRandomImage = (width, height, randomId) => {
  const cacheKey = `${width}_${height}_${randomId}`;

  if (imageCache[cacheKey]) {
    return imageCache[cacheKey];
  }

  const imageUrl = `https://picsum.photos/${width}/${height}?random=${randomId}`;
  imageCache[cacheKey] = imageUrl;

  return imageUrl;
};

Mari kita pecahkan kod langkah demi langkah:

1. Kami mencipta objek kosong yang dipanggil imageCache untuk berfungsi sebagai cache kami untuk menyimpan URL imej yang dijana.

2. Fungsi getRandomImage mengambil tiga parameter: lebar, tinggi dan randomId. Parameter ini membolehkan kami mengawal dimensi dan keunikan imej rawak.

3. Di dalam fungsi, kami menjana kunci cache unik dengan menggabungkan nilai lebar, tinggi dan rawakId. Kunci ini akan digunakan untuk menyimpan dan mendapatkan semula URL imej daripada cache.

4. Kami menyemak sama ada URL imej yang sepadan dengan kunci cache sudah wujud dalam cache. Jika ya, kami hanya memulangkan URL imej cache dan bukannya menjana yang baharu.

5. Jika URL imej tidak ditemui dalam cache, kami meneruskan untuk menjana URL baharu menggunakan API picsum.photos. API ini menyediakan imej rawak pelbagai dimensi berdasarkan lebar, ketinggian dan ID rawak yang ditentukan.

6. URL imej yang baru dijana kemudiannya disimpan dalam cache menggunakan kekunci cache untuk kegunaan masa hadapan.

7. Akhir sekali, kami mengembalikan URL imej yang dijana.

Faedah Caching

Melaksanakan mekanisme caching dalam fungsi getRandomImage menawarkan beberapa kelebihan:

• Kecekapan: Dengan menyimpan URL imej, kami mengelak daripada membuat panggilan API berlebihan untuk gabungan lebar, ketinggian dan ID rawak yang sama. Ini meningkatkan prestasi keseluruhan aplikasi kami dan mengurangkan permintaan rangkaian yang tidak perlu.

• Guna Semula: Mekanisme caching membolehkan kami menggunakan semula imej rawak yang sama beberapa kali tanpa menjana semula URL imej baharu setiap kali. Ini amat berguna apabila memaparkan imej yang sama merentas bahagian atau komponen aplikasi kami yang berbeza, mempromosikan konsistensi dan mengurangkan overhed yang tidak perlu.

• Ketekalan: Apabila gabungan lebar, ketinggian dan ID rawak yang sama ditemui sekali lagi, fungsi tersebut mendapatkan semula URL imej daripada cache, memastikan ketekalan dalam imej yang dipaparkan sepanjang aplikasi.

Kesimpulan

Dalam artikel ini, kami meneroka cara menjana imej rawak dengan cekap dalam JavaScript menggunakan fungsi getRandomImage. Dengan melaksanakan mekanisme caching, kami boleh mengelakkan panggilan API yang berlebihan dan meningkatkan prestasi aplikasi web kami. Mekanisme caching menawarkan faedah seperti kecekapan yang dipertingkatkan, penggunaan semula imej dan konsistensi. Jangan ragu untuk menyesuaikan dan menggabungkan fungsi getRandomImage ke dalam projek anda untuk meningkatkan penjanaan imej rawak.

Kod Penuh:

const imageCache = {};

const getRandomImage = (width, height, randomId) => {
  const cacheKey = `${width}_${height}_${randomId}`;

  if (imageCache[cacheKey]) {
    return imageCache[cacheKey];
  }

  const imageUrl = `https://picsum.photos/${width}/${height}?random=${randomId}`;
  imageCache[cacheKey] = imageUrl;

  return imageUrl;
};

Ingat untuk menyesuaikan fungsi dan mekanisme caching agar sesuai dengan keperluan khusus anda dan laraskan strategi caching jika perlu.

Langgan surat berita saya di mana anda akan mendapat petua, helah dan cabaran untuk memastikan kemahiran anda tajam. Langgan surat berita

Atas ialah kandungan terperinci Penjanaan Imej Rawak dan Caching dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!