requireJS模塊加載

Question

我需要一些幫助，只加載模塊的概念，需要使用requireJS

這是我main.js

require(['jquery', 'path/somemodule'], 
function($, somemodule) { 
$(document).ready(function() { 
    somemodule.init() 
}) 

}) 

，並在somemodule.js當他們

define(['jquery', 'path/someothermodule'], function ($, someothermodule) { 
"use strict"; 
var somemodule; 

somemodule = { 
init: function() { 
    someothermodule.init() 
} 
} 
return somemodule; 
)} 

現在somemodule.js和someothermodule.js加載到所有頁面上。如何在需要時加載它？

Answer 1

當您需要使用標準define（）語法的module1的module2時，module1將不會加載/運行，直到module2完全加載完畢。這看起來是這樣的：

// inside module1 
define(['module2'], function(mod2) { 
    // we don't get here until AFTER module2 has already been loaded 
}); 

懶加載模塊2另一種看起來像這樣：

// inside module1 
define([], function() { 
    require(['module2'], function(mod2) { 
     // we don't get here until AFTER module2 has already been loaded 
    }); 
    // but we DO get here without having loaded module2 
}); 

現在你要小心有些程序，以確保你不會遇到與異步的任何問題。

在你的情況，你可以修改你的main.js文件

require(['jquery'], 
function($) { 
    // jquery is loaded, but somemodule has not 

    if(thisPageNeedsSomeModule) { 
     require(['path/somemodule'], 
     function(somemodule) { 
      // now somemodule has loaded 
      $(document).ready(function() { 
       somemodule.init() 
      }) 
     }); 
    } 
}) 

Answer 2

您的main.js文件將加載提供給它的任何文件路徑，只要應用程序的其他元素將它們指定爲依賴項。見我的例子main.js文件：

require.config({ 

    paths: { 
     'app': 'app', 
     'underscore':'bower_components/underscore/underscore-min', 
     'backbone':'bower_components/backbone/backbone-min', 
     'marionette':'bower_components/backbone.marionette/lib/backbone.marionette.min', 
     'jquery': 'bower_components/jquery/jquery.min', 
     'tpl':'bower_components/requirejs-tpl/tpl', 
     'bootstrap':'bower_components/bootstrap/dist/js/bootstrap.min', 
     'leaflet':'bower_components/leaflet/leaflet', 
     'leaflet.markercluster':'bower_components/leaflet/leaflet.markercluster', 
    }, 
    shim: { 
     'underscore': { 
      exports: '_' 
     }, 
     'leaflet': { 
      exports: 'L' 
     }, 
     'leaflet.markercluster': { 
      deps: ['leaflet'] 
     }, 
     'backbone': { 
      deps: ['underscore'] 
     }, 
     'marionette': { 
      deps: ['backbone'] 
     }, 
     'jquery': { 
      exports: '$' 
     }, 
     'bootstrap': { 
      deps: ['jquery'] 
     }, 
     'app': { 
      deps: ['jquery', 'leaflet','bootstrap', 'leaflet.markercluster', 'marionette', 'tpl'] 
     }, 
     'app.elem': { 
      deps:['app'] 
     }, 
     'app.api': { 
      deps:['app'] 
     } 
    } 
}) 

require(['app','app.api','app.elem'], function() { 
    App.start(); 
}) 

，就連最初的應用程序文件：

define(['router', 'collections/moments'], function(router, momentCollection) { 

    // Boot the app! 

    App = new Marionette.Application(); 

    App.LocResolve = false; // Have we resolved the user's location? 
    App.Locating = true; // Are we actively tracking the user's location? 

    App.FileReader = window.FileReader ? new FileReader : null; 

    App.Position = null; // Instant access to Lat & Lng of user. 

    App.MomentsRaw = null; // Keep cached copy of returned data for comparison. 

    App.Moments = new momentCollection; // Current collection of moments. 
    App.Markers = new L.MarkerClusterGroup(); // Create Marker Cluster Group 

    App.View = null; // Current view. 

    // Marionette Regions 

    App.addRegions({ 
     header: '#header', 
     map: '#map', 
     list: '#list', 
     modal: '#modal', 
    }); 

    return App 
}) 

我注意到，你是不是在傳遞一個配置對象 - 這是故意的嗎？如果您使用生成優化器R.js，它會自動爲您刪除未使用的供應商文件。

簡而言之，在require.js配置文件中設置供應商文件的路徑，然後在需要特定資產時通過define（）調用它們。這將確保只使用您需要的文件。希望這可以幫助！