javascript - 使用 RequireJS 多页面和页面模板

Question

我从 requireJS 开始，需要一些帮助来继续其实现。

我的网站是按照默认设置构建的:

    header.html (always the same, containing the requiredjs script tag) 
    $pageMain       (always variable - $pageAbout, $pageContact...) 
    footer.html (always the same) 

我需要从我的网站的不同页面加载特定的 js 文件，但我只有一个 header ，其中包含用于设置我所需文件的标签。

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

当我的页面是 $pageAbout 时，我需要加载 $pageAbout.js 而不是 $pageMain.js我仍然无法做到这一点。

检查https://github.com/requirejs/example-multipage#我理解它是如何工作的，但就我而言，我无法这样做，因为我只在 header.html 中指定了一次脚本标记

有什么建议吗？我不知道我的问题是否清楚。请让我知道以便更好地解释。

Answer 1

这里有各种解决方案，具体取决于您可以轻松编辑的内容。

• 您可以根据当前页面更改标题中的脚本标记。根据您的描述，我认为这是不可能的。

• 如果您必须始终加载相同的 js/main 脚本，您可以使用它作为不同页面特定模块之间的切换:

  // js/main.js
  define(function() {
      var pageId = getPageId();
      require('js/' + pageId);
  }); 
  

  这取决于在 header 加载时能否获取页面 id - 可以通过在 header 加载之前设置的 JS 变量，或者通过解析 URL，或者通过其他方式。

• 您只需从标题中删除脚本标记并将其包含在页面的变量正文中即可。脚本标签可以出现在文档中的任何位置。

• 您可以从 header 脚本标记中删除 data-main 属性(以便 header 仅加载 RequireJS 库)，然后在页面正文中添加一个脚本标记来加载页面特定模块:

  <script> require('js/pageAbout'); </script>
  

其中任何一个都应该有效 - 最后两个可能是最简单的。 RequireJS 文档非常规范，但是有很多方法可以实现有效的实现 - 您不必按照推荐的方式进行操作。