javascript - RequireJS 定义回调返回错误的模块依赖项

Question

我在使用 RequireJS 时遇到了一个非常奇怪且令人沮丧的问题。当我调用具有依赖项列表的模块的 require 时，回调中可用的所有依赖项都会引用单个模块。这可能更容易用代码解释:

包括 require.js 脚本(没有 data-main 属性)

<script type="text/javascript" src="/js/common/require.min.js" ></script>

下面我包含了需要我的 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;
});

搜索栏.js

define(function(){
  this.init = function(){
    console.log('Now in the searchbar init')
  }
  return this;
});

问题在于 home_page.js 模块 home 和 searchbar 引用了相同的内容。奇怪的是，现在我已经简化了这个例子，它选择哪一个似乎是相当随机的。大多数时候它是搜索栏，但每隔几次刷新它就会成为主页。

有人有想法吗？这是非常明显的事情吗？

编辑:简化的示例并提供所有模块源。

Answer 1

您正在两个模块中分配给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'); 
        }
    };
});