图案为[延迟加载]模块按需(Pattern for [lazy-loading] modules o

在我的应用程序需要不是在初始化阶段加载模块（通过枚举它们./modules/modules ），但在后来的需求基于一些条件（例如，用户授权的结果）。想象一下，我想提供用户A使用计算器模块，并用文本编辑器模块， 用户B。

让我们以简单boilerplatejs示例应用程序，并假定sampleModule1和sampleModule2是按需加载。

所以我删除从最初的装料程序模块将src \ \模块modules.js：

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

并添加控件摘要页面（SRC \模块\ 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 \模块\ baseModule \ module.js传递上下文到LandingPageComponent（由于某种原因，它并不在原始源代码）：

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

最后加载代码添加到SRC \模块\ baseModule \的LandingPage \ component.js：

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

这似乎是工作，但是这是做的最好的方法是什么？

是否正确处理上下文加载？

如何防止加载在同一模块的两倍？

Answer 1:

敏捷的思维在这里..我太努力改善BoilerplateJS懒加载模块，插件最后几天。我做了类似的事情，和u可以访问POC代码：

https://github.com/hasith/boilerplatejs

在POC我做到了，我想实现“懒加载” +在同一时间“配置用户界面”。

每个屏幕（称为应用程序）的是放置在一个布局的组件（插件）的集合。这些应用程序定义只是一个JSON对象或者从服务器API返回动态或静态地定义为JSON文件（因为它是在POC）。在POC，应用程序定义存储在“/服务器/应用”。
这些应用程序可以动态地按照惯例，现在被称为。例如“/ ## /船运应用”将寻找在“/服务器/应用”同名的应用程序定义。
应用程序加载经由“/模块/ baseModule / appShell”的新分量I有发生。任何与盯着“/ ## /”将被路由到该组件，然后它会尝试通过从“/服务器/应用程序”文件夹中约定来加载应用程序定义。
当“appShell”接收应用程序定义（作为JSON），它会尝试加载组件在它被定义动态太那（插件）。这些可插入组件被放置在“SRC /插件”，并会按照惯例也被加载。

示例应用程序的定义看起来象下面这样：

{
    "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"
        }
    ]

}

是方法的优点如下：