無法使用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不正確。

• 無需在模塊之外定義變量。 事情應該從模塊返回，而不是在模塊之外修改。
• 使用define聽起來，定義一個有用的代碼塊。 如果它有幫助，可以將它們視為您的類
• 使用require來獲取模塊並讓它們進行交互。

我重寫了你的例子來演示

main.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模塊，並且您依賴於它們的返回值，那么您可能還需要使用填充程序配置選項 。

我鼓勵您重新閱讀有關模塊定義的API文檔 。

Answer 2

雖然在使用AMD時與全球范圍的互動是合理的，但它仍然可行。

我需要../Ndn/Widget模塊並錯誤地預期它的嵌套require（）邏輯（如下所示） 同步執行：

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

然而，上述邏輯僅異步執行 （如“異步模塊定義”所示）。 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');
    });
});