Rumah > hujung hadapan web > tutorial js > Corak Reka Bentuk Kilang dalam JavaScript

Corak Reka Bentuk Kilang dalam JavaScript

DDD
Lepaskan: 2024-10-03 20:19:30
asal
538 orang telah melayarinya

Factory Design Pattern in JavaScript

Corak Reka Bentuk Kilang ialah corak reka bentuk ciptaan yang menyediakan cara untuk mencipta objek tanpa menyatakan kelas tepat objek yang akan dicipta. Ia melibatkan mencipta kaedah kilang yang menentukan kelas mana yang hendak dibuat instantiat berdasarkan input atau konfigurasi. Ia digunakan apabila semua penciptaan objek dan logik perniagaannya perlu kita simpan di satu tempat.

Corak reka bentuk kilang kelebihan utama ialah keupayaannya untuk memisahkan penciptaan objek daripada satu pelaksanaan tertentu.
Ia membenarkan untuk mencipta objek yang kelasnya ditentukan pada masa jalan.
Kilang membolehkan kami mendedahkan "kawasan permukaan" yang jauh lebih kecil daripada kelas, kelas boleh dilanjutkan, dimanipulasi, manakala kilang hanya sebagai fungsi menawarkan pilihan yang lebih sedikit kepada pengguna, menjadikannya lebih mantap.
Oleh itu, kilang juga boleh digunakan untuk menguatkuasakan enkapsulasi dengan memanfaatkan penutupan.

Kaedah untuk mengenakan enkapsulasi

Dalam Javascript, salah satu cara utama untuk menguatkuasakan enkapsulasi ialah melalui skop fungsi dan penutupan.

Kilang juga boleh digunakan sebagai mekanisme enkapsulasi.

Encapsulation merujuk kepada mengawal akses kepada beberapa butiran dalaman komponen dengan menghalang kod luaran daripada memanipulasinya secara langsung. Interaksi dengan komponen hanya berlaku melalui antara muka awamnya, mengasingkan kod luaran daripada perubahan dalam butiran pelaksanaan komponen.

Penutupan membolehkan anda mencipta pembolehubah peribadi dan kaedah yang tidak boleh diakses dari luar kilang, dengan itu menguatkuasakan pengkapsulan dan menyembunyikan butiran dalaman penciptaan dan pelaksanaan objek.

Menyahganding penciptaan dan pelaksanaan objek

Menyebut kilang, bukannya mencipta objek baharu secara langsung daripada kelas menggunakan operator baharu atau Object.create(), adalah lebih mudah dan fleksibel dalam beberapa aspek.

Kilang membolehkan kami memisahkan penciptaan objek daripada pelaksanaan. Sebuah kilang melengkapkan penciptaan contoh baharu, memberikan kami lebih fleksibiliti dan kawalan dengan cara kami melakukannya. Di dalam kilang kami memilih untuk mencipta contoh baharu kelas menggunakan pengendali baharu, atau memanfaatkan penutupan untuk membina literal objek stateful secara dinamik, atau malah mengembalikan jenis objek berbeza berdasarkan keadaan tertentu. Pengguna kilang langsung tidak mengetahui cara penciptaan contoh dijalankan.

Mari kita ambil contoh kecil untuk memahami mengapa kita memerlukan corak reka bentuk kilang

function createImg(name) {
    return new Image(name);
}

const image = createImg('photo.jpg');
Salin selepas log masuk

Anda boleh mengatakan mengapa perlu menulis baris kod tambahan ini, sedangkan kami boleh menulis terus:

const image = new Image(name);
Salin selepas log masuk

Jadi idea di sebalik penggunaan fungsi kilang (createImg) adalah untuk mengabstrakkan proses mencipta objek.

Faedah Fungsi Kilang dalam Pemfaktoran Semula:

Titik Perubahan Tunggal: Dengan menggunakan fungsi kilang, anda memusatkan proses penciptaan objek. Pemfaktoran semula atau melanjutkan logik memerlukan perubahan di satu tempat dan bukannya di seluruh pangkalan kod.

Memudahkan Kod Pelanggan: Kod pelanggan yang menggunakan fungsi kilang kekal tidak berubah, walaupun kerumitan proses penciptaan objek meningkat.

Encapsulation: Fungsi kilang merangkum sebarang logik tambahan (cth., caching, parameter lalai atau jenis objek baharu). Ini menghalang pertindihan logik di berbilang tempat dan mengurangkan risiko ralat semasa pemfaktoran semula.

Kebolehselenggaraan: Apabila kod anda berkembang, mengekalkan fungsi kilang menjadi lebih mudah daripada memfaktorkan semula instantiasi langsung. Dengan fungsi kilang, anda boleh memperkenalkan ciri baharu, membuat pengoptimuman atau membetulkan pepijat tanpa menjejaskan kod yang lain.

Contoh

Berikut ialah contoh asas untuk melaksanakan Corak Reka Bentuk Kilang dalam JavaScript:
Senario: Sebuah kilang untuk mencipta pelbagai jenis kenderaan (Kereta, Basikal, Lori), bergantung pada input.

