Rumah > hujung hadapan web > tutorial js > Corak Reka Bentuk # Corak Penyesuai

Corak Reka Bentuk # Corak Penyesuai

WBOY
Lepaskan: 2024-07-18 01:27:31
asal
1011 orang telah melayarinya

Design Pattern # Adapter Pattern

Sejak beberapa minggu lalu, saya telah berkongsi beberapa corak reka bentuk yang menjadi sohor kini, seperti PubSub dan Singleton. Hari ini, saya akan berkongsi satu lagi artikel siri ini, tetapi sila komen di bawah dan beritahu saya corak reka bentuk mana yang perlu saya tutup seterusnya!

Corak Penyesuai

Corak Penyesuai ialah corak reka bentuk struktur yang membenarkan objek dengan antara muka yang tidak serasi untuk bekerjasama. Ia sering digunakan apabila anda ingin membuat kelas sedia ada berfungsi dengan orang lain tanpa mengubah suai kod sumbernya. Corak ini amat berguna apabila antara muka kelas sedia ada tidak sepadan dengan yang anda perlukan.

Senario Kes Sebenar

Mari kita pertimbangkan contoh kehidupan sebenar. Anda telah ditugaskan untuk menyepadukan pemain video pihak ketiga ke dalam aplikasi anda. Walau bagaimanapun, pemain video berfungsi secara berbeza dan mempunyai antara muka kaedah yang berbeza daripada jangkaan aplikasi anda. Dalam kes ini, anda boleh menggunakan Corak Penyesuai untuk membuat kelas pembalut di sekeliling pemain video, menjadikan kod pihak ketiga serasi dengan kod aplikasi sedia ada anda.

Berikut ialah kod yang anda akan gunakan dalam kes ini:

// Adapter class
class VideoPlayerAdapter {
    constructor() {
        this.externalPlayer = new ThirdPartyVideoPlayer({
            // some configuration
        });
    }

    play() {
        const video = this.externalPlayer.getVideo();
        this.externalPlayer.playVideo(video, {
            // additional parameters
        });
    }
}

// Your application code
class Application {
    constructor() {
        this.videoPlayer = new VideoPlayerAdapter();
    }

    start() {
        // Play video using your application code
        this.videoPlayer.play();
    }
}

Salin selepas log masuk

Jom pecahkan kod di atas:

  1. ThirdPartyVideoPlayer ialah perpustakaan luaran hipotesis yang ingin digunakan oleh aplikasi anda. Walau bagaimanapun, antara mukanya mungkin tidak serasi dengan aplikasi anda.
  2. VideoPlayerAdapter ialah kelas penyesuai. Ia merangkumi ThirdPartyVideoPlayer. Antara muka penyesuai adalah serasi dengan aplikasi anda. Apabila kaedah play() penyesuai dipanggil, kaedah tersebut secara dalaman memanggil kaedah yang diperlukan pada ThirdPartyVideoPlayer.
  3. Permohonan ialah kod permohonan anda. Ia mencipta contoh VideoPlayerAdapter dan menggunakannya seolah-olah ia adalah pemain video biasa. Apabila ia memanggil kaedah play() pada penyesuai, penyesuai menterjemahkannya ke dalam panggilan yang sesuai kepada ThirdPartyVideoPlayer.

Dengan cara ini, kelas Aplikasi tidak perlu mengetahui apa-apa tentang cara ThirdPartyVideoPlayer berfungsi. Jika anda perlu menggantikan ThirdPartyVideoPlayer dengan perpustakaan yang berbeza, anda hanya perlu menulis penyesuai baharu — kelas Aplikasi boleh kekal sama. Ini ialah faedah utama corak Penyesuai: ia memisahkan kod aplikasi anda daripada butiran perpustakaan pihak ketiga.

Perbezaan Antara Corak Penyesuai dan Corak Fasad

Walaupun Corak Penyesuai dan Corak Fasad mungkin kelihatan serupa, ia mempunyai tujuan yang berbeza dan digunakan dalam konteks yang berbeza:

  1. Tujuan:
    • Corak Penyesuai: Tujuan utama Corak Penyesuai adalah untuk menjadikan dua antara muka yang tidak serasi serasi antara satu sama lain. Ia membenarkan kelas sedia ada dengan antara muka yang berbeza untuk digunakan seolah-olah ia melaksanakan antara muka yang berbeza.
    • Corak Fasad: Tujuan utama Corak Fasad adalah untuk menyediakan antara muka yang dipermudahkan kepada subsistem yang kompleks. Ia menyembunyikan kerumitan subsistem dan menyediakan antara muka peringkat lebih tinggi yang menjadikan subsistem lebih mudah digunakan.
  2. Penggunaan:
    • Corak Penyesuai: Ia digunakan apabila anda perlu menyepadukan kelas atau perpustakaan baharu yang tidak sepadan dengan kelas atau antara muka sedia ada dalam aplikasi anda. Corak Penyesuai adalah mengenai menyesuaikan antara muka tertentu kepada antara muka yang dijangkakan.
    • Corak Fasad: Ia digunakan apabila anda ingin memudahkan interaksi dengan subsistem yang kompleks. Facade menyediakan kaedah mudah untuk berinteraksi dengan sistem, menyembunyikan kerumitannya.
  3. Reka bentuk:
    • Corak Penyesuai: Lazimnya melibatkan penciptaan kelas baharu (Penyesuai) yang melaksanakan antara muka yang diharapkan oleh pelanggan dan menterjemahkan panggilan ke kelas yang disesuaikan.
    • Corak Fasad: Melibatkan penciptaan kelas Fasad yang menyediakan kaedah yang dipermudahkan kepada pelanggan, selalunya mengagregatkan berbilang fungsi daripada subsistem.

Ringkasnya, sementara kedua-dua corak menyediakan cara untuk berfungsi dengan kod sedia ada, Corak Penyesuai memfokuskan pada keserasian antara muka, manakala Corak Fasad memfokuskan pada memudahkan interaksi dengan sistem yang kompleks.

Jemputan Super - Menang $5.000

Jadi, sementara anda berada di sini, izinkan saya menjemput anda untuk menyertai Superthis Ogos kami yang akan datang!

Acara jauh ini memberi anda peluang untuk mempamerkan kemahiran dan kreativiti anda dengan menangani cabaran untuk mengubah interaksi maya anda dengan alatan komunikasi masa nyata kami. Dengan SuperViz, anda berpeluang memenangi hadiah $5,000.

Daftar sekarang untuk menerima kemas kini, petua dan sumber serta bersedia untuk menggodam!

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

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan