Corak Reka Bentuk Proksi

Dalam blog saya sebelum ini, saya meneroka pelbagai corak reka bentuk ciptaan yang berkaitan dengan mekanisme penciptaan objek. Kini, tiba masanya untuk menyelami corak reka bentuk struktur, yang memfokuskan pada cara objek dan kelas digubah untuk membentuk struktur yang lebih besar sambil memastikannya fleksibel dan cekap. Mari kita mulakan dengan corak reka bentuk proksi

Corak Reka Bentuk Proksi dalam JavaScript

Corak reka bentuk Proksi ialah corak reka bentuk struktur yang menyediakan objek yang mewakili objek lain. Ia bertindak sebagai perantara yang mengawal akses kepada objek sebenar, menambahkan gelagat tambahan seperti pengamulaan malas, pengelogan, kawalan akses atau caching, tanpa mengubah kod objek asal.

Dalam JavaScript, proksi terbina dalam ciri yang disediakan oleh objek Proksi, membolehkan anda menentukan gelagat tersuai untuk operasi asas seperti akses harta benda, tugasan, seruan fungsi, dsb.

Bilakah Kita Memerlukan Corak Proksi?

Corak Proksi amat berguna apabila:

• Permulaan Malas: Anda mahu menangguhkan penciptaan objek berat sumber sehingga ia diperlukan.
• Kawalan Akses: Anda perlu mengawal akses kepada objek, contohnya, untuk menyekat akses yang tidak dibenarkan atau untuk mengehadkan operasi berdasarkan syarat.
• Pengelogan: Anda mahu melog tindakan pada objek (cth., akses harta atau panggilan kaedah).
• Caching: Anda mahu cache hasil operasi yang mahal untuk mengelakkan pengiraan berlebihan.

Komponen Corak Proksi

1. Subjek: Antara muka yang mentakrifkan operasi biasa untuk kedua-dua objek sebenar dan proksi.
2. RealSubject: Objek sebenar yang melakukan kerja sebenar.
3. Proksi: Perantara yang mengawal akses kepada RealSubject.

Analogi:

Bayangkan anda mempunyai lukisan besar yang anda ingin tunjukkan kepada tetamu anda, tetapi memerlukan banyak masa untuk menariknya keluar dari bilik simpanan (kerana ia berat dan mengambil masa untuk dibawa). Daripada menunggu itu setiap kali, anda memutuskan untuk menggunakan imej poskad kecil lukisan itu untuk menunjukkannya dengan cepat sementara mereka menunggu lukisan sebenar diambil.

Dalam analogi ini:

• Lukisan besar adalah objek sebenar (seperti imej yang mengambil masa untuk dimuatkan).
• Poskad ialah proksi (pengganti ringan yang berdiri di dalam sehingga objek sebenar siap).
• Setelah lukisan sebenar siap, anda tunjukkan lukisan sebenar kepada tetamu anda.

Analogi Dunia Sebenar:

Fikirkan ejen hartanah sebagai proksi. Apabila anda ingin membeli rumah, anda tidak segera melawat setiap rumah (memuatkan objek sebenar). Sebaliknya, ejen hartanah (proksi) mula-mula menunjukkan foto dan penerangan kepada anda. Hanya apabila anda bersedia untuk membeli (iaitu, apabila anda memanggil display()), ejen mengatur lawatan rumah (memuatkan objek sebenar).

Contoh Dunia Sebenar: Memuatkan Imej (Proksi Maya)

Mari kita gunakan contoh pemuatan imej dalam aplikasi web di mana kita ingin menangguhkan pemuatan imej sehingga pengguna memintanya (pemuatan malas). Proksi boleh bertindak sebagai pemegang tempat sehingga imej sebenar dimuatkan.

Berikut ialah cara anda boleh melaksanakan corak reka bentuk Proksi dalam JavaScript.

Contoh: Proksi untuk Memuatkan Imej

// Step 1: The real object
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }

  loadImageFromDisk() {
    console.log(`Loading ${this.filename} from disk...`);
  }

  display() {
    console.log(`Displaying ${this.filename}`);
  }
}

// Step 2: The proxy object
class ProxyImage {
  constructor(filename) {
    this.realImage = null; // no real image yet
    this.filename = filename;
  }

  display() {
    if (this.realImage === null) {
      // load the real image only when needed
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display(); // display the real image
  }
}

// Step 3: Using the proxy to display the image
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays the image
image.display(); // Just displays the image (already loaded)

Penjelasan:

1). Imej Sebenar:

