23

我是 RequireJS 的新手，我坚持加载顺序。

我有一个全局项目配置，需要在 js/app/* 中的模块之前加载它。

这是我的结构：

index.html
config.js
js/
    require.js
    app/
        login.js
    lib/
        bootstrap-2.0.4.min.js

这是 config.js 文件：

var Project = {
    'server': {
        'host': '127.0.0.1',
        'port': 8080
    },
    'history': 10,      // Number of query kept in the local storage history
    'lang': 'en',       // For future use
};

这是我的requirejs文件（app.js）：

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        bootstrap: '../lib/bootstrap-2.0.4.min',
        app: '../app',
    },
    shim: {
        'app': {
            deps: ['../../config'],
            exports: function (a) {
                console.log ('loaded!');
                console.log (a);
            }
        } // Skual Config
    },
});

var modules = [];
modules.push('jquery');
modules.push('bootstrap');
modules.push('app/login');


// Start the main app logic.
requirejs(modules, function ($) {});

但有时，当我加载页面时，我有一个“项目”未定义，因为 login.js 已在 config.js 之前加载。

无论如何，我如何强制首先加载 config.js？

注意：我看到 order.js 是 RequireJS 的插件，但它显然从 v2 开始就不受支持，由shim.

4

3 回答 3

26

今天遇到了一个类似的问题——我们有引导数据，我们希望确保在其他任何东西之前加载，并且在评估任何其他模块之前设置暴露该数据的模块。

我发现强制加载顺序的最简单解决方案是在继续应用程序初始化之前简单地要求加载模块：

require(["bootstrapped-data-setup", "some-other-init-code"], function(){
    require(["main-app-initializer"]);
});
于 2013-05-03T15:42:09.993 回答
21

有一种可能的解决方案可以为要加载的模块构建队列。在这种情况下，所有模块将按确切顺序一个接一个地加载：

var requireQueue = function(modules, callback) {
  function load(queue, results) {
    if (queue.length) {
      require([queue.shift()], function(result) {
        results.push(result);
        load(queue, results);
      });
    } else {
      callback.apply(null, results);
    }
  }

  load(modules, []);
};

requireQueue([
  'app',
  'apps/home/initialize',
  'apps/entities/initialize',
  'apps/cti/initialize'
], function(App) {
  App.start();
});
于 2013-09-27T08:57:15.527 回答
15

如果将 js 文件定义为 AMD 模块，则不必担心加载顺序。（或者，如果您不能修改config.jsandlogin.js来调用，您可以使用 shim 配置define）。

config.js 应该看起来像这样：

define({project: {
    'server': {
        'host': '127.0.0.1',
        'port': 8080
    },
    'history': 10,      // Number of query kept in the local storage history
    'lang': 'en',       // For future use
}});

登录.js：

define(['jquery', '../../config'], function($, config) {

    // here, config will be loaded
    console.log(config.project)

});

define()同样，仅当无法在模块内部调用时才应使用 shim 配置。

于 2012-08-28T17:23:50.020 回答