Structuring large javascript code using RequireJS - django

Question

Am very new to RequireJS here and trying to learn how to adopt to the structure. As of now, I've managed to create a structure as following
above image shows the structure of my code. Where by the folder "my" is supposed to contain all my modules, I plan to write inside each module its own models.js, views.js to be used later on by backbone.js
At this point I have couple questions as following
Can anyone by looking at the structure tell if its a good idea or if I should reconsider?
The second question is have is related to how I should manage conditionally loading my modules. Below is my config.js file
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 still not sure how to load module vehicle when am browsing or load module accounts when am browsing accounts. The backend is developed using django, I could create several config.js files for each module but am not sure if this is the correct approach or not.

Answer 1

This is how I setup RequireJS with JQuery within Python Django framework.
In base top level baset_site.html I have the following require.js config code between "head" tags:
<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 %}
Here's my 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);
}
});
}));
Then I typically setup "block header_scripts" in the inherited templates as follows:
{% 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 %}
Here's an example of setting up a js_module.js with dependencies:
(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

The essence of requireJS is modularization . IF you are loading any scripts , you should put path configs into the rquireJS config section. However if you are want conditional use /loading of files . Then you have to wrap your code around define module . somewhat like this
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;
}
Your app/jquery.app should be your starting point of your application.
You have to write this into main.js file and call it like this
<script data-main="/Scripts/main" src="/Scripts/libs/require/require.js" type="text/javascript"></script>
and your jquery.app which is your starting point should look like this
define(['jquery','my/base/module','my/vehicle/module']],
//plugins have been loaded.
base.initialize();
vehicle.initialize();
});
Note that in define module I havent defined anything to be loaded for jquery ui and bootstrap . The reason is since jquery ui loads of its own and it uses jquery syntax . And bootstrap file actually depends on jquery . So use the shim config to load bootstrap.min.js. Basically Your config and starting point should define the paths + starting point . So thats how make it .