Corak Reka Bentuk Perisian: Sos Rahsia Di Sebalik Setiap Apl Hebat

Bayangkan membina set LEGO tanpa manual. Sudah tentu, anda mungkin berakhir dengan sesuatu yang samar-samar menyerupai kapal angkasa, tetapi kemungkinan besar, anda akan berakhir dengan timbunan huru-hara yang berwarna-warni. Dalam dunia pengekodan, corak reka bentuk adalah seperti manual LEGO itu—ia memberikan anda pelan tindakan yang terbukti untuk menyelesaikan masalah biasa, menjadikan kod anda lebih bersih, lebih cekap dan lebih mudah diselenggara.

Tetapi jangan risau, ini bukan kuliah kering tentang prinsip pengekodan. Anggap ia sebagai panduan kecil yang menyeronokkan untuk beberapa corak reka bentuk yang paling biasa dalam JavaScript, lengkap dengan analogi kehidupan sebenar yang menjadikan konsep ini mudah dihadam.

1. Corak Singleton: Satu-satunya

Apa itu?

Corak Singleton memastikan bahawa kelas hanya mempunyai satu tika dan menyediakan titik global akses kepadanya. Ia seperti mempunyai satu alat kawalan jauh untuk TV anda. Anda tidak memerlukan berbilang alat kawalan jauh untuk mengawal kelantangan, menukar saluran atau mematikannya—anda hanya memerlukan satu alat kawalan jauh itu.

Kes Penggunaan Kehidupan Sebenar:

Dalam JavaScript, corak ini biasanya digunakan untuk mengurus keadaan aplikasi global. Contohnya, jika anda mempunyai troli beli-belah di tapak web e-dagang, anda mahu semua komponen yang berinteraksi dengan troli (seperti menambah item, mengalih keluar item atau menyemak keluar) merujuk kepada contoh troli yang sama. Singleton memastikan bahawa semua tindakan ini mempengaruhi troli yang sama, bukan salinannya yang berbeza.

class ShoppingCart {
  constructor() {
    if (!ShoppingCart.instance) {
      this.items = [];
      ShoppingCart.instance = this;
    }
    return ShoppingCart.instance;
  }

  addItem(item) {
    this.items.push(item);
  }

  getItems() {
    return this.items;
  }
}

const cart1 = new ShoppingCart();
const cart2 = new ShoppingCart();

cart1.addItem('Laptop');
console.log(cart2.getItems()); // ['Laptop']

2. Corak Pemerhati: Rangkaian Gosip

Apa itu?

Corak Pemerhati adalah tentang memastikan objek sentiasa disegerakkan. Apabila satu objek berubah, yang lain perlu tahu mengenainya. Ia seperti sembang kumpulan di mana semua orang sentiasa dikemas kini tentang perkara yang berlaku. Jika seseorang menukar rancangan untuk hujung minggu, semua orang dalam kumpulan akan mendapat memo.

Kes Penggunaan Kehidupan Sebenar:

