RequireJS：在加載庫模塊後自動加載配置腳本

我正在重構我們項目的JavaScript，以使用RequireJS按需加載所需的模塊，而不是向HTML模板添加一堆腳本標記。RequireJS：在加載庫模塊後自動加載配置腳本

我們使用jQuery等幾個庫，用於jQuery的DataTables插件等，其中一些庫在加載後需要一些初始化。 I. e。 DataTables的默認設置必須在lib被加載之後以及第一次使用之前設置。

目前，我在主要腳本中執行此操作，該腳本正在RequireJS後加載。這主要模塊require s表示需要初始化，像數據表的所有庫，並設置默認設置

require(["jquery", "datatables"], function($) { 
    // Set datatables default values 
    $.extend(
     $.fn.dataTable.defaults, 
     { 
      jQueryUI: true, 
      lengthMenu: [5, 10, 25, 50], 
      paginationType: "full_numbers", 
      pageLength: 5 
     } 
    ); 
});

這種做法是出於兩個原因很煩人：

我寧願有一個配置文件每個庫，所以我不必在一個潛在巨大的主要腳本中改變設置
主腳本總是加載每個庫來初始化其設置，即使在當前頁面上可能不會使用某些庫文件

爲了改善這一點，我正在尋找某種「加載後」依賴性或回調，它會在加載庫時自動加載或執行。

我想過對這些庫使用shim配置的init回調，但由於我的庫不會污染全局名稱空間，只有依賴項被傳遞給init函數，所以我沒有機會訪問加載的init內的模塊（據我所知）。

然後我想着修改RequireJS的地圖配置來映射我。即DataTables轉換爲包裝腳本，其中require是實際的DataTables庫並在之後設置配置選項。

有沒有一種更直接的方式來加載配置？

來源

2014-10-22 Subsurf

是的，不能用這個墊片。如果你的模塊是一個真正的模塊（調用'define'來定義它自己），那麼你就不能使用它。 'map'是你最好的選擇。這是我想到的第一件事。 – Louis 2014-10-22 11:07:10

這就是我在閱讀手冊後發現的，但我仍然希望有些RequireJS專家能夠知道更清晰的解決方案。 – Subsurf 2014-10-22 11:14:48

對於一個通用的解決方案，使用'map'是我能想到的最清晰和最安全的解決方案。我也可以考慮一下解決方案，這個解決方案將涉及到將你正在使用的庫「構建」到包含配置的新文件中，但這很糟糕（並且可能導致其他問題），並且（在我看來）它比使用map更隱晦。 – Louis 2014-10-22 11:20:06

只是想讓你知道我的最終解決方案。我放棄了使用包裝腳本和地圖配置。

的RequireJs配置的相關部分：

// Configure the RequireJS library 
var require = { 
    baseUrl: "js/modules", 
    paths: { 
     "jquery":  "../lib/jquery/dist/jquery", 
     "datatables": "../lib/DataTables/media/js/jquery.dataTables", 
    }, 
    map: { 
     // Map the 'datatables' library to its wrapper module 
     // for every other module that 'require's this library 
     '*': { 
      'datatables': 'application/datatables.wrapper' 
     }, 
     // only the wrapper script is supposed to get the actual 
     // 'datatables' library when 'require'ing 'datatables' 
     'application/datatables.wrapper': { 
      'datatables': 'datatables' 
     }, 
    } 
};

我的包裝腳本如下所示（文件「JS /模塊/應用/ datatables.wrapper.js」）

define(
    // require jQuery, DataTables, and the DataTables configuration object 
    // which resides in another file 
    ["jquery", "datatables", "application/config/datatables.config"], 
    function($, dataTable, config) { 
     // Set datatables default values 
     $.extend(
      dataTable.defaults, 
      config 
     ); 

     return dataTable; 
    } 
);

由於奇如地圖

'datatables': 'datatables'

可能看起來，它的工作就像一個魅力！

來源

2014-11-14 17:12:39 Subsurf

RequireJS：在加載庫模塊後自動加載配置腳本

回答

相關問題