Question

这里对RequireJS很新，并试图学习如何采用该结构。截至目前，我已设法创建如下结构

ddd

上图显示了我的代码结构。在文件夹“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();

});

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

Answer 1

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;
}

您的app / jquery.app应该是您申请的起点。

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

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

和你的jquery.app这个起点应该是这样的

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

请注意，在define模块中，我没有定义要为jquery ui和bootstrap加载的任何内容。原因是因为jquery ui自己加载它并使用jquery语法。而bootstrap文件实际上取决于jquery。因此，使用shim config加载bootstrap.min.js。基本上您的配置和起点应该定义路径+起点。那就是如何制作它。

Answer 2

这就是我在Python Django框架中使用JQuery设置RequireJS的方法。在基本顶级baset_site.html中，我在＆＃34; head＆＃34;之间有以下require.js配置代码。标记：

<script>
    requirejs.config({
        baseUrl: "{% static '' %}",
        paths: {
            jquery: './js/jslibs/jquery-1.9.1',
            jqm: './js/jslibs/jquery.mobile-1.4.0',
            ajax_redirect: './js/ajax_redirect',
            make_filt_sel: './app_namespace/js/make_filt_sel'
        },
        shim: {
            "jquery": {
                exports: '$',
            },
            "jqm": {
                deps: ['jquery'],
                exports: '$.mobile'
            },
            "make_filt_sel": {
                deps: ['jquery', 'jqm'],
                exports: 'make_filt_sel'
            }
        }
    });

</script>

{% block header_scripts %}{% endblock header_scripts %}

这是我的ajax_redirect.js

/*
    JQuery Ajax typically does not redirect in Django. Need middleware to
    setup "class AjaxRedirect(object):" to fix redirection.
    Reference:
        http://hunterford.me/how-to-handle-http-redirects-with-jquery-and-django/
*/

(function ( root, doc, factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define( ['jquery'], function () {
            factory();
        });
    } else {
        // Browser globals
        factory();
    }
}( this, document, function ( ) {

    $(document).ajaxComplete(function(e, xhr, settings){
        if (xhr.status == 278){
            window.location.href =
                xhr.getResponseHeader("Location")
                    .replace(/\?.*$/, "?next="+window.location.pathname);
        }
    });

}));

然后我通常设置＆＃34;阻止header_scripts＆＃34;在继承的模板中如下：

{% 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 %}

以下是设置带依赖关系的js_module.js的示例：

(function ( root, doc, factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define( ['jquery', 'jqm', 'ajax_redirect', 'make_filt_sel'], function () {
            factory();
        });
    } else {
        // Browser globals
        factory();
    }
}( this, document, function ( ) {
    // A bunch of code
    $.mobile.document.on( "pagebeforecreate", function(e){
        // a bunch of code
        // Shorthand for $( document ).ready()
        $(function(){
            // a bunch of code
        }); // end of $( document ).ready()
    }); // end of $(document).on( "pagebeforecreate",

})); // end of (function ( root, doc, factory )

使用RequireJS构建大型JavaScript代码

2 个答案: