すべての開発者が知っておくべき avaScript パターン 4

JavaScript は最も強力な言語の 1 つに進化しました。それに伴い、クリーンでスケーラブルで保守可能なコードを作成するためのベスト プラクティスを採用する必要があります。これを行う 1 つの方法は、デザイン パターンを理解して使用することです。ここでは、2024 年にコードベースを強化できる 5 つの主要な JavaScript 設計パターンを紹介します。

1.モジュールパターン
Module パターンは、パブリックおよびプライベートのカプセル化を作成するために使用され、コードの一部を非表示にし、その他の部分はアクセス可能な状態に保ちます。コードを構造化し、グローバルな名前空間汚染を回避するのに最適です。

例:

const myModule = (function() {
  const privateVariable = 'secret';
  return {
    publicMethod() {
      return `Accessed: ${privateVariable}`;
    }
  };
})();
console.log(myModule.publicMethod());  // Accessed: secret

2.シングルトン パターン
シングルトンは、クラスのインスタンスが 1 つだけであることを保証し、そのインスタンスへのグローバル アクセス ポイントを提供します。これは、構成やログ記録メカニズムなどの共有状態を管理するのに役立ちます。

例:

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2);  // true

3.オブザーバーパターン
Observer パターンでは、オブジェクト (サブジェクト) は、変更を通知されるオブザーバーのリストを保持します。イベント処理メカニズムによく使用されます。

例:

class Subject {
  constructor() {
    this.observers = [];
  }
  addObserver(observer) {
    this.observers.push(observer);
  }
  notify(message) {
    this.observers.forEach(observer => observer.update(message));
  }
}
class Observer {
  update(message) {
    console.log(`Received: ${message}`);
  }
}
const subject = new Subject();
const observer1 = new Observer();
subject.addObserver(observer1);
subject.notify('Hello, Observer!');  // Received: Hello, Observer!

4.ファクトリーパターン
Factory パターンは、正確なクラスを指定せずにオブジェクトを作成するために使用されます。オブジェクトの作成を一元管理し、作成内容を簡単に変更したい場合に最適です。

例:

class Car {
  constructor(type) {
    this.type = type;
  }
}
class CarFactory {
  createCar(type) {
    return new Car(type);
  }
}
const factory = new CarFactory();
const myCar = factory.createCar('SUV');
console.log(myCar.type);  // SUV

5.デコレータ パターン
Decorator パターンを使用すると、同じクラスの他のオブジェクトの動作に影響を与えることなく、個々のオブジェクトに動作を追加できます。これは、オブジェクトに動的な機能を追加するのに最適です。

例:

class Car {
  drive() {
    return 'Driving...';
  }
}
function sportsCar(car) {
  car.speed = () => 'Driving fast!';
  return car;
}
const myCar = new Car();
const fastCar = sportsCar(myCar);
console.log(fastCar.drive());  // Driving...
console.log(fastCar.speed());  // Driving fast!

結論
これらのデザイン パターンを組み込むことで、JavaScript コードの保守性と将来のプロジェクトの拡張性が向上します。各パターンにはそれぞれ長所があり、2024 年のワークフローを強化できます。単純なものでも複雑なものでも、これらのパターンはコードの構造と可読性を向上させます。

---

読んでいただきありがとうございます!コメントを残して、あなたの考えや、あなたのプロジェクトに役立つ別のデザインパターンがあれば教えてください。フィードバックをお待ちしています??
私のウェブサイトにアクセスしてください:https://shafayet.zya.me

---

あなたのためのミームですか?

以上がすべての開発者が知っておくべき avaScript パターン 4の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。