ホームページ > 記事 > ウェブフロントエンド > JavaScriptモジュールパターンの詳細説明

JavaScriptモジュールパターンの詳細説明

小云云オリジナル: 2018-01-22 09:55:581661ブラウズ

この記事では、主に JavaScript モジュールモードを紹介し、関連する概念、関数、拡張機能、その他の操作テクニックを例の形で詳細に分析します。必要な友人が参考になれば幸いです。。

JS にはクラスの概念がないので、オブジェクトのパブリックプロパティとプライベートプロパティをどのように反映するか?その答えはモジュールパターンです。

JS には、匿名関数という重要な機能があります。匿名関数の確立と実行を通じて、匿名関数内のコードがクロージャを形成し、オブジェクトの形成、カプセル化、制御が行われます。グローバル変数の急増と他のスクリプトとの競合。

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

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

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 );
  }
 };
})();

クロージャーを通して、myNamespace を使用すると、myPublic* と myPrivate* のプロパティとメソッドのみが表示されることがわかります。メソッドには直接アクセスできません。

基本モード拡張

ミックスインのインポート

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

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

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

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

var MODULE = (function () {
  var my = {},
    privateVariable = 1;
  function privateMethod() {
    // ...
  }
  my.moduleProperty = 1;
  my.moduleMethod = function () {
    // ...
  };
  return my;
}());

高度な拡張

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

拡張

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

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

var MODULE = (function (my) {
  my.anotherMethod = function () {
    // added method...
  };
  return my;
}(MODULE));

Loose Augmentation

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

var MODULE = (function (my) {
  // add capabilities...
  return my;
}(MODULE || {}));

サブモジュール

モジュールに基づいてサブモジュールを構築できます。これは非常に簡単な例です:

MODULE.sub = (function () {
  var my = {};
  // ...
  return my;
}());

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

JavaScriptモジュールパターンの詳細説明

関連記事