3

好的，我将尽量简化这个例子。这是我的问题。我正在使用 node 和 express 来生成 html。我有一个主要的 layout.jade 文件，它在正文的末尾包含以下内容：

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

然后我有一个翡翠部分（_shapes.jade），它具有以下代码：

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

然后我有生成 html 的玉文件 (properties_panel.jade)：

extends ../layout

include _shapes

block controls
  include ../_controls

wire.js 文件需要 jQuery 才能运行。翡翠的 html 输出与我期望的完全一样。我在正文标记的末尾有一个脚本标记块，并且顺序正确（首先是 jQuery）。

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

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

在我的控制台中，我得到 2 个日志。第一个说“未定义”，第二个正确记录 jQuery。

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

使用 chrome 开发人员工具，我可以在资源选项卡中看到加载顺序，即使 html 根本没有改变，加载顺序也会根据玉文件生成相同 html 的方式而改变。

难道我做错了什么？我对玉比较陌生，所以我很可能是。

谢谢！

4

1 回答 1

1

您应该在形状中使用“扩展布局”：

extends layout

block append scripts
   script(src='/javascripts/wire.js')
于 2012-12-29T19:48:20.893 回答