1

私のアプリケーションでは、モジュールを初期化段階ではなく（で列挙することによって./modules/modules）、後で何らかの条件（ユーザー認証結果など）に基づいてオンデマンドでロードする必要があります。ユーザーAに電卓モジュールを提供し、ユーザーBにテキストエディターモジュールを提供したいとします。

簡単にするためにboilerplatejssampleModule1サンプルアプリを取り上げて、とsampleModule2がオンデマンドでロードされると仮定しましょう。

だから私はsrc\modules \modules.jsの最初のロードシーケンスからモジュールを削除します：

    return [
        require('./baseModule/module'),
        /*require('./sampleModule1/module'),
        require('./sampleModule2/module')*/
    ];

サマリーページ（src \ modules \ baseModule \ landingPage \ view.html）にコントロールを追加して、オンデマンドでロードします。

<div>
    Congratulations! You are one step closer to creating your next large scale Javascript application!
</div>
<div>
    <select id="ModuleLoader">
        <option value="">Select module to load...</option>
        <option value="./modules/sampleModule1/module">sampleModule1</option>
        <option value="./modules/sampleModule2/module">sampleModule2</option>
    </select>
</div>

次に、src \ modules \ baseModule \ module.jsにパッチを適用して、コンテキストをLandingPageComponentに渡します（何らかの理由で、元のソースコードにはありません）。

        controller.addRoutes({
            "/" : new LandingPageComponent(context)
        });

最後に、読み込みコードをsrc \ modules \ baseModule \ landingPage\component.jsに追加します。

            $('#ModuleLoader').on('change', function(){
                require([this.value], function(mod){
                    moduleContext.loadChildContexts([mod]);
                    alert('Module enabled. Use can now use it.');
                });
            });

これは機能しているように見えますが、これが最善の方法ですか？

コンテキストの読み込みを適切に処理しますか？

同じモジュールを2回ロードしないように保護するにはどうすればよいですか？

4

2 に答える 2

1

ここでの賢明な考え方..私は、プラグインとしてモジュールを遅延ロードするためにBoilerplateJSを改善することにあまりにも取り組んでいました。私は似たようなことをしました、そしてあなたは次の場所でPOCコードにアクセスできます：

https://github.com/hasith/boilerplatejs

私が行ったPOCでは、「遅延読み込み」と「構成可能なUI」を同時に実現しようとしています。

  • 各画面（アプリケーションと呼ばれる）は、レイアウトに配置されたコンポーネント（プラグイン）のコレクションです。これらのアプリケーション定義は、サーバーAPIから動的に返されるJSONオブジェクトであるか、JSONファイルとして静的に定義されます（POCの場合と同様）。POCでは、アプリケーション定義は「/ server/application」に保存されます。

  • これらのアプリケーションは、慣例により動的に呼び出すことができるようになりました。たとえば、「/ ## / shipping-app」は、「/ server/application」で同じ名前のアプリケーション定義を検索します。

  • アプリケーションのロードは、「/ modules / baseModule/appShell」にある新しいコンポーネントを介して行われます。'/ ## /'で始まるものはすべてこのコンポーネントにルーティングされ、「/ server/application」フォルダーから慣例によりアプリケーション定義をロードしようとします。

  • 'appShell'がアプリケーション定義を（JSONとして）受信すると、その中で定義されているコンポーネント（プラグイン）も動的にロードしようとします。これらのプラグイン可能なコンポーネントは「src/plugins」に配置され、慣例によりロードされます。

サンプルアプリケーション定義は次のようになります。

{
    "application-id" : "2434",
    "application-name" : "Order Application",
    "application-layout" : "dummy-layout.css",

    "components" : [    
        {
            "comp-name" : "OrderDetails",
            "layout-position" : "top-middle"
        },
        {
            "comp-name" : "ShippingDetails",
            "layout-position" : "bottom-middle"
        }
    ]

}

このアプローチの利点は次のとおりです。

  • アプリケーションインターフェイスはコンポーネント駆動型であり、実行時に構成可能です
  • ユーザーの役割などに応じて、異なるアプリケーション定義がユーザーに送信される可能性があります（バックエンドのロジック）
  • 既存のコンポーネントを組み合わせることで、アプリケーションをオンザフライで作成できます
  • ロードは規則に基づいているため、新しいアプリケーションやコンポーネントを追加するために「フレームワーク」で静的なコード変更は必要ありません。

これらは非常に初期の考えです。フィードバックに感謝します！

于 2013-02-19T14:45:04.020 に答える
1

変更イベントに名前付き関数を使用し、実行後に関数のバインドを解除することで、モジュールの複数の読み込みを防ぐことができます。

于 2013-02-18T16:10:10.350 に答える