requirejs starter example

requirejs is an asynchronous module definition(AMD) framework for managing dependencies between javascript modules. Instead of loading the javascript files needed on the html page one by one and manage the dependencies by arranging the order of the javascript files, requirejs can just load one config javascript file on the html page, and manage the rest of javascript loading and dependencies within the requirejs framework. It makes the code more readable and manageable. When the code is ready for deployment, requirejs optimizer should be used to make it run faster. It basically minifies the javascript files.

web app root directory structure

├── index.html
└── js
    ├── app
    │   ├── helloworld.js
    │   ├── main.js
    │   └── template.js
    ├── app.js
    └── lib
        ├── handlebars.js
        ├── require.js
        └── underscore.js

index.html

<!DOCTYPE html>
<html>
    <head>
        <script data-main="js/app" src="js/lib/require.js"></script>
    </head>
    <body>
    	<p id="my-msg"></p>
        <p id="underscroeTemplate"></p>
        <p id="handlebarsTemplate"></p>
    </body>
</html>

js/app.js

// js is the root dir for all js files
// thrid party libaries are stored in lib folder
// custom js modules are stored in app folder
// shim handlebars because it doesn't support amd yet
requirejs.config({
    baseUrl: 'js',
    paths: {
        app: 'app',
        lib: 'lib',
        jquery: 'http://code.jquery.com/jquery-1.11.2.min',
        underscore: 'lib/underscore',
        handlebars: 'lib/handlebars'
    },
    shim: {
    	handlebars: {
    		exports: 'handlebars'
    	}
    }
});

// Start loading the main app file.
requirejs(['app/main']);

js/app/main.js

define(function (require) {
    var hello = require('app/helloworld');
    hello.narrator();
    hello.greeting();
    hello.msg();
    
    require(['app/template'], function(template) {
        template.underscoreTemplate("underscore");
        template.handlebarsTemplate({name:"Handlebars"});
	});
});

js/app/helloworld.js

define(['jquery'], function () {
	var hello = {
		narrator: function() {
			console.log('A new requirejs user says: ');
			$('#my-msg').append('A new requirejs user says:');
		}
	};

	hello.greeting = function () {
            console.log('Hello World!');
			$('#my-msg').append('Hello World!');
    };

    (function () {
    	this.msg = function() {
    		console.log('This is my first practice of using requirejs!');
			$('#my-msg').append('This is my first practice of using requirejs!');
    	};
    }).apply(hello);

    return hello;
});

js/app/template.js

define(['jquery', 'underscore', 'handlebars'], function($, _, Handlebars) {

	  var greeting = function(n) {
	    var temp = _.template("Hello <%= name %>");
	    $("#underscroeTemplate").html(temp({name: n}));
	  };

	  var greeting2 = function(n) {
	  	var temp = Handlebars.compile('Hello {{name}}');
	  	 $("#handlebarsTemplate").html(temp(n));
	  }
	  return {
	    underscoreTemplate: greeting,
	    handlebarsTemplate: greeting2
	  };
});

demo

Search within Codexpedia

Custom Search

Search the entire web

Custom Search