按照Require.js的依賴關係順序加載JavaScript

我正在潛入Require.js以使用this link和this link作爲指導來構建Google地圖應用程序。 我的目標是構建一個模塊化應用程序，首先加載「基本」功能，然後「插入」客戶機特定功能-而不復制代碼。因此，每個項目都將使用「基礎」JS，但特定於客戶端的JS在每個項目中都會有所不同。以下是我的加載依賴關係列表。這是我所需要的東西加載，與以前的項目列表中的需要來移動到下一個之前完全加載順序：按照Require.js的依賴關係順序加載JavaScript

加載jQuery和谷歌地圖API（我得到這個工作）
加載JavaScript以使用基本應用程序功能在頁面上初始化我的地圖
加載其他/客戶端特定的JavaScript。

我可以得到1和2使用這個工作得很好：

main.js：

require.config({ 
    paths:{ 
     jquery: "jquery-1.7.1.min", 
     jqueryui: "jquery-ui-1.8.22.custom.min", 
     async: "async", 
     requiremap: "requiremap" 
    } 
}); 

require(
    [ "jquery", "jqueryui", "requiremap" ], 
    function($, jqueryui, requiremap) { 

    } 
);

requiremap.js：

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false" ], 
    function() { 
     require(['js/basemapfunctionality.js'], function() { 

     }); 
    } 
);

但現在我需要等到＃2完全加載加載前＃3。這是否可能與Require.js，如果是這樣，如何？（如果沒有，是否有其他框架可以做到這一點）我試圖添加另一個嵌套的require方法來加載附加功能（如下圖所示），但它的行爲像＃2尚未加載。

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false" ], 
    function() { 
     require(['js/basemapfunctionality.js'], function() { 
      require(['js/additionalfunctionality.js'], function() { 
       // now everything should be loaded, but it ain't 
      }); 
     }); 
    } 
);

來源

2012-08-22 Gady

得到這個工作。剛剛必須將Google Maps API，基本功能和其他功能加載到不同的模塊中，並在main.js中聲明每個模塊。

main。JS

require.config({ 
    paths:{ 
     jquery: "jquery-1.7.1.min", 
     jqueryui: "jquery-ui-1.8.22.custom.min", 
     async: "async", 
     requiremap: "requiremap", 
     basemapfunctionality: "basemapfunctionality", 
     additionalfunctionality: "additionalfunctionality" 
    } 
}); 

require(
    [ "jquery", "jqueryui", "requiremap", "basemapfunctionality", "additionalfunctionality" ], 
    function($, jqueryui, requiremap, basemapfunctionality, additionalfunctionality) { 

    } 
);

requiremap.js

define([ "async!https://maps.google.com/maps/api/js?sensor=false" ], function() {});

basemapfunctionality.js

define(['requiremap'], function(requiremap) { 
    // basemap functionality here 
}

additionalfunctionality.js

define(['requiremap', 'basemapfunctionality'], function(requiremap, basemapfunctionality) { 
    // additional functionality here 
}

來源

2012-08-23 01:19:59 Gady

你應該將自己的答案標記爲已接受（給它打勾）！很高興聽到你明白了。 –

在這裏分享解決方案的代碼示例也不會有什麼壞處。 –

增加解決方案的代碼示例。 – Gady

我沒有太多成RequireJS，但this issue和評論暗示的方式來解決你的問題。從鏈路

相關報價：

這是由於$.extend相互作用和模塊的執行順序。

在構建的文件中，'other/config'模塊在內部調用 require(['other/controller']之前被評估，因爲$.extend僅混合屬性，所以會導致該問題。您可以通過使用Object.create()類型的方法，在那裏你創建一個新的對象，其原型是BaseConfig避免它，這樣，以後，您添加到BaseConfig任何屬性會自動顯示新對象。

來源

2012-08-22 16:50:28

請參閱Asynchronously Loading the API。有一個回調參數，你可以指出一個回調函數，當API被完全加載時將被調用。

來源

2012-08-22 16:57:07 Marcelo

正如我在我的問題中所述，我可以加載Maps API，並且可以在Maps API之後加載我的「基本」功能，而不會出現任何問題。問題是，我需要等到基本功能JS完全加載後再加載另一個JS模塊。 – Gady

如果你正在使用回調函數，在回調函數中，你可以先執行loadBase（）然後執行loadClientStuff（） – Marcelo

這不是我在上一個代碼示例中所做的基本功能嗎？ – Gady

-1

您是否嘗試使用Order.js插件？

來源

2012-10-26 10:39:44 thangcao

我以爲是[用shim替換]（http://stackoverflow.com/questions/10841522/requirejs-plugin-order-js）。 – Gady

按照Require.js的依賴關係順序加載JavaScript

回答

相關問題