当使用包含、扩展和块时，Jade脚本加载顺序似乎很混乱

jade script loading sequence seems screwy when using includes, extends, and blocks

本文关键字：加载 脚本 Jade 顺序 混乱 包含 扩展      更新时间：2023-09-26

好的，我将尽可能地简化这个例子。这是我的问题。我使用节点和表达与玉石生成html。我有一个主布局。Jade文件，在正文末尾包含如下内容:

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

然后我有一个翡翠部分(_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);

在我的控制台中，我得到2个日志。第一个说'undefined'，第二个正确记录jQuery。

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

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

我做错了什么吗?我对翡翠比较陌生，所以我很可能是。

谢谢!

你应该在shape中使用'extends layout' 

extends layout
block append scripts
   script(src='/javascripts/wire.js')
相关文章：