すべての開発者が知っておくべき avaScript パターン 4-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-10-11 12:35:29

オリジナル

806 人が閲覧しました

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 Patterns Every Developer Should Know in 4