JavaScriptのデザインパターンとは何ですか？ |初心者ガイド

開発者は、JavaScriptのデザインパターンを学習することに前向きな意図を示しています。 JS設計パターンは、ソースコードにデザインを提供し、効率的かつ保守可能にします。

概要

多数のJavaScriptプログラマーは、 JavaScriptの設計パターン について不明であり、このギャップを埋める必要があります。このシリーズJavaScriptチュートリアルでは、モジュールのデザインパターン、オブザーバーパターンなど、最も広く使用されているJavaScriptデザインパターンをカバーするこのブログ投稿を執筆しています。さらに、コードの例を使用してデモを行い、心に曖昧さが残っていないようにします。このトピックは、JavaScriptでキャリアを追求している場合に非常に重要です。したがって、この記事全体で接続を維持し、このブログ投稿の最後までに、JSの設計パターンを強く理解する必要があります。 このJavaScriptの初心者向けガイドでは、次のポイントをカバーするものとします。

• JavaScriptのデザインパターンとは？
• モジュール設計パターン
• 工場パターンJavaScript
• シングルトンパターンJavaScript
• オブザーバーパターンJavaScript

JavaScriptのデザインパターンとは何ですか？

JavaScriptの設計パターンは、ソースコードを書く際に繰り返し発生する一般的な問題に対する効率的なソリューションを提供するテンプレートの形のソリューションです。より単純な言葉で言えば、デザインパターンは、メンテナンス可能で管理可能なJavaScipRTコードを記述するための事前に定義されたスタイル/注文です。 小規模な組織では、ほとんどの開発者は設計パターンに注意を払いませんが、大規模なビジネスソフトウェアを構築しているときに重要なテーマになります。基本的に、独自のスタイルを作成するコードを備えたエンタープライズレベルのソフトウェアで作業する多くの開発者がいます。したがって、繰り返しの問題を防ぎ、再利用可能なコードブロックを構築し、アプリ開発をスピードアップするための設計パターンを選択します。

モジュール設計パターン

これは、開発者が選択する最も一般的で頼りになるデザインパターンです。この設計パターンに従って、アプリケーションコードブロックはモジュールの形で互いに別々に配置されます。このJavaScriptの設計パターンは、分離とカプセル化を提供します。さらに、モジュールの外部からアクセスできないパブリック/プライベート機能と属性を作成できます。とりわけ、モジュラー設計パターンのモジュールは常にオブジェクトを返します。 エンタープライズレベルのリッチフィーチャーのビジネスアプリケーションを構築している場合に備えて、このデザインパターンを使用できます。そのため、独立性をもたらすために、すべての機能に対して個別のモジュールを構築できます。 次のコードスニペットは、モジュラー設計パターンを示しています。

const student = (function () {
  // Private
  let name = "mustafa";
  let program = "computer science";
  const getStudentName = () => name;
  const getStudentProgram = () => program;

  // Public
  return {
    name,
    program,
    getName: () => getStudentName(),
    getStudentProgram: () => getStudentProgram(),
  };
})();

student.name;
student.program;
student.getStudentProgram();

工場パターンJavaScript

この設計パターンに従って、 new 演算子でコンストラクターを呼び出すのではなく、インターフェイスを使用してオブジェクトを作成します。実際、オブジェクトの種類を指定し、工場はインスタンスを作成し、使用するために私たちを送り返します。さらに、このJavaScriptの設計パターンは、オブジェクトの作成を完全に制御できます。さらに、このデザインパターンを選択するためにシンプルで複雑なオブジェクトを処理することができます。また、工場パターンをデカップリングに使用することも賢明です。 さらなる調査のためにコードスニペットを書きましょう。

// sandwich.js
const Sandwich = function({name }) {
  this.name = name || "";
};
module.exports = Sandwich;

// burger.js
const Burger = function({name }) {
    this.name = name || "";
};
module.exports = Burger;

// gadFoodFactory.js
const Sandwich = require("./sandwich");
const Burger = require("./burger");
const food = { Burger, Sandwich };
module.exports = {
    createFood(type, attributes) {
        const GadFoodType = food[type];
        return new GadFoodType(attributes);
    }
};

// index.js
const gadFoodFactory = require("./gadFoodFactory");
const mySandwich = gadFoodFactory.createFood("Sandwich", {
    name: "Chicken"
});
const myBurger = gadFoodFactory.createFood("Burger", {
    name: "Grilled",
});
console.log(mySandwich);
console.log(myBurger);

シングルトンパターンJavaScript

この設計パターンは、クラスのインスタンス化を単一のオブジェクトに制限する非常に人気があります。 JavaScriptフレームワークAngularのサービスは、このパターンに従って、サービスの1つのインスタンスのみを作成し、そのオブジェクトはすべてのモジュールにアクセスできます。さらに、単一のオブジェクトに接続されているすべてのクライアントは、同じリソースとアクセスレベルを共有します。 シングルトンパターンのデモンストレーションは次のとおりです。

let singletonPattern = new (function () {

  let name = "mustafa";

  this.printName = function() {
      console.log(name);
  }
})();

singletonPattern.printName();

// output: mustafa

オブザーバーパターンJavaScript

オブザーバーパターンは、スケーラブルなビジネスアプリを構築するのに非常に役立ちます。このコードパターンには通知メカニズムが関係しています。変更があるときはいつでも、他の依存したサブスクリプションに通知するイベントをトリガーします。したがって、このパターンは、最新の状態をモジュール全体の他のオブジェクトにブロードキャストします。実際、サブスクライバーへの変更を自動的に通知することがすべてです。 次のコードの例は、オブザーバーパターンに従います。

function ObserverFunc() {
this.observerArray = [];
}

ObserverFunc.prototype.subscribe = function (ele) {
this.observerArray.push(ele);
}

ObserverFunc.prototype.unsubscribe = function (element) {
const elementIndex = this.observerArray.indexOf(element);
if (elementIndex > -1) {
this.observerArray.splice(elementIndex, 1);
}
}

ObserverFunc.prototype.notifyAll = function (element) {
this.observerArray.forEach(function (observerElement) {
observerElement(element);
});
}

結論

JavaScriptのデザインパターン のすべてです。この JavaScriptチュートリアルを楽しんで、デザインパターンの概念を学んだことを願っています。モジュール設計パターン、シングルトン、オブザーバー、工場の設計パターンなど、最も一般的に使用されるコードパターンをカバーしました。この記事では、コードスニペットの助けを借りて明確な画像を提供します。さらに、以下の「参照」セクションにある他の非常に関連性の高いブログ投稿があります。

私達と接続

最後に、containerize.comは、新しいトピックに関するJavaScriptの投稿を書く一貫したプロセスにあります。 Facebook、LinkedIn、Twitterなど、ソーシャルメディアプラットフォームでフォローしてループにとどまることができます。

質問する

フォーラムでの質問や質問についてお知らせください。

FAQ

JavaScriptで最も人気のあるデザインパターンは何ですか？ モジュールパターン、オブザーバー、ファクトリー、シングルトンパターンは、JavaScriptプログラミングで広く使用されています。これをさらに探索するには、このリンクに従ってください。

参照

• あなたのキャリアを助けるためにJavaScriptの基本概念を学ぶ
• 人工知能の紹介| aiとは？
• ChatGptをGoogleシートと統合する方法
• vscodeでchatgptの使用方法| VSCODE拡張コードGPT
• Openai Chatbot gpt-3 | ai革命をchatgpt
• chatgptとの統合をGoogleドキュメント| Openai GPT-3
• トップ5のオープンソースAIフレームワークは何ですか
• 生成AI |とは何ですか生成人工知能