2

我对这里的 RequireJS 非常陌生，并试图学习如何采用这种结构。截至目前，我已经设法创建了一个结构如下

ddd

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

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

  1. 任何人都可以通过查看结构来判断它是一个好主意还是我应该重新考虑？

第二个问题与我应该如何管理有条件地加载我的模块有关。下面是我的 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 文件，但不确定这是否是正确的方法。

4

2 回答 2

1

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

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

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

于 2012-10-20T05:32:32.823 回答
1

这就是我在 Python Django 框架中使用 JQuery 设置 RequireJS 的方式。在基础顶级 baset_site.html 我在“head”标签之间有以下 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);
        }
    });

}));

然后我通常在继承的模板中设置“block header_scripts”，如下所示：

{% 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 )
于 2015-02-04T18:09:51.337 回答