無法加載需要的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。