JSモジュールモードの使い方の詳細説明

今回は、JS モジュール モードの使用方法について詳しく説明します。JS モジュール モードを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

JSにはClassという概念がないので、

ObjectのPublicプロパティとPrivateプロパティをどうやって反映させるかというと、その答えがモジュールパターン(Moduleパターン)です。

JS には注目すべき機能があります:

匿名関数(anonymous 関数)、匿名関数の確立と実行を通じて、匿名関数内のコードがクロージャを形成し、オブジェクトのプライベート特性とパブリック特性を形成、カプセル化、制御し、グローバル変数の増殖や他のスクリプト競合との競合を回避します。 。 りー

クラシックモジュールパターンテンプレート

(function () {
  // 所有的变量和函数只在这个范围内有效
  // 仍然可以使用全局变量
}());

クロージャを通して、myNamespace を使用すると、myPublic* の

プロパティとメソッド のみが表示され、myPrivate* のプロパティとメソッドには直接アクセスできないことがわかります。

基本モード拡張

ミックスインをインポートする

JS には、暗黙的グローバル変数と呼ばれる重要な機能があります。これは、JS インタープリターが変数の var 宣言を探すたびに、それが見つからない場合、その変数はグローバル変数とみなされます。これは、クロージャでグローバル変数を使用する場合に簡単に実行できるように見えますが、同時にコード内で混乱を引き起こしやすくなります。幸いなことに、匿名関数はパラメータも受け取ることができるため、パラメータの受け渡しを通じて、使用したいグローバル変数を匿名関数にインポートでき、より明確でクリーンな使用方法が提供されます。

りー

モジュールのエクスポート

グローバル変数を使用するだけでなく、独自のグローバル変数を宣言したい場合もあります。これは、匿名関数の戻り値を使用して簡単に実現できます。

りー

プレミアム拡張機能

上記の基本パターンに基づいて、拡張を続けることができます。

増強

基本モジュール モードの制限は、モジュール全体を 1 つのファイルに配置する必要があることです。では、モジュールを複数のファイルに分散する必要がある場合はどうすればよいでしょうか。

1 つの方法は、モジュールを増強することです。まずモジュールに入り、次に属性メソッドを追加してから出力します。例は次のとおりです

var myNamespace = (function () {
 var myPrivateVar, myPrivateMethod;
 // A private counter variable
 myPrivateVar = 0;
 // A private function which logs any arguments
 myPrivateMethod = function( foo ) {
   console.log( foo );
 };
 return {
  // A public variable
  myPublicVar: "foo",
  // A public function utilizing privates
  myPublicFunction: function( bar ) {
   // Increment our private counter
   myPrivateVar++;
   // Call our private method using bar
   myPrivateMethod( bar );
  }
 };
})();

緩やかな拡張

上の例では、最初にモジュールが必要で、次にそれに基づいて新しい機能を追加します。ただし、場合によっては JS スクリプトを非同期でロードするため、結合度の低いモジュール作成メソッドが必要になります。これは次の構造で実現できます。

りー

サブモジュール

サブモジュールはモジュールに基づいて構築できます。例は次のとおりです:

(function ($, YAHOO) {
  // 这样就可以访问jQuery (as $) 和 YAHOO 库
}(jQuery, YAHOO));

ここまで、最も古典的な JS モードであり、さまざまな JS フレームワークで広く使用されているモジュール モードについて簡単に紹介しました。これにより、コードがよりカプセル化され、より構造化され、より OOP 化されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vueの読み込み順序を操作する方法

BootStrapタイトルを設定して行の交差を禁止する方法

以上がJSモジュールモードの使い方の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。