JS_モジュールモード

2425 ワード

一、jsモジュール化規範
jsはes 6の前にモジュール化されていなかったので、後にnodejsのcomonjs規範やamd仕様などが現れました.
二、モジュールモードの発生
YUIの規約により、より多くのオブジェクトをwindowで定義するべきではない.したがって、異なる機能モジュールのjsを同一のオブジェクトに定義する必要があります.これはモジュールモードの出現を促した.
三、コードの例
window.qbian = window.qbian || {};

window.qbian.module1 = (function($) {

  var privateVar = 1,
      publicVar = 2;

  function privateFunc() {
    console.info('privateFunc1 privateVar=' + privateVar);
  }

  function publicFunc() {
    privateFunc();
    console.info('publicFunc publicVar=' + publicVar);
  }

  return {
    param: publicVar,
    func: publicFunc
  };

})(jQuery);
上記のコード例によると、私達はwindowオブジェクトにQbianオブジェクトを定義し、次いで私達のmodule 1モジュールオブジェクトはQbianオブジェクトに定義されています.ここのmodule 1は単なるモジュール例であり、一つのプロジェクトには多くの機能モジュールが必要であり、全ては同じオブジェクトに定義されています.
上記の例では、プライベート変数とプライベート方法も使用していますが、jsにはプライベート/公有変数という概念は存在しません.しかし、上記のモードを通じてモジュール内部の変数/方法の私有化を実現することができます.
module 1モジュールの中にjQueryオブジェクトが入っていますが、モジュール内部では使用されていません.ここではモジュール内で他の機能モジュールをどうやって呼び出すかを示すだけです.
上記で定義された機能モジュールを呼び出します.
console.info(window.qbian.module1.param);

window.qbian.module1.func();
以上の呼び出しの出力結果は以下の通りです.
2
privateFunc1 privateVar=1
publicFunc publicVar=2
四、このモードのメリット
モジュールモードを通じて、私達は複雑なプロジェクトの中で各機能をモジュールに分けられます.最後にみんなが約束したwindowの下のオブジェクトに定義されます.このように全体の環境を汚染することはないし、モジュール間の境界分離も実現しました.Linuxの設計目的のように、複雑なシステムをモジュール化し、モジュール内部機能を独立させ、複数のモジュールの間で強力な機能を実現することができます.