requirejs - 如何在条件下加载模块 - 什么解决方案好答案

【问题标题】：requirejs - how to load modules on condition - what solution is goodrequirejs - 如何在条件下加载模块 - 什么解决方案好
【发布时间】：2014-01-15 13:32:18
【问题描述】：

我对 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
    });
});

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

也许还有其他选择可以做到这一点？

【问题讨论】：

标签： javascript angularjs requirejs

【解决方案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 插件。

【讨论】：

【解决方案2】：

我找到了一种解决方案，但它以某种方式破坏了我的项目。我可以为每个视图创建不同的初始化文件（当用户登录时，当他没有登录时）。优化器会正常工作（文件会更小）。

init-logged.js

require([
//jquery plugins etc.
'jquery', 'libs/jquery.cookie', 'libs/csrf',
//main modules
'user/frontend/register', 'user/frontend/login', 
]);

init-singup.js

require([
//jquery plugins etc.
'jquery', 'libs/jquery.cookie', 'libs/csrf',
//main modules
'user/frontend/logout', 'user/frontend/change_password',  'user/frontend/profile_details',
]);

然后，只需使用 r.js 进行优化。选择与示例 1 相同的文件。并包含。

【讨论】：