使用RequireJS构造大型JavaScript代码

Question

对于RequireJS来说，这里非常新，并且试图学习如何采用这个结构。截至目前，我已经成功地创建一个结构如下

上图显示我的代码的结构。在文件夹“我的”应该包含我所有的模块的地方，我计划在每个模块里面写下自己的models.js，views.js，以后可以使用backbone.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文件，但不知道这是否是正确的方法。

Answer 1

这就是我如何在Python Django框架内设置RequireJS和JQuery。 在基地顶层baset_site.html我有“头”标记之间以下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); 
     } 
    }); 

})); 

然后我一般设置“块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) 

Answer 2

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

你的应用程序/ 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语法。而bootstrap文件实际上取决于jquery。所以使用shim config来加载bootstrap.min.js。基本上你的配置和起点应该定义路径+起点。所以多数民众赞成如何使它。