13

我正在将 RequireJS 集成到 CMS 中，因此我将其放在页面模板的底部：

<html>
<body>
  {Placeholder1}
  <script src="scripts/require.js" data-main="scripts/main"></script>
  {Placeholder2}
</body>
</html>

然后在每个页面上，我想创建一个利用 RequireJS 的函数。所以我试着把它放在页面底部：

<html>
<body>
    <h1>Home</h1>
    <div class="slider">Slider content</div>

    <script src="scripts/require.js" data-main="scripts/main"></script>

    <script type="text/javascript">
      require([
        'jquery',
        'utils',
        'slider'
      ], function ($, utils, slider) {
        slider.start();
      });
    </script>
</body>
</html>

但我在 jquery、utils 和滑块 js 文件上得到 404。似乎它没有读取我拥有的 main.js 配置：

require.config({
    paths: {
        jquery: 'libs/jquery-1.8.1.min',
        utils: 'libs/utils',
        slider: 'libs/jquery.slider.min'
    },
    shim: {
        slider: ['jquery']
    }
});

require([ 'utils' ], function (utils) {
    utils.init();
});

我尝试在页眉中加载 RequireJS 和 main，但结果不一致。有时 jquery、utils 和 slider 会及时加载，有时则不会。就好像页面底部的内联“require”不知道页面上的主要 RequireJS 或依赖规则，但是我的断点在 main.js 中命中，所以我知道它正在被调用。是因为 main.js 是异步加载的，但是页面底部的内联“require”块是在页面渲染时加载的？我该如何解决这个问题？

我之前成功使用过 RequireJS，但没有使用 CMS。我总是使用“定义”并且总是异步调用模块，但从来不需要像这样内联调用 RequireJS 函数。关于正确方法的任何想法？

4

2 回答 2

12

这里重要的是在请求任何模块之前设置配置选项。正如您正确识别的那样，存在竞争条件，这意味着您的配置选项main.js没有及时加载。require.js最简单的方法是在加载脚本之前将配置选项内联。

<script>
var require = {
    baseUrl: <?= $someVar ?>,
    paths: {
        // etc
    }
}
</script>
<script src="scripts/require.js" data-main="scripts/main"></script>

在页面下方：

<script>
    require([
        'jquery',
        'utils',
        'slider'
      ], function ($, utils, slider) {
        slider.start();
      });
</script>

另请参阅RequireJS 如何处理多个页面和部分视图？

于 2012-10-04T08:03:24.727 回答
6

似乎正在发生的事情是 main.js 正在异步加载，而内联 require 被立即调用。这就是结果不一致的原因。解决方案是不使用 data-main 属性并通过 require.js 脚本标签下的脚本标签调用 main.js 文件。

您仍然可以通过在其中执行以下操作从加载的 main.js 文件中确定 baseUrl：

//DETERMINE BASE URL FROM CURRENT SCRIPT PATH
var scripts = document.getElementsByTagName("script");
var src = scripts[scripts.length-1].src;
var baseUrl = src.substring(src.indexOf(document.location.pathname), src.lastIndexOf('/'));

//CONFIGURE LIBRARIES AND DEPENDENCIES VIA REQUIREJS
require.config({
    baseUrl: baseUrl,
....
于 2012-10-02T21:03:15.417 回答