Question

我正在将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和slider 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。我总是使用“define”并且总是异步调用模块，但是不必像这样调用RequireJS函数内联。有关正确方法的任何想法吗？

Answer 1

这里重要的是在请求任何模块之前设置配置选项。正如您所正确识别的那样，有竞争条件意味着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>

另见How does RequireJS work with multiple pages and partial views?

Answer 2

似乎正在发生的事情是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,
....

加载requireJS模块内联HTML正文？

2 个答案: