我遇到了 RequireJS 的问题。本质上,我无法从另一个文件访问另一个文件中定义的函数。
我需要这样做,因为我想导出给定的函数子集,例如
define('submodule', [], function() {
let myFunction1 = function(){ return "Hello"; }
let myFunction2 = function(){ return " From"; }
let myFunction3 = function(){ return " Submodule!"; }
return {
myFunction1 : myFunction1,
myFunction2 : myFunction2,
myFunction3 : myFunction3,
};
});
并从另一个文件访问它们
define('main', ['config', 'sub1', 'sub2', 'submodule'],
function(config, sub1, sub2, submodule) {
//Config
alert(config.conf);
//Submodule
let callSubmodule = function() {
alert(submodule.myFunction1() +
submodule.myFunction2() +
submodule.myFunction3());
}
//sub1
let callSub1 = function() {
alert(sub1.myFunction1());
}
//sub2
let callSub2 = function() {
alert(sub2.myFunction1());
}
});
The fact is that usually I'm able to do this with sub1 and sub2, but, with submodule, I simply can't. I think it's somehow caused by the dependencies in require.config.js.
我的require.config.js:
require(['common'], function () { //contains vendors
require(['config'], function () { //contains a js config file
require(['main'], function () { //main file
require(['sub1', 'sub2'], function () { //some subfiles
require(['submodule']);
});
});
});
});
对于 submodule.myFunction1() 和我得到的其他两个相关函数:
Uncaught (in promise) TypeError: Cannot read property 'myFunction1' of undefined
这很奇怪,因为我可以在其他情况下这样做,但我真的不明白为什么会这样。例如,我可以从主文件和其他文件调用 sub1 和 sub2 函数,但不能调用 submodule。
Index.html
//Taken from Plunker
. . .
<script data-main="common" data-require="require.js@2.1.20" data-semver="2.1.20" src="http://requirejs.org/docs/release/2.1.20/minified/require.js"></script>
<script src="require.config.js"></script>
. . .
<button onclick = "callSubmodule()">Call Submodule</button>
<button onclick = "callSub1()">Call Sub1</button>
<button onclick = "callSub2()">Call Sub2</button>
common.js 包含 vendor ,这里只是一个例子
requirejs.config({
baseUrl : "",
paths : {
"jquery" : "http://code.jquery.com/jquery-latest.min.js"
}
});
sub1.js
define('sub1', ['submodule'], function(submodule) {
let myFunction1 = function(){ return "called sub1"; }
return {
myFunction1 : myFunction1
};
});
sub2.js
define('sub2', ['submodule'], function(submodule) {
let myFunction1 = function(){ return "called sub2"; }
return {
myFunction1 : myFunction1
};
});
我设置了一个 Plunker with @SergGr help试图复制应用程序的结构,但所有模块在单击时都未定义。在实际应用中,这不会发生。
我该如何解决这个问题?
最佳答案
这是您的代码:
define('main', ['submodule'], function(submod) {
console.log(submodule.myFunction());
});
参数列表中有submod
。但是您随后尝试访问 submodule
。请注意,您直接从模块返回函数 (return myFunction
),因此您的模块具有函数 myFunction
的值,因此您应该调用该模块。代码应该是:
define('main', ['submodule'], function(submod) {
console.log(submod());
});
关于javascript - RequireJS - 无法访问外部模块功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42421302/