13

Revealing Module Patternについて読んだことがありますが、とても気に入っています。しかし、「マスター オブジェクト」に数十のサブオブジェクトと、おそらく数百の関数がある大規模なプロジェクトはどうでしょうか。そのすべてのコードを 1 つの無名関数クロージャに配置するのは、私ではしたくありません。

では、大規模なモジュール パターン プロジェクトはどのように管理されるのでしょうか。

4

2 に答える 2

12

拡張を使用して、モジュールを別のファイルに分割できます。製品リリースの準備ができたら、これらのファイルを 1 つまたは複数のファイルに連結できます。

File1 はモジュール Mn を定義します

var M = M || {};
M.n = M.n || {};

(function (self) {
    self.doSomething = function () {
        console.log("something");
    };
})(M.n);

File2 はモジュール Mnp を定義します

var M = M || {};
M.n = M.n || {};
M.n.p = M.n.p || {};

(function (self) {
    self.doSomethingElse = function () {
       console.log("something else");
    };
})(M.n.p);

「メイン」スクリプトで、これらのモジュールのメンバーを自由に使用できます。

M.n.doSomething();
M.n.p.doSomethingElse();

モジュールを定義するのは少し面倒かもしれませんが、それを自動化するために何かを作り上げることができるはずです。以前は、簡単にするためにこの小さなスクリプトを使用しましたが、自由に独自のスクリプトを作成してください。一貫したファイル名を使用して、依存関係管理を組み込むことさえできる場合があります。

 var namespace = function(path, context, args) {
  var finalLink = namespace._generateChain(path, window);
  context.apply(finalLink, [finalLink].concat(args));
 };

 namespace._generateChain = function(path, root) {
  var segments = path.split('.'),
      cursor = root,
      segment;

  for (var i = 0; i < segments.length; ++i) {
   segment = segments[i];
   cursor = cursor[segment] = cursor[segment] || {};
  }

  return cursor;
 };

使用するには:

namespace("M.n.p", function (self) {
   self.doSomethingElse = function () {
      console.log("something else");
   };
});

何らかの理由で変数を別のエイリアスに含めたい場合は、名前空間関数に渡すことができ、引数として関数に渡されます。

namespace("M.n.p", function (self, $) {
   self.doSomethingElse = function () {
      $("p").text("something else");
   };
}, jQuery);
于 2011-05-22T02:17:47.500 に答える
3

RequireJSを使用して整理します。共有ロジックの場合、共有メソッドはグローバルにアクセス可能な名前空間に格納するか、require（）を介してアクセスする必要があります。アプリケーションコードに対して多くのrequire（）呼び出しを行う必要がなかったので、モジュールをチャンクにインクルードし、それぞれが定義インクルードを介して特定の名前空間にアタッチします。

//Core.js
define(function(){
  return {
    ns: 'global namespace'
  };
});

//newMethod.js
define(['core'], function( ns ){
  ns.newMethod = function(){ console.log( 'my new method ' ); }
});

//Application code
require(['newMethod'], function( namespace ) {
   console.log( namespace.ns ); //global namespace
   namespace.newMethod(); //'my new method'
});
于 2011-05-22T03:01:46.540 に答える