Ketahui tentang corak reka bentuk dan amalan terbaik dalam JavaScript

Dengan pembangunan berterusan JavaScript dan pengembangan skop aplikasinya, semakin ramai pembangun mula menyedari kepentingan corak reka bentuk dan amalan terbaik. Corak reka bentuk ialah penyelesaian reka bentuk perisian yang terbukti berguna dalam situasi tertentu. Amalan terbaik merujuk kepada beberapa spesifikasi dan kaedah terbaik yang boleh kami gunakan semasa proses pengaturcaraan.

Dalam artikel ini, kami akan meneroka corak reka bentuk dan amalan terbaik dalam JavaScript dan menyediakan beberapa contoh kod konkrit. Mari mulakan!

1. Corak reka bentuk dalam JavaScript

1. Singleton Pattern

Singleton pattern sahaja boleh Pastikan ada satu contoh sahaja kelas dan menyediakan pusat akses global. Dalam JavaScript, corak tunggal boleh digunakan untuk mengurus keadaan dan sumber global.

Contoh kod:

const Singleton = (function () {
  let instance;

  function createInstance() {
    const object = new Object({ name: "Singleton Object" });
    return object;
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

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

console.log(instance1 === instance2); // true
console.log(instance1.name); // 'Singleton Object'

2. Corak Pemerhati

Corak pemerhati boleh membuat objek (Subjek) objek (Pemerhati) dan memberitahunya tentang perubahan keadaan tertentu. Dalam JavaScript, corak pemerhati boleh digunakan untuk mencapai pengurusan acara dan modulariti yang lebih baik.

Contoh kod:

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

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

  unsubscribe(observer) {
    const index = this.observers.findIndex((obs) => {
      return obs === observer;
    });
    this.observers.splice(index, 1);
  }

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

class Observer {
  constructor(name) {
    this.name = name;
  }
  update() {
    console.log(`${this.name} has been notified!`);
  }
}

const subject = new Subject();
const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

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

subject.notify(); // Observer 1 has been notified! Observer 2 has been notified!

3. Corak Kilang

Corak kilang boleh mencipta objek secara dinamik. Dalam JavaScript, corak kilang boleh digunakan untuk mencipta objek daripada jenis yang berbeza tanpa perlu mendedahkan logik penciptaan kepada klien.

Contoh kod:

class Shape {
  draw() {}
}

class Circle extends Shape {
  draw() {
    console.log("Drawing a Circle!");
  }
}

class Square extends Shape {
  draw() {
    console.log("Drawing a Square!");
  }
}

class ShapeFactory {
  static createShape(type) {
    switch (type) {
      case "Circle":
        return new Circle();
      case "Square":
        return new Square();
      default:
        throw new Error("Shape type not supported!");
    }
  }
}

const circle = ShapeFactory.createShape("Circle");
const square = ShapeFactory.createShape("Square");

circle.draw(); // Drawing a Circle!
square.draw(); // Drawing a Square!

2 Amalan terbaik dalam JavaScript

1. Gunakan let dan const bukannya var#🎜. 🎜🎜#
Dalam ES6, let dan const ialah pembolehubah skop peringkat blok, manakala var ialah pembolehubah skop peringkat fungsi. Menggunakan let dan const menghalang promosi pembolehubah dan pengubahsuaian nilai pembolehubah secara tidak sengaja.

Merangkumkan berbilang sifat dan kaedah dalam satu objek

2. Merangkum sifat dan kaedah berkaitan boleh menjadikan kod lebih mudah dibaca dan diselenggara. Struktur seperti ruang nama boleh dibuat dengan mudah menggunakan literal objek dan kelas.

Contoh kod:

const myModule = {
  prop1: "value1",
  prop2: "value2",
  method1() {
    console.log("Method 1 called!");
  },
  method2() {
    console.log("Method 2 called!");
  },
};

myModule.method1(); // Method 1 called!

Elakkan pembolehubah global

3. Dalam penamaan, pembolehubah global dan Kod boleh menyebabkan konflik gandingan. Merangkum pembolehubah dan fungsi yang berkaitan dalam skop boleh menghalang masalah ini.

Contoh kod:

(function () {
  const a = "value1";
  const b = "value2";

  function doSomething() {
    console.log(a + b);
  }

  doSomething(); // value1value2
})();

Gunakan mod ketat

4. Menggunakan mod ketat, boleh menghalang beberapa ralat biasa Mengubah suai pembolehubah global secara tidak sengaja dan terlupa untuk menentukan pembolehubah. Mod ketat juga menyediakan sokongan yang lebih baik untuk piawaian ECMAScript masa hadapan.

Contoh kod:

"use strict";

let foo = "bar"; // OK
delete foo; // Error: Delete of an unqualified identifier in strict mode.

Kesimpulan

Corak reka bentuk dan amalan terbaik boleh membantu kami mengatur dan mengurus kod JavaScript dengan lebih baik serta meningkatkan kebolehcapaian Kebolehbacaan, kebolehselenggaraan dan kebolehgunaan semula. Dalam artikel ini, kami membincangkan secara khusus corak Singleton, Pemerhati dan Kilang, serta amalan terbaik untuk pengkapsulan pembolehubah, pengelakan pembolehubah global, skop peringkat blok dan mod ketat. Semoga pengetahuan ini akan membantu anda menulis kod JavaScript yang lebih baik.

Atas ialah kandungan terperinci Ketahui tentang corak reka bentuk dan amalan terbaik dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!