I'm trying to use requireJS but I want to build a hierarchy of dependencies: main
requires obr.plat
and obr.plat
requires obr
(for example).
I have this hierarchy of files:
- index.html
-> js
- main.js
-> lib
- jquery.js
- require.js
-> obr [my own 'libraries']
- obr.js
- obr.plat.js
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>Plat</title>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script data-main="js/main" src="js/lib/require.js"></script>
</head>
<body>
</body>
</html>
main.js
$(document).ready(function() {
require(["obr/obr.plat"], function() {
obr.hola();
var myPlat = obr.plat();
myPlat.test();
});
});
obr.js
var obr = {};
obr.hola = function() {
alert('Hola OBR');
};
obr.plat.js
require(["obr.js"],function() {
obr.plat = function(params) {
var that = {};
var test = function test() {
alert('Hola Plat!');
}
that.test = test;
return that;
}
});
If I require both obr
and obr.plat
files in the main
all works, but if I use this nested style I receive the next error:
Uncaught ReferenceError: obr is not defined main.js:3
Do you know what I'm doing wrong? Thank you in advance.
I'm trying to use requireJS but I want to build a hierarchy of dependencies: main
requires obr.plat
and obr.plat
requires obr
(for example).
I have this hierarchy of files:
- index.html
-> js
- main.js
-> lib
- jquery.js
- require.js
-> obr [my own 'libraries']
- obr.js
- obr.plat.js
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>Plat</title>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script data-main="js/main" src="js/lib/require.js"></script>
</head>
<body>
</body>
</html>
main.js
$(document).ready(function() {
require(["obr/obr.plat"], function() {
obr.hola();
var myPlat = obr.plat();
myPlat.test();
});
});
obr.js
var obr = {};
obr.hola = function() {
alert('Hola OBR');
};
obr.plat.js
require(["obr.js"],function() {
obr.plat = function(params) {
var that = {};
var test = function test() {
alert('Hola Plat!');
}
that.test = test;
return that;
}
});
If I require both obr
and obr.plat
files in the main
all works, but if I use this nested style I receive the next error:
Uncaught ReferenceError: obr is not defined main.js:3
Do you know what I'm doing wrong? Thank you in advance.
Share Improve this question asked May 23, 2012 at 11:53 dgnindgnin 1,6072 gold badges22 silver badges35 bronze badges1 Answer
Reset to default 8Alright, you've done several things wrong.
You need to specify as an argument the dependency you're injecting. For example,
require(["obr/obr.plat"], function() {
won't do much unless you specify how the required module can be called. You should need this:require(["obr/obr.plat"], function( obr ) {
This way, you know in which variable your required object is.
The
obr.js
variables are in the global scope. You need to wrap them in arequire
ordefine
function call. The following would work:define(function() { var obr = {}; obr.hola = function() {}; return obr; });
You may have noticed some things that are wrong with your last file.
If you want your module to be imported somewhere, you have to define it. So you have to use the
define
function, not therequire
one. And thedefine
function must return an object. Here is a fixedobr.plat.js
file:// If you don't use "define" for the obr.js file too, this won't work define(['obr'], function( obr ) { obr.plat = function() {}; // Don't forget to return the obr object, or the require of // the main file won't return anything return obr; });
This way, things are done the correct way. Or at least, the way require.js wants you to do stuff.
I hope this reveals you how require.js can be effectively used to easily separate your code in modules :)