我正在尝试使用requireJS,但我想构建一个依赖关系层次结构:main
需要obr.platcom
而obr.platcom
需要obr
(例如)。
我有这种文件层次结构:
- index.html
-> js
- main.js
-> lib
- jquery.js
- require.js
-> obr [my own 'libraries']
- obr.js
- obr.platcom.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>Platcom</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.platcom"], function() {
obr.hola();
var myPlatcom = obr.platcom();
myPlatcom.test();
});
});
obr.js
var obr = {};
obr.hola = function() {
alert('Hola OBR');
};
obr.platcom.js
require(["obr.js"],function() {
obr.platcom = function(params) {
var that = {};
var test = function test() {
alert('Hola Platcom!');
}
that.test = test;
return that;
}
});
如果我在obr
所有作品中同时需要obr.platcom
和main
个文件,但如果我使用此嵌套样式,则会收到下一个错误:
Uncaught ReferenceError: obr is not defined main.js:3
你知道我做错了什么吗? 提前谢谢。
答案 0 :(得分:7)
好吧,你做错了几件事。
您需要将注入的依赖项指定为参数。例如,require(["obr/obr.platcom"], function() {
除非您指定如何可以调用所需模块,否则require(["obr/obr.platcom"], function( obr ) {
不会做太多。你应该需要这个:
obr.js
这样,您就知道所需对象在哪个变量中。
require
变量位于全局范围内。您需要将它们包含在define
或define(function() {
var obr = {};
obr.hola = function() {};
return obr;
});
函数调用中。以下方法可行:
define
您可能已经注意到上一个文件有些问题。
如果您希望在某处导入模块,则必须定义它。因此,您必须使用require
函数,而不是define
函数。并且obr.platcom.js
函数必须返回一个对象。这是一个固定的// If you don't use "define" for the obr.js file too, this won't work
define(['obr'], function( obr ) {
obr.platcom = function() {};
// Don't forget to return the obr object, or the require of
// the main file won't return anything
return obr;
});
文件:
{{1}}
这样,事情就是以正确的方式完成的。或者至少,require.js希望你做的事情。
我希望这能告诉您如何有效地使用require.js轻松分离模块中的代码:)