Adakah javascript memerlukan corak reka bentuk?

Dengan pembangunan aplikasi web, JavaScript telah menjadi salah satu bahasa pengaturcaraan yang paling popular, dan corak reka bentuknya secara beransur-ansur telah menarik perhatian meluas. Tetapi, adakah JavaScript memerlukan corak reka bentuk? Ini adalah topik kontroversi. Dalam artikel ini, kami akan meneroka kebaikan dan keburukan corak reka bentuk JavaScript dan cara menggunakannya dengan berkesan.

Corak reka bentuk ialah penyelesaian universal untuk masalah pengaturcaraan dan pelaksanaan kod berulang. Ia digunakan secara meluas dalam pelbagai bahasa pengaturcaraan dan persekitaran pembangunan. Javascript tidak terkecuali. Walaupun JavaScript tidak mempunyai sistem jenis statik seperti Java atau C++, ia boleh menggunakan corak reka bentuk untuk menyelesaikan masalah pengaturcaraan biasa dan meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

Pertama, mari kita lihat beberapa corak reka bentuk biasa dalam JavaScript dan cara ia berfungsi.

1. Corak Singleton

Corak singleton ialah corak reka bentuk biasa yang digunakan untuk mencipta kelas dengan hanya satu tika. Dalam JavaScript, anda boleh menggunakan penutupan dan fungsi yang dilaksanakan serta-merta (IIFE) untuk melaksanakan corak tunggal.

