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

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 ...
}

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

有人可以告诉我我做错了什么吗？预先感谢您!

Answer 1

您似乎错误地使用了 require 和 define 的概念。

• 无需在模块外部定义变量。事情应该是从模块返回，不在模块外部修改。
• 使用定义作为听起来，是为了定义一段有特定用途的代码。考虑到如果有帮助的话，将其作为您的类(class)
• 使用 require 获取您的模块并让他们互动。

我重写了你的示例来演示

ma​​in.js

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

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

});

Ndn/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也是如此。