// Vehicle constructor functions
class Car {
  constructor(brand, model) {
    this.vehicleType = 'Car';
    this.brand = brand;
    this.model = model;
  }

  drive() {
    return `Driving a ${this.brand} ${this.model} car.`;
  }
}

class Bike {
  constructor(brand, model) {
    this.vehicleType = 'Bike';
    this.brand = brand;
    this.model = model;
  }

  ride() {
    return `Riding a ${this.brand} ${this.model} bike.`;
  }
}

class Truck {
  constructor(brand, model) {
    this.vehicleType = 'Truck';
    this.brand = brand;
    this.model = model;
  }

  haul() {
    return `Hauling with a ${this.brand} ${this.model} truck.`;
  }
}

// Vehicle factory that creates vehicles based on type
class VehicleFactory {
  static createVehicle(type, brand, model) {
    switch (type) {
      case 'car':
        return new Car(brand, model);
      case 'bike':
        return new Bike(brand, model);
      case 'truck':
        return new Truck(brand, model);
      default:
        throw new Error('Vehicle type not supported.');
    }
  }
}

// Using the factory to create vehicles
const myCar = VehicleFactory.createVehicle('car', 'Tesla', 'Model 3');
console.log(myCar.drive()); // Output: Driving a Tesla Model 3 car.

const myBike = VehicleFactory.createVehicle('bike', 'Yamaha', 'MT-15');
console.log(myBike.ride()); // Output: Riding a Yamaha MT-15 bike.

const myTruck = VehicleFactory.createVehicle('truck', 'Ford', 'F-150');
console.log(myTruck.haul()); // Output: Hauling with a Ford F-150 truck.

Salin selepas log masuk

Cara Ia Berfungsi:

  1. Kelas Kenderaan: Kami mentakrifkan jenis kenderaan yang berbeza (Kereta, Basikal, Lori), masing-masing dengan pembina sendiri dan kaedah khusus seperti drive(), ride(), dan haul().
  2. Kaedah Kilang: Kaedah VehicleFactory.createVehicle() ialah kilang yang mengendalikan logik mencipta objek. Ia menentukan jenis kenderaan yang hendak dibuat seketika berdasarkan hujah jenis yang dihantar kepadanya.
  3. Kebolehgunaan semula: Kilang memusatkan logik untuk mencipta kenderaan, menjadikannya mudah untuk mengurus, melanjutkan atau mengubah suai proses penciptaan.

Ps: Dalam contoh Corak Reka Bentuk Kilang di atas, kelas seperti Kereta, Basikal dan Lori diwujudkan menggunakan kata kunci baharu dalam kaedah kilang (VehicleFactory.createVehicle)
Corak Kilang mengabstrakkan penciptaan objek, bermakna pelanggan tidak perlu menggunakan kata kunci baharu itu sendiri. Mereka bergantung pada kaedah kilang untuk mengembalikan contoh yang betul.

Bila Menggunakan Corak Kilang:

  • Apabila jenis objek yang tepat perlu ditentukan pada masa jalan.
  • Apabila anda ingin memusatkan logik penciptaan objek.
  • Apabila proses penciptaan melibatkan logik yang kompleks atau berbilang langkah.

Ringkasan

  • Corak Reka Bentuk Kilang ialah cara yang berguna untuk mengendalikan penciptaan objek yang kompleks atau pelbagai dalam JavaScript.
  • Ia mengabstraksikan logik instantiasi, membenarkan fleksibiliti dan pengurusan yang lebih mudah bagi jenis objek yang berbeza.
  • Corak ini digunakan secara meluas dalam aplikasi dunia nyata, terutamanya apabila bekerja dengan sistem yang kompleks di mana penciptaan objek mungkin bergantung pada keadaan atau konfigurasi masa jalan.
  • Dalam projek dunia nyata, apabila kod anda berkembang dan menjadi lebih kompleks, pendekatan fungsi kilang meminimumkan bilangan perubahan yang perlu anda buat, menjadikan kod anda lebih mudah diselenggara dan lebih mudah untuk difaktorkan semula.

Buku Rujukan : Corak Reka Bentuk NodeJs oleh Mario Casciaro

Seperti yang telah kami terokai, corak reka bentuk memainkan peranan penting dalam menyelesaikan cabaran reka bentuk perisian biasa dengan cekap. Sama ada anda baru bermula seperti saya, atau ingin memperdalam pemahaman anda, cerapan yang dikongsi di sini boleh membantu anda membina sistem yang lebih mudah disesuaikan dan berskala.

Perjalanan untuk menguasai corak reka bentuk mungkin terasa memberangsangkan pada mulanya, tetapi dengan memulakan secara kecil-kecilan, bereksperimen dan menggunakan konsep ini dalam projek dunia sebenar, anda akan mengukuhkan kemahiran anda sebagai pembangun. Sekarang giliran anda! Bagaimanakah anda akan menggunakan idea ini pada kerja anda? Kongsi pendapat atau soalan anda dalam ulasan di bawah—saya ingin mendengar daripada anda.

Terima kasih kerana menyertai saya dalam perjalanan pembelajaran ini!
✨✨✨✨✨✨

Atas ialah kandungan terperinci Corak Reka Bentuk Kilang dalam JavaScript. 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