使用 includes、extends 和 blocks 时，Jade 脚本加载顺序似乎有问题

Question

好的，我会尽可能简化这个例子。这是我的问题。 我正在使用node和express与jade一起生成html。我有一个主layout.jade文件，其中在body的末尾包含这个：

block scripts
  script(src='/javascripts/libs/jquery-1.8.1.min.js')

然后我有一个jade部分（_shapes.jade），其中包含以下代码：

block append scripts
  script(src='/javascripts/wire.js')

然后我有一个jade文件（properties_panel.jade），它生成HTML：

extends ../layout

include _shapes

block controls
  include ../_controls

wire.js文件需要jQuery才能运行。从jade生成的html输出与我预期的完全一致。在body标签末尾有一块脚本标签，并且按正确的顺序排列（先加载jQuery）。

问题在于浏览器没有首先加载jQuery，但是似乎在jQuery加载后再次加载了该文件。我推断出这是因为我的wire.js文件被包装在一个自执行匿名函数中，像这样：

!function (context, $) {
  console.log($);
}(this, window.jQuery);

在我的控制台中，我得到了两个日志。第一个日志显示“undefined”，第二个日志正确地记录了jQuery。

但是这里有个奇怪的部分。如果我从我的_shapes.jade中注释掉脚本行，并在jQuery导入行后将其添加到layout.jade文件中，它会生成完全相同的html文件，但所有内容都以正确的顺序加载。

使用Chrome开发者工具，我可以在资源选项卡中查看加载顺序，即使HTML根本没有更改，加载顺序也会根据jade文件生成完全相同的HTML而变化。

我做错了什么吗？我对jade相对较新，所以很可能是我做错了。

谢谢！

- ThePuzzleMaster

---

你的_shapes中不应该使用'extends layout'吗？否则我认为它无法找到该块。 - asgoth

是的！那完全解决了问题。而且也很有道理。谢谢！这个修复很简单。 - ThePuzzleMaster

Answer 1

你应该在你的形状中使用“扩展布局”。

extends layout

block append scripts
   script(src='/javascripts/wire.js')

- asgoth