Dalam JavaScript, corak ini sering digunakan dalam sistem pengendalian acara. Katakan anda sedang membina apl media sosial. Apabila seseorang menyukai siaran, anda ingin mengemas kini kiraan suka, memberitahu pengarang siaran dan mungkin mencetuskan animasi. Corak Pemerhati membolehkan komponen berbeza ini kekal dikemas kini tanpa disambungkan secara langsung.

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log(`Observer received: ${data}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify('New post liked!'); 
// Output: Observer received: New post liked!
// Output: Observer received: New post liked!

3. Corak Kilang: Pemotong Kuki

Apa itu?

Corak Kilang adalah mengenai mencipta objek tanpa menyatakan kelas objek yang tepat yang akan dibuat. Bayangkan pemotong biskut. Anda tidak tahu dengan tepat apa bentuk doh itu sehingga anda menekan pemotong ke bawah, tetapi anda tahu anda akan mendapat biskut.

Kes Penggunaan Kehidupan Sebenar:

Corak ini amat berguna apabila anda mempunyai koleksi objek yang berkongsi antara muka atau struktur yang sama tetapi mempunyai pelaksanaan asas yang berbeza. Contohnya, dalam permainan, anda mungkin mempunyai jenis musuh yang berbeza (zombie, vampire, serigala jadian), tetapi mereka semua berkongsi sifat yang sama seperti kesihatan, kelajuan dan kuasa serangan. Kilang boleh membantu anda mencipta musuh ini tanpa perlu risau tentang jenis tertentu.

class Enemy {
  constructor(type) {
    this.type = type;
    this.health = 100;
  }

  attack() {
    console.log(`${this.type} attacks with ${this.attackPower}`);
  }
}

class EnemyFactory {
  createEnemy(type) {
    let enemy;

    if (type === 'zombie') {
      enemy = new Enemy('Zombie');
      enemy.attackPower = 10;
    } else if (type === 'vampire') {
      enemy = new Enemy('Vampire');
      enemy.attackPower = 20;
    } else if (type === 'werewolf') {
      enemy = new Enemy('Werewolf');
      enemy.attackPower = 30;
    }

    return enemy;
  }
}

const factory = new EnemyFactory();

const zombie = factory.createEnemy('zombie');
zombie.attack(); // Zombie attacks with 10

const vampire = factory.createEnemy('vampire');
vampire.attack(); // Vampire attacks with 20

4. Corak Modul: Ruang Kerja Tersusun

Apa itu?

Corak Modul adalah seperti mempunyai ruang kerja yang teratur di mana segala-galanya mempunyai tempatnya. Ia membantu anda memastikan bahagian kod anda yang berlainan teratur dan terkapsul, menghalang ruang nama global daripada menjadi kucar-kacir.

Kes Penggunaan Kehidupan Sebenar:

Corak ini amat berguna dalam JavaScript untuk mencipta pembolehubah dan fungsi awam dan peribadi. Sebagai contoh, apabila anda membina perpustakaan atau pemalam, anda mungkin mahu mendedahkan kaedah tertentu kepada dunia luar sambil menyembunyikan yang lain. Corak Modul membolehkan anda berbuat demikian.

const Calculator = (function() {
  let result = 0;

  function add(x) {
    result += x;
    return result;
  }

  function subtract(x) {
    result -= x;
    return result;
  }

  function multiply(x) {
    result *= x;
    return result;
  }

  function divide(x) {
    if (x !== 0) {
      result /= x;
      return result;
    } else {
      console.error('Cannot divide by zero');
    }
  }

  return {
    add,
    subtract,
    multiply,
    divide,
    getResult: () => result,
  };
})();

console.log(Calculator.add(10)); // 10
console.log(Calculator.subtract(2)); // 8
console.log(Calculator.multiply(3)); // 24
console.log(Calculator.divide(4)); // 6

5. Corak Penyesuai: Penukar Palam

Apa itu?

Corak Penyesuai membenarkan antara muka yang tidak serasi berfungsi bersama. Anggap ia seperti penyesuai palam yang anda gunakan semasa melancong ke luar negara. Palam pengecas komputer riba anda mungkin tidak sesuai dengan soket dinding di negara lain, tetapi dengan penyesuai yang betul, ia berfungsi dengan sempurna.

Kes Penggunaan Kehidupan Sebenar:

Dalam JavaScript, anda mungkin menggunakan corak Penyesuai apabila anda menyepadukan dengan perpustakaan atau API pihak ketiga yang tidak betul-betul sepadan dengan struktur aplikasi anda. Penyesuai boleh mengubah antara muka kelas kepada antara muka lain yang diharapkan oleh pelanggan, menjadikan penyepaduan itu lancar.

class OldApi {
  constructor() {
    this.data = 'Old API data';
  }

  getData() {
    return this.data;
  }
}

class NewApi {
  fetchData() {
    return 'New API data';
  }
}

class ApiAdapter {
  constructor(oldApi) {
    this.oldApi = oldApi;
  }

  fetchData() {
    return this.oldApi.getData();
  }
}

const oldApi = new OldApi();
const adapter = new ApiAdapter(oldApi);

console.log(adapter.fetchData()); // 'Old API data'

6. The Composite Pattern: The Russian Nesting Dolls

What is it?

The Composite pattern allows you to treat individual objects and compositions of objects uniformly. It’s like Russian nesting dolls where each doll is part of a larger structure, but you can interact with them both as individual dolls and as a nested set.

Real-Life Use Case:

This pattern is often used in scenarios where you need to manage a hierarchy of objects. For example, consider a file system where files and folders are represented as objects. A folder can contain multiple files or even other folders, and you want to treat both files and folders similarly when it comes to operations like moving, copying, or deleting.

class File {
  constructor(name) {
    this.name = name;
  }

  display() {
    console.log(this.name);
  }
}

class Folder {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  add(child) {
    this.children.push(child);
  }

  display() {
    console.log(this.name);
    this.children.forEach(child => child.display());
  }
}

const file1 = new File('file1.txt');
const file2 = new File('file2.txt');
const folder = new Folder('MyFolder');
folder.add(file1);
folder.add(file2);

folder.display();
// Output:
// MyFolder
// file1.txt
// file2.txt

Conclusion

These are just a few of the many design patterns that can make your JavaScript code more robust, maintainable, and, let’s face it, fun to write. Whether you’re building the next big app or just trying to organize your code a bit better, these patterns can be your secret weapon. So next time you’re stuck, remember: there’s probably a pattern for that!

And hey, even if your code doesn’t end up looking like a LEGO spaceship, at least it won’t be a pile of colorful chaos.

Happy coding! ?

Atas ialah kandungan terperinci Corak Reka Bentuk Perisian: Sos Rahsia Di Sebalik Setiap Apl Hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!