Django 使用RequireJS构造大型javascript代码

我对RequireJS非常陌生，正在尝试学习如何适应这种结构。到目前为止，我已经成功地创建了如下结构

上图显示了我的代码的结构。在“my”文件夹应该包含我的所有模块的地方，我计划在每个模块中编写自己的models.js、views.js，稍后由backbone.js使用

在这一点上，我有以下几个问题

有人能通过查看结构来判断这是个好主意还是我应该重新考虑

第二个问题与我应该如何管理有条件地加载模块有关。下面是我的config.js文件

require([
        "jquery",
        "libs/jquery-ui/js/jquery-ui-1.9.0.custom.min",
        "libs/bootstrap/js/bootstrap.min",
        "my/base/module",
        "my/vehicle/module"],

    function($, ui, bootstrap, base, vehicle) {
        //plugins have been loaded.
        base.initialize();
        vehicle.initialize();

});

---

我仍然不确定在am浏览时如何加载模块车辆或在am浏览帐户时加载模块帐户。后端是使用django开发的，我可以为每个模块创建几个config.js文件，但不确定这是否是正确的方法

requireJS的本质是模块化。如果要加载任何脚本，应将路径配置放入rquireJS配置部分。但是，如果您希望有条件地使用/加载文件。然后，您必须围绕define模块包装代码。有点像这样

require.config({

paths:
{
    jquery: 'libs/jquery/jquery-1.7.2.min',
    jqueryui: 'libs/jquery/jquery-ui-1.8.20.min',
    bootstrap: 'libs/bootstrap/bootstrap.min',
},
shim: {
  'underscore': {
    exports: '_'
  },    
  'bootstrap': {
    deps: ['jquery'],
    exports: 'jquery'
  }
}


});



require(['app/jquery.app','jquery.bootstrap'], function (AppRouter) {
var app_view = new AppRouter;
}

<script data-main="/Scripts/main" src="/Scripts/libs/require/require.js" type="text/javascript"></script>

define(['jquery','my/base/module','my/vehicle/module']],
      //plugins have been loaded.
    base.initialize();
    vehicle.initialize();
 });

应用程序/jquery.app应该是应用程序的起点

您必须将其写入main.js文件，并像这样调用它

require.config({

paths:
{
    jquery: 'libs/jquery/jquery-1.7.2.min',
    jqueryui: 'libs/jquery/jquery-ui-1.8.20.min',
    bootstrap: 'libs/bootstrap/bootstrap.min',
},
shim: {
  'underscore': {
    exports: '_'
  },    
  'bootstrap': {
    deps: ['jquery'],
    exports: 'jquery'
  }
}


});



require(['app/jquery.app','jquery.bootstrap'], function (AppRouter) {
var app_view = new AppRouter;
}

<script data-main="/Scripts/main" src="/Scripts/libs/require/require.js" type="text/javascript"></script>

define(['jquery','my/base/module','my/vehicle/module']],
      //plugins have been loaded.
    base.initialize();
    vehicle.initialize();
 });

---

注意，在define模块中，我还没有定义要为jQueryUI和引导加载的任何内容。原因是jqueryui自己加载，并且使用jquery语法。引导文件实际上依赖于jquery。因此，请使用shim配置加载bootstrap.min.js。基本上，您的配置和起点应该定义路径+起点。所以，这就是我们如何做到的

这就是我如何在Python Django框架内使用JQuery设置RequireJS的方法。 在base top level baset_site.html中，“head”标记之间有以下require.js配置代码：

然后，我通常在继承的模板中设置“块头\u脚本”，如下所示：

{% block header_scripts %}
    {{ block.super }}

    <script>

        if ( typeof define === "function" && define.amd ) {
            // AMD {# Configure requirejs.config in base_site.html #}
            require(["./app_namespace/js/module_namespace/js_module"]);
        } else {
            // No AMD
            $.ajax({
                async:false,
                type:'GET',
                url: "{% static "app_namespace/js/make_filt_sel.js" %}",
                data:null,
                dataType:'script'
            });

            $.ajax({
                async:false,
                type:'GET',
                url: "{% static "app_namespace/js/module_namespace/js_module.js" %}",
                data:null,
                dataType:'script'
            });
        }

    </script>

{% endblock header_scripts %}

---

我注意到这个问题上的Django标签。如果您希望在运行

/manage.py collectstatic

时优化您的RequireJS模块，请查看django require。（免责声明：我写了这个Django应用程序）