无法使用requirejs为我的代码加载所需的js文件

时间:2013-03-27 17:55:34

标签: javascript requirejs

在我的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 ...
}

在我的Ndn / 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. 

有人可以告诉我我做错了什么吗?提前谢谢!

2 个答案:

答案 0 :(得分:2)

您似乎错误地使用了requiredefine的概念。

  • 无需在模块之外定义变量。应该是的 从模块返回,不在其外修改。
  • 使用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

答案 1 :(得分:0)

虽然使用AMD时与全球范围的互动是相当不赞成的,但它仍然可行。

我需要../Ndn/Widget模块并错误地预期其嵌套的require()逻辑(如下所示)将同步执行

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

上述逻辑只是异步执行(如&#34;异步模块定义&#34;建议)。 main模块中的以下代码......

    Ndn_Widget.fetchDeliverySettings();

正在执行而不知道嵌套的require()逻辑是否已在../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 ...
}

更新了Ndn / 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');
    });
});