• RealImageclass mewakili imej sebenar.
• Ia memerlukan nama fail sebagai input dan mensimulasikan proses yang memakan masa untuk memuatkan imej daripada cakera (ditunjukkan oleh kaedah loadImageFromDiskmethod).
• Setelah dimuatkan, kaedah paparan digunakan untuk menunjukkan imej.

2). Imej Proksi:

• ProxyImageclass bertindak sebagai stand-in untuk RealImage. Ia tidak memuatkan imej sebenar serta-merta.
• Ia memegang rujukan kepada imej sebenar (tetapi pada mulanya ia adalah batal kerana imej sebenar belum dimuatkan lagi).
• Apabila anda memanggil kaedah paparan pada proksi, ia menyemak sama ada imej sebenar telah dimuatkan. Jika tidak, ia memuatkannya dahulu, dan kemudian memaparkannya.

3). Penggunaan:

• Apabila kami mencipta tika ProxyImage, imej sebenar belum dimuatkan lagi (kerana ia intensif sumber).
• Paparan kali pertama dipanggil, proksi memuatkan imej (menggunakan RealImageclass) dan kemudian memaparkannya.
• Paparan kali kedua dipanggil, imej sebenar telah dimuatkan, jadi ia hanya memaparkan imej tanpa memuatkannya lagi.

Objek Proksi terbina dalam

Proksi ES6 terdiri daripada pembina proksi yang menerima sasaran & pengendali sebagai hujah

const proxy = new Proxy(target, handler)

Di sini, sasaran mewakili objek yang proksi digunakan, manakala pengendali ialah objek khas yang mentakrifkan kelakuan proksi.

Objek pengendali mengandungi satu siri kaedah pilihan dengan nama yang dipratentukan dipanggil kaedah perangkap (contohnya, gunakan, dapatkan, tetapkan dan telah) yang dipanggil secara automatik apabila operasi yang sepadan dilakukan pada contoh proksi.

Mari kita fahami perkara ini dengan melaksanakan kalkulator menggunakan proksi terbina dalam

// Step 1: The real object
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }

  loadImageFromDisk() {
    console.log(`Loading ${this.filename} from disk...`);
  }

  display() {
    console.log(`Displaying ${this.filename}`);
  }
}

// Step 2: The proxy object
class ProxyImage {
  constructor(filename) {
    this.realImage = null; // no real image yet
    this.filename = filename;
  }

  display() {
    if (this.realImage === null) {
      // load the real image only when needed
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display(); // display the real image
  }
}

// Step 3: Using the proxy to display the image
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays the image
image.display(); // Just displays the image (already loaded)

Bahagian terbaik menggunakan proksi dengan cara ini sebagai :

• Objek proksi mewarisi prototaip kelas Kalkulator asal.
• Mutasi dielakkan melalui perangkap yang ditetapkan Proksi.

Penjelasan Kod

1). Warisan Prototaip:

• Proksi tidak mengganggu prototaip asal kelas **Kalkulator **.
• ini disahkan dengan menyemak sama ada proxiedCalculator.proto === Calculator.prototype. Hasilnya akan menjadi benar.

2). Mengendalikan getOperations:

• Get trap memintas akses harta benda pada objek proksi.
• Kami menggunakan Reflect.get untuk mengakses sifat dan kaedah dengan selamat daripada objek asal.

3). Mencegah Mutasi:

Perangkap yang ditetapkan melemparkan ralat apabila terdapat percubaan untuk mengubah suai sebarang sifat pada objek sasaran. Ini memastikan kebolehubahan.

4). Menggunakan Kaedah Prototaip melalui Proksi:

Proksi membenarkan akses kepada kaedah seperti tambah, tolak, darab dan bahagi, semuanya ditakrifkan pada prototaip objek asal.

Perkara penting yang perlu diperhatikan di sini ialah:

• Memelihara Warisan Prototaip: Proksi mengekalkan akses kepada semua kaedah prototaip, menjadikannya berkelakuan seperti Kalkulator asal.
• Menghalang Mutasi: Perangkap yang ditetapkan memastikan keadaan dalaman objek kalkulator tidak boleh diubah tanpa diduga.
• Akses Selamat kepada Hartanah dan Kaedah: Perangkap get memastikan hanya sifat sah diakses, meningkatkan keteguhan.

Jika anda telah berjaya sejauh ini, jangan lupa tekan like ❤️ dan letakkan komen di bawah dengan sebarang pertanyaan atau fikiran. Maklum balas anda amat bermakna bagi saya dan saya ingin mendengar daripada anda!

Atas ialah kandungan terperinci Corak Reka Bentuk Proksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!