JavaScript はクロージャを使用してモジュール性を実現します

クロージャの力を利用しますが、表面的にはコールバックとは何の関係もないように見えます。その中で最も強力なモジュールを見てみましょう。 (これがクロージャです) は foo() の内部スコープでもあります。

次に次のコードを考えてみましょう:

function foo() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    console.log( something );
  }
  function doAnother() {
    console.log( another.join( " ! " ) );
  }
}

このパターンは JavaScript ではモジュールと呼ばれます。モジュール パターンを実装する最も一般的な方法は、モジュール エクスポージャと呼ばれることが多く、ここではそのバリエーションを示します。コードを詳しく見てみましょう。

まず第一に、CoolModule() は単なる関数であり、モジュール インスタンスを作成するにはそれを呼び出す必要があります。内側のスコープもクロージャも、外側の関数を実行せずに作成することはできません。次に、CoolModule() は、オブジェクト リテラル構文 { key: value, ... } で表されるオブジェクトを返します。返されたオブジェクトには、内部データ変数ではなく内部関数への参照が含まれています。私たちは内部データ変数を非表示にして非公開に保ちます。このオブジェクト タイプの戻り値は、本質的にはモジュールのパブリック API であると考えることができます。このオブジェクト型の戻り値は最終的に外部変数 foo に割り当てられ、それを使用して API のプロパティ メソッド (foo.doSomething() など) にアクセスできます。

モジュールから実際のオブジェクトを返す必要はなく、内部関数を直接返すこともできます。 jQuery が良い例です。 jQuery と $ 識別子は jQuery モジュールのパブリック API ですが、それ自体が関数です (関数はオブジェクトでもあるため、関数自体がプロパティを持つこともできます)。

doSomething() 関数と doAnother() 関数には、モジュール インスタンスの内部スコープをカバーするクロージャがあります (CoolModule() を呼び出すことで実装されます)。プロパティ参照を含むオブジェクトを返すことによって字句範囲外の関数を渡すとき、クロージャを観察および実践できる条件が作成されます。より簡単に説明すると、モジュールパターンは 2 つの必要条件を満たす必要があります。

1. 外部の囲み関数が必要であり、少なくとも 1 回呼び出す必要があります (呼び出すたびに新しいモジュール インスタンスが作成されます)。

2. クローズド関数は、プライベート スコープでクロージャを形成し、プライベート状態にアクセスまたは変更できるように、少なくとも 1 つの内部関数を返す必要があります。

機能的プロパティを持つオブジェクトは、それ自体では実際にはモジュールではありません。便利な観察の観点からすると、データ属性のみを持ち、クロージャ関数を持たない関数呼び出しから返されたオブジェクトは、実際のモジュールではありません。前のコード例には、何度でも呼び出すことができる CoolModule() という別のモジュール クリエーターがあり、呼び出すたびに新しいモジュール インスタンスが作成されます。インスタンスが 1 つだけ必要な場合は、このパターンを簡単に改善してシングルトン パターンを実装できます。

function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    alert( something );
  }
  function doAnother() {
    alert( another.join( " ! " ) );
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

この関数をすぐに呼び出し、戻り値をシングルトンのモジュール インスタンス識別子 foo に直接割り当てます。

モジュールも通常の関数なので、引数を受け取ることができます:

var foo = (function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    alert( something );
  }
  function doAnother() {
    alert( another.join( " ! " ) );
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
})();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

モジュール パターンのもう 1 つのシンプルだが強力なバリエーションは、パブリック API として返されるオブジェクトに名前を付けることです:

function CoolModule(id) {
  function identify() {
    console.log( id );
  }
  return {
    identify: identify
  };
}
var foo1 = CoolModule( "foo 1" );
var foo2 = CoolModule( "foo 2" );
foo1.identify(); // "foo 1"
foo2.identify(); // "foo 2"

モジュール インスタンスはパブリック API オブジェクトへの内部参照を内部的に保持しており、メソッドやプロパティの追加または削除、値の変更など、モジュール インスタンスを内部から変更できます。

以上がこの記事の内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。また、PHP中国語ウェブサイトも応援したいと思っています。

クロージャを使用してモジュール化を実現する JavaScript に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。