ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptのモジュラー設計パターン

JavaScriptのモジュラー設計パターン

Christopher Nolan
Christopher Nolanオリジナル
2025-02-25 19:44:22862ブラウズ

Modular Design Patterns in JavaScript

コアポイント

  • メンバータイプの理解:JavaScriptのパブリック、プライベート、特権、保護されたメンバーの違いをマスターします。
  • モジュールモードのバリエーション:基本的なモジュールモード間のニュアンスと、一貫した内部コーディングスタイルと開示の柔軟な制御を提供するモジュールモードの表示について学びます。
  • 特権メンバーの使用
  • 特権メンバーを使用して、パブリック方法を介して民間変数を安全に公開し、カプセル化を維持しながら制御されたアクセスを可能にします。
  • メンバーの保護ポリシー:対照範囲内で一時的にデータを公開し、外部アクセスなしで複数のモジュール間でデータを共有することにより、JavaScriptの保護を有効にします。
  • 強化されたテクノロジー:追加のモジュールを単一のコンテキストに結合するためのメソッドを探索し、モジュールの独立性と管理性を維持しながら共有された状態と管理を達成します。 apply()
  • この記事では、拡張モジュール設計パターンの構造と利点について説明します。これには、4つの主要なメンバータイプが含まれます。

パブリックメンバー:
    メンバーはどこからでもアクセスできます。
  • プライベートメンバー:オブジェクト内からのみアクセスできるメンバー。
  • プライベートメンバー:オブジェクトから直接アクセスできるが、外部からパブリックメソッドを介して間接的にアクセスできるメンバー。
  • メンバーの保護:内部オブジェクトまたはモジュールのいずれかからのみアクセスできるメンバー。 この記事は、オブジェクト指向のプログラミングに関するものではありません。これは、作成する構造はシングルトンパターンであり、複数回インスタンス化できない単一のインスタンス構造です。実際、それは(コンストラクターを所有するという観点から)まったくインスタンス化されていないため、オブジェクトベースのパターンであり、オブジェクト指向のパターンではありません。 オブジェクトベースとオブジェクト指向のプログラミングの違いの詳細、およびJavaScriptのオブジェクト指向プログラミングの紹介については、Ryan Frishbergの記事:JavaScriptオブジェクト指向プログラミングをお読みください。
  • モジュラーデザインパターン

ここでは、古典的なモジュールパターンのバリアントであるが、より多くの制御を伴う基本設計パターンとして使用されます。これらのパターンを説明している記事はかなりありますが、実際にそれらがどのように機能するかを実際に説明している人はほとんどなく、そのような完全な機能セットを持っている人はほとんどいません!

基本的なモジュールモード

クラシックモジュールパターンは、返されたときに単一の変数に割り当てられる匿名関数のリテラルで、スクリプトのすべてのコードをラップします。関数リテラルはそれ自体を呼び出す関数にすぎないため、関数リテラルの最終割り当ては関数ではなく、関数によって返される値です。簡単な例を挙げると、関数リテラルには計算が含まれているため、合計に割り当てられた値はその計算の結果です。

この構文の意味を説明するために、次のものは同じコードで、指定された関数に抽象化されています。
<code class="language-javascript">var sum = (function() { return 6 * 7; })();</code>
この場合、実際にブラケットを

の周りに配置する必要はありませんが、匿名関数を使用する場合は、事前割り当てなしで単一の式として評価するために必要です。

<code class="language-javascript">function calculate() { return 6 * 7; }
var sum = (calculate)();</code>

パブリックメンバーおよびプライベートメンバーcalculate

したがって、関数リテラルでは、変数、プロパティ、関数など、他のコードを配置できます。内部データを定義するために使用されるさまざまなタイプの構文が、パブリックメンバーとプライベートメンバー間の分割を決定します。例は次のとおりです。

属性オブジェクトを返すため、オブジェクトは

に割り当てられているため、これらの属性はなどのオブジェクトの外側からアクセスできます。ただし、変数に元の範囲内でのみアクセスできるため、

または
<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  return {
    myPublicData : 42,
    myPublicFunction : function() {
      alert('public');
    }
  };
})();</code>
にアクセスすることはできません。変数の範囲は、

ステートメントによって決定されるコンテキストを定義することです。この例では、プライベート変数の範囲はMyModuleオブジェクトであるため、そのオブジェクト内からのみアクセスできます。 MyModule.myPublicData MyModule.myPublicFunctionmyPrivateDataモジュールモードを明らかにするmyPrivateFunctionvar MyModuleモジュールモードを使用して、2つの異なる構文を使用して、パブリックメンバーとプライベートメンバーの違いを作成します。モジュールパターンを明らかにすることは、このパターンのバリアントであり、すべての内部コンストラクトに対して同じ構文を使用できるようにし、最後のオブジェクトリテラル表記にのみ繰り返して、パブリックメンバーを返します(または明らかにします)。そのオブジェクトをもう一度見てみましょうが、今回は表示モジュールモードを使用してください:

パブリックメンバーとプライベートメンバーの間の分割は依然として同じですが、今回はこれらのメンバーを定義するために使用される元の構文ではなく、単に返されたコンテンツによって実装されています。これにより、モジュールパターンを明らかにするには、内部的に一貫したコーディングスタイルを使用できるため、有用なバリアントになります。これはまた、返送時にパブリックメンバーの名前を変更したり、どのメンバーがいつでもパブリックメンバーになるかを変更できることも意味します。このパターンは、彼の記事でこのパターンとその根底にあるモジュールパターンを説明したクリスチャン・ハイルマンによって革新されました:再びモジュールパターンを使用して - 世界に何かを明らかにします。

(記事の長さにより、次のコンテンツはセグメントに出力されます)

以上がJavaScriptのモジュラー設計パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。