文章/答案/技术大牛

发布

社区首页 >问答首页 >加载requireJS模块内联HTML正文？

问加载requireJS模块内联HTML正文？
EN

Stack Overflow用户

提问于 2012-10-03 03:50:09

回答 2查看 16.5K关注 0票数 13

我将RequireJS集成到一个内容管理系统中，所以我把这个放在了页面模板的底部：

<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函数。有什么正确的方法吗？

asynchronous

javascript

requirejs

js-amd

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-10-04 16:03:25

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

票数 12

Stack Overflow用户

发布于 2012-10-03 05:03:15

似乎正在发生的事情是，main.js是异步加载的，而内联请求是立即调用的。这就是为什么会有不一致的结果。解决方案是不使用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,
....

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12697238

复制

相似问题

问加载requireJS模块内联HTML正文？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载requireJS模块内联HTML正文？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载requireJS模块内联HTML正文？
EN