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.jsvariables are in the global scope. You need to wrap them in arequireordefinefunction 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
definefunction, not therequireone. And thedefinefunction must return an object. Here is a fixedobr.plat.jsfile:// 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 :)