Share your knowledge: Using requirejs as javascript module loader

Wednesday, April 9, 2014

	<!DOCTYPE html>
	<html>
	<head>
	<title>Demo html5 page</title>
	<!-- data-main attribute tells require.js to load
	scripts/app.js after require.js loads. -->
	<script data-main="scripts/app" src="scripts/require.js"></script>
	</head>
	<body>
	<h1>RequireJS demo</h1>
	<div><button id="sayHi">Try me!!</button></div>
	<div>languages</div>
	<ul id="languages"> </ul>
	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub

	/**
	* data.js
	**/
	define({
	"programminglanguages": ["Java", "Python","Scala", "Javascript"]
	});

view raw gistfile1.js hosted with ❤ by GitHub

	/**
	* behaviour.js
	**/
	define({
	"sayHi": function() { alert("Hi there :)"); }
	});

view raw gistfile1.js hosted with ❤ by GitHub

	/**
	* app.js
	*
	* This demo assumes my project looks like
	* projectfolder
	* - requirejsdemo.html
	* - scripts
	* - app.js
	* - behaviour.js
	* - data.js
	**/

	requirejs(["./behaviour","./data"], function(behaviour, data) {
	//for this little demo we will use the plain good ol' DOM API
	var languagesEle = document.getElementById("languages");
	data.programminglanguages.forEach(
	function(language){
	//first we create a <li> tag
	var li = document.createElement("li");
	//next we insert the language into the <li> tag
	li.appendChild(document.createTextNode(language));
	//we still need to attach the <li> to the existing <ul id="languages">
	languagesEle.appendChild(li);
	}
	);

	//we will also add behaviour to the <button id="sayHi">
	document.getElementById("sayHi").onclick=behaviour.sayHi;
	});

view raw gistfile1.js hosted with ❤ by GitHub

Share your knowledge