我对RequireJS有一个非常奇怪和令人沮丧的问题。当我为具有依赖项列表的模块调用require时,回调中可用的所有依赖项都引用单个模块。这可能更容易用代码解释:
包括require.js脚本(没有data-main属性)
<script type="text/javascript" src="/js/common/require.min.js" ></script>
下面我包括require my main.js(在网站的所有页面中使用),在回调中需要我的页面特定的js。
<script type="text/javascript">
require(['/js/require/main.js'], function () {
require(['page/home_page']);
});
</script>
main.js
requirejs.config({
baseUrl: 'js/require'
});
requirejs(['base'],
function() {
var base = require('base');
base.init();
});
home_page.js
define(['home','searchbar'], function (home,searchbar){
console.log(home.init == searchbar.init); // This is always true !!!
home.init();
searchbar.init();
});
home.js
define(function(){
this.init = function(){
console.log('in home page');
}
return this;
});
searchbar.js
define(function(){
this.init = function(){
console.log('Now in the searchbar init')
}
return this;
});
问题在于home_page.js,两个模块主页和搜索栏引用相同的东西。奇怪的是,现在我已经简化了这个例子,它选择了哪一个似乎很随意。大多数时候它是搜索栏,但每次刷新它都会在家里。
有人有想法吗?这是非常明显的事情吗?
编辑:简化示例并提供所有模块源。
答案 0 :(得分:2)
您将在两个模块中分配this
。这不是一个好主意(借口双关语)。在这两种情况下,this
可能都是window
对象。您可以通过添加
window.init === searchbar.init
测试。
重写模块以返回唯一对象,如下所示:
define(function() {
return {
init: function() {
console.log('in home page');
}
};
});
和
define(function() {
return {
init: function() {
console.log('Now in the searchbar init');
}
};
});