无法加载需要的js文件使用requirejs

Question

里面我main.js文件我的代码：

define(['require'], function(require) { 
    require([ 
     '../libs/requirejs/plugins/domReady', 
     '../core', 
     '../ndn.2', 
     '../Ndn/Widget' 
    ], 
    function(domReady) { 
     // require('../Ndn/Widget'); // I tried this too, but it doesn't solve my problem 

     console.log('Should have required everything...'); 

     domReady(function() { 
      console.log('About to call init()'); 

      init(); 
     }); 
    } 
)}); 

function init() { 
    // Begin fetching this widget's delivery settings 
    Ndn_Widget.fetchDeliverySettings(); 

    // ... Other code here ... 
} 

在我的N dn/Widget.js文件，我有以下几点：

var Ndn_Widget; 

define(['require'], function(require) { 
    require(['../ndn.2', './ServerInterface'], function() { 
     /** 
     * An associative array for the different delivery settings 
     * @var Object 
     */ 
     var deliverySettings = {}; 

     Ndn_Widget = { 
      fetchDeliverySettings: function() { 
       // ... code here 
       console.log('Finished defining Ndn_Widget.'); 
      } 
     }; 
    }); 
}); 

我我希望我传递给main.js中的define（）函数的匿名函数只会在加载“../Ndn/Widget.js”文件后执行，但事实并非总是如此。

这是我的console.log语句的示例：

Should have required everything... 
About to call init() 
Uncaught TypeError: Cannot call method 'fetchDeliverySettings' of undefined 
Just finished defining Ndn_Widget. 

谁能告诉我什么，我做错了什么？先谢谢你！

Answer 1

在使用AMD时，与全局范围的交互是合理的，但它仍然是可行的。

我需要../Ndn/Widget模块，并错误地预期其嵌套需要（）逻辑（如下所示）将被执行同步：

require(['../ndn.2', './ServerInterface'], function() { 

上述逻辑但是只执行异步（如“异步模块定义“建议）。在main模块内的下面的代码...

Ndn_Widget.fetchDeliverySettings(); 

正在而不如果嵌套需要（）逻辑已经在../Ndn/Widget模块内尚未执行知道执行。

一个解决方案来解决，这将是引入可以由两个模块被称为一个新的模块，例如说，一个app模块，触发一个事件，让其他模块知道全球Ndn_Widget 变量是现在定义。

更新main.js文件：

define(['require', 'app'], function(require, app) { 
    require([ 
     '../libs/requirejs/plugins/domReady', 
     '../core', 
     '../ndn.2', 
     '../Ndn/Widget' 
    ], 
    function(domReady) { 
     console.log('Should have required everything...'); 

     app.on('ready', function() { // domReady(function() { 
      console.log('About to call init()'); 

      init(); 
     }); 
    } 
)}); 

function init() { 
    // Begin fetching this widget's delivery settings 
    Ndn_Widget.fetchDeliverySettings(); 

    // ... Other code here ... 
} 

更新的N dn/Widget.js文件：

var Ndn_Widget; 

define(['app', 'require'], function(require, app) { 
    require(['../ndn.2', './ServerInterface'], function() { 
     /** 
     * An associative array for the different delivery settings 
     * @var Object 
     */ 
     var deliverySettings = {}; 

     Ndn_Widget = { 
      fetchDeliverySettings: function() { 
       // ... code here 
       console.log('Finished defining Ndn_Widget.'); 
      } 
     }; 

     app.trigger('ready'); 
    }); 
}); 

Answer 2

看起来你错误地使用了require和define的概念。

• 无需在模块外定义变量。从模块返回的东西应该是 ，而不是在其外部修改。
• 使用define作为 听起来，它定义了一段代码来达到目的。把 想象成你的课程，如果有帮助的话
• 使用require来抓取你的模块 并让它们互动。

我重新写你的例子来说明

main.js

require([ 
    '../libs/requirejs/plugins/domReady', 
    '../Ndn/Widget', 
    '../core' 
], function(domReady, Ndn_Widget) { 

    domReady(function() { 
     Ndn_Widget.fetchDeliverySettings(); 
    }); 

}); 

的N dn/Widget.js

define(function(require) { 
    require('../ndn.2'); 
    require('./ServerInterface'); 

    var deliverySettings = {}; 

    return { 
     fetchDeliverySettings: function() { 

     } 
    }; 
}); 

如果您的其他依赖不是AMD模块，你依赖于他们的回报价值那么你可能也需要使用the shim configuration option。

我鼓励你重读the API docs on module definitions。