const Singleton = (() => {
  let instance;
  
  const createInstance = () => {
    const object = new Object({name: 'test object'});
    return object;
  }
  
  return {
    getInstance: () => {
      if(!instance){
        instance = createInstance();
      }
      return instance;
    }
  }
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // true

Dalam kod di atas, kami menggunakan IIFE untuk mencipta fungsi laksana sendiri Singleton, yang mengembalikan objek yang mengandungi kaedah getInstance. Kaedah getInstance menyemak sama ada tika telah dibuat, dan jika tidak, memanggil kaedah createInstance untuk mencipta tika baharu. Jika ia telah dibuat, mengembalikan contoh yang sedia ada. Memandangkan fungsi ialah warga kelas pertama dalam JavaScript dan boleh digunakan sebagai objek, kita boleh menggunakan fungsi sebagai pembina kejadian dan menggunakan sifat dan kaedah dalam pembina untuk memanipulasi kejadian.

2. Corak Terbit/Langgan

Corak Terbit/Langgan ialah corak reka bentuk biasa yang digunakan untuk memisahkan pengendali acara dan gelagat mereka yang sepadan. Dalam JavaScript, corak terbitkan/langgan boleh dilaksanakan menggunakan model acara.

class Event {
  constructor(){
    this.handlers = new Map();
  }
  
  subscribe(eventName, handler){
    if(!this.handlers.has(eventName)){
      this.handlers.set(eventName, []);
    }
    this.handlers.get(eventName).push(handler);
  }
  
  unsubscribe(eventName, handler){
    const handlers = this.handlers.get(eventName);
    const index = handlers.indexOf(handler);
    handlers.splice(index, 1);
  }
  
  publish(eventName, ...args){
    const handlers = this.handlers.get(eventName);
    handlers.forEach(h => {
      h(...args);
    });
  }
}

const event = new Event();

event.subscribe('click', () => console.log('click event fired'));
event.publish('click');

Dalam kod di atas, kami menggunakan kelas Acara untuk melaksanakan corak terbitan/langganan. Kami boleh menambah pengendali yang berbeza untuk nama acara yang berbeza dan kemudian menggunakan kaedah penerbitan untuk menerbitkan acara tersebut. Apabila peristiwa berlaku, semua pengendali yang sepadan akan dilaksanakan.

3. Corak kilang

Corak kilang ialah corak reka bentuk yang biasa digunakan untuk mencipta objek. Melalui corak kilang, kita boleh mencipta contoh objek dengan sifat dan tingkah laku yang sama. Dalam JavaScript, fungsi kilang boleh digunakan untuk melaksanakan corak kilang.

class Product {
  constructor(name, price){
    this.name = name;
    this.price = price;
  }
  
  getName(){
    return this.name;
  }
  
  getPrice(){
    return this.price;
  }
}

const ProductFactory = (() => {
  const products = new Map();
  
  const create = (name, price) => {
    if(products.has(name)){
      return products.get(name);
    }
    const product = new Product(name, price);
    products.set(name, product);
    return product;
  }
  
  return {
    create
  }
})();

const product1 = ProductFactory.create('product1', 100);
const product2 = ProductFactory.create('product2', 200);
const product3 = ProductFactory.create('product1', 300);

console.log(product1 === product3); // true

Dalam kod di atas, kami menggunakan fungsi ProductFactory untuk melaksanakan corak kilang. Apabila produk baharu perlu dibuat, kami terlebih dahulu menyemak sama ada produk itu sudah wujud. Jika wujud, kembalikan contoh produk sedia ada. Jika ia tidak wujud, tika produk baharu dibuat dan disimpan dalam objek Peta.

4. Corak penghias

Corak penghias ialah corak reka bentuk biasa yang digunakan untuk menambahkan gelagat pada objek secara dinamik. Dalam JavaScript, anda boleh menggunakan mixin dan penghias untuk melaksanakan corak penghias.

class Car {
  constructor(){
    this.speed = 0;
  }
  
  accelerate(){
    this.speed += 10;
    console.log(`Current speed is ${this.speed}`);
  }
}

const AC = {
  turnOn(){
    console.log('AC is on');
  },
  turnOff(){
    console.log('AC is off');
  }
};

const Turbo = {
  boost(){
    this.speed += 50;
    console.log(`Current speed is ${this.speed}`);
  }
};

const ACDecorator = (car) => {
  return Object.assign(car, AC);
}

const TurboDecorator = (car) => {
  const accelerate = car.accelerate;
  car.accelerate = () => {
    accelerate.call(car);
    Turbo.boost.call(car);
  }
  return car;
}

let car = new Car();
car = ACDecorator(car);
car = TurboDecorator(car);

car.turnOn(); // AC is on
car.accelerate(); // Current speed is 10, then Current speed is 60
car.turnOff(); // AC is off

Dalam kod di atas, kami menggunakan mixin dan penghias untuk melaksanakan corak penghias. Kami mula-mula menentukan kelas Kereta yang ringkas, dan kemudian menggunakan objek campuran AC dan Turbo untuk melanjutkan fungsi kelas Kereta. Akhir sekali, kami menggunakan fungsi ACDecorator dan TurboDecorator untuk menambahkan fungsi yang sepadan secara dinamik pada objek Kereta.

Kebaikan dan Kelemahan Corak Reka Bentuk JavaScript

Corak reka bentuk boleh menjadikan kod lebih mudah dibaca dan lebih mudah diselenggara, terutamanya dalam projek besar. Corak reka bentuk membolehkan anda menyahganding kod dan memecahkannya kepada ketulan boleh guna semula, yang boleh mengurangkan penyalinan dan penampalan kod. Menggunakan corak reka bentuk juga boleh menjadikan kod anda lebih jelas dan lebih mudah difahami.

Walau bagaimanapun, beberapa ciri JavaScript membolehkan penggunaan corak reka bentuk menjadi berlebihan dan ketat. JavaScript ialah bahasa yang fleksibel yang menjadikannya sangat mudah untuk membuat perubahan dengan cepat semasa menulis kod. Ini mungkin bermakna bahawa dalam beberapa kes, anda mungkin tidak perlu menggunakan corak reka bentuk untuk menyelesaikan masalah.

Selain itu, corak reka bentuk biasanya memerlukan beberapa kod tambahan untuk mengekalkan corak itu sendiri. Ini boleh membawa kepada kod yang lebih kompleks, terutamanya dalam projek kecil. Jika anda menulis aplikasi yang sangat mudah, menggunakan corak reka bentuk boleh menjadi beban yang tidak perlu.

Cara menggunakan corak reka bentuk JavaScript dengan berkesan

Walaupun corak reka bentuk JavaScript kadangkala boleh berlebihan, terdapat situasi di mana ia boleh menjadi sangat berguna. Corak reka bentuk harus digunakan apabila anda perlu menyelesaikan masalah yang berulang atau perlu menyusun kod anda dengan lebih baik.

Namun, sebelum menggunakan corak reka bentuk, anda harus mempertimbangkan kesesuaian mengaplikasikannya. Dalam sesetengah kes, menggunakan corak reka bentuk boleh mengakibatkan kod yang menjadi kompleks dan sukar untuk dikekalkan. Oleh itu, anda harus sentiasa mempertimbangkan kos dan faedah menggunakan corak reka bentuk.

Selain itu, amalan terbaik JavaScript harus diikuti, seperti mengelakkan penggunaan pembolehubah global, mengelakkan penggunaan penutupan yang berlebihan, dsb. Ini memastikan kod anda boleh dibaca dan diselenggara secara optimum.

Kesimpulan

Corak reka bentuk JavaScript boleh menyelesaikan masalah pengaturcaraan dengan baik dan meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Walau bagaimanapun, sebelum menggunakan corak reka bentuk, pastikan anda mempertimbangkan kesesuaiannya dan pertimbangkan kos dan faedah menggunakannya. Amalan terbaik JavaScript harus diikuti semasa menulis kod untuk memastikan kebolehbacaan dan kebolehselenggaraan kod yang optimum.

Atas ialah kandungan terperinci Adakah javascript memerlukan corak reka bentuk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!