好的,我会尽可能简化这个例子。这是我的问题。 我正在使用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相对较新,所以很可能是我做错了。
谢谢!