javascript - requirejs - 如何根据条件加载模块 - 什么解决方案是好的

Question

我对 requirejs 和按条件导入模块有疑问。例如，我有登录页面，其中包含一些模块。其中一些仅在用户登录时使用，另一些在用户未登录时使用。当然，我不希望用户在登录时能够注册。所以我有两种不同的解决方案:

第一个解决方案:只需要我需要的东西:

define(['jquery', 'dst!/static/dust/frontend/user_menu.dust'], function($, template) {
    var handleResponse = function(data) {
        if (data.status == 'not_logged') {
            require(["user/frontend/register"]);
            require(["user/frontend/login"], function(l) {

            });
        } else {
            require(["user/frontend/logout"]);
            require(["user/frontend/change_password"]);
            require(["user/frontend/profile_details"]);
        }
        template(data, function(err, html) {
            $('#userMenu').html(html);
        });

    };

    $.ajax({
        url: '/user/info/',
        type: 'GET',
        success: handleResponse
    });     
});

这使我的代码更加易于阅读，但我无法使用 r.js 工具对其进行优化。

第二种方案:

define(['jquery', 'dst!/static/dust/frontend/user_menu.dust',
'user/frontend/register', 'user/frontend/login', 'user/frontend/logout', 
'user/frontend/change_password',
'user/frontend/profile_details'], function($, template, register, login, change_password, profile_details) {
    var handleResponse = function(data) {
        if (data.status == 'not_logged') {
            register.init();
            login.init();

        } else {
            logout.init();
            profile_details.init(); 
            change_password.init();

        }

        template(data, function(err, html) {
            $('#userMenu').html(html);
        });

    };

    $.ajax({
        url: '/user/info/',
        type: 'GET',
        success: handleResponse
    });
});

很难读。一切都加载到内存中。

也许还有其他选择？

Answer 1

查看我创建的一个小库:require-lazy

它允许您使用简单的语法延迟加载模块:

define(["lazy!moduleWhenLogged", "lazy!moduleWhenAnonymous",
function(moduleWhenLogged, moduleWhenAnonymous) {
    ...
    if( logginSucceeded ) {
        moduleWhenLogged.get().then(function(realModule) {
            ...
        });
    ...
});

文本也是延迟加载的!

define(["lazy!text!foo.html", ...

并与 r.js 一起工作(即根据依赖关系图将不同的模块捆绑到单独的 JS 文件中)。

还没有很多文档，但我有很多示例。还有 Grunt、Bower 插件。