4

3 つのページ (単一ページのインターフェイス) を持つアプリケーションがあります。これらのページの機能は類似していますが、同一ではありません。

したがって、共通の機能を提供する javascript-modules が必要です。次に、各ページで共通機能の一部をカスタマイズ/上書きできます。

私は backbone.js を使用しているので、次のようにします。

  1. 共通のモデル、ビュー、コレクションなどを含むファイルをロードします。
  2. ステップ1の一部をカスタマイズ/上書きするアプリ固有のファイルをロードします
  3. 必要なすべてのモデル/ビュー/コレクションをインスタンス化する init() 関数を呼び出します

現時点では、モジュールを次のようなモジュール コンテナーに格納しています。https://stackoverflow.com/a/9426071 各モジュールには、メインの init() 関数によって実行されるオプションの init() 関数があります。

例：

  1. results.js というファイルがあります。検索結果の共通のモデル/コレクション/ビューを定義します。その init() 関数ではすべてがインスタンス化されますが、この関数はまだ呼び出されていません:

    var resultView = new ResultView()

  2. 次に、myApp.js をインクルードすると、View の一部が上書きされます。

  3. メインの init() 関数は、新しいビューをインスタンス化する results.js init() を呼び出します。すべてがうまく機能し、スムーズでドライです。

今度は、独自のモジュール コンテナーではなく、require.js に切り替えて、コードを整理する方法を知りたいと考えています。

各モジュールの init() 関数の代わりに、myApp.js ですべてのモデル/ビューなどをインスタンス化することもできます。これは、多くの反復コードがあることを意味します。

または、init() 関数を持つ各モジュールに固執し、myApp.js でそれらの init() 関数を呼び出すこともできます。3 つのページごとにモジュールを 3 回明示的に書き留める必要があるため、これは好きではありません。

require(['module1', 'module2', 'module3', ...],
  function(module1, module2, module3, ...) {
    var init = function() {
      module1.init();
      module2.init();
      module3.init();
      ...
    }
    return {init: init};
  }
);

10 個のモジュールと多数のライブラリの場合、これは適切ではなく、DRY です。require.js が保持するすべてのモジュールにアクセス (ループオーバー) する方法はありますか?

または、何か不足していますか? コードを別の方法で構成する必要がありますか?

ヒント/考えは大歓迎です。

マイケル

4

1 に答える 1

4

上記のコメントで説明したように、関数本体内のargumentsオブジェクトを使用してループすることにより、関数のパラメーターを明示的に参照する必要がなくなります。そう：

require(['module1', 'module2', 'module3', ..., 'moduleN'],
  function(module1, module2, module3, ..., moduleN) {
    var init = function() {
        module1.init();
        module2.init();
        module3.init();
        ...
        moduleN.init();
    };
    return {init: init};
});

なる:

require(['module1', 'module2', 'module3', ..., 'moduleN'],
  function() {
    var args = arguments;
    var init = function() {
        var module;
        for (module in args) {
            if (args.hasOwnProperty(module) && typeof module.init === 'function') {
                module.init.call(this);
            }
        }
    };
    return {init: init};
});

hasOwnProperty()ループ内にチェックを追加したのfor inは、いくつかの理由から、それが良い習慣だからです。initまた、関数を呼び出す前に、関数であることを明示的にチェックすることもできます。

の理由var args = argumentsは、内部関数から参照できるようにするためです。そうしないと、 に渡された引数を参照することになりますがinit()、これは必要なものではありません。

それはさておき、アーキテクチャレベルでは、あなたが説明したプロジェクト構造は非常にうまく機能していると思います.私はそれを多くの非常に大きなプロジェクトで使用していますが、決してがっかりすることはありません. Require.js は素晴らしいです。:)

于 2012-07-31T16:32:04.833 に答える