javascript - 本地 Javascript 和 CDN 优先级

Question

我正在从新的波士顿视频教程中学习 jquery，并在下面提出了 2 个问题。目的是当用户单击段落时隐藏该段落。但首先，这就是我在点击时隐藏段落的方法。

hide.js 看起来像这样

$('#paragraph').click(
function() {
    $('#paragraph').hide();
}
);

1. CDN 后跟正文中的本地 JS - 有效

2. 正文中的本地 JS 和 CDN - 不起作用

3. 本地 JS 和 Head 中的 CDN - 不起作用

4. CDN 后跟 Head 中的本地 JS - 不起作用

Q1。看到这些案例，我们是否可以自信地说 HEAD 部分中声明的脚本永远不会工作？

第二季度。有人可以解释一下这些不同的行为吗？

Answer 1

要理解这个问题，您必须了解 javascript 如何从外部资源包含到页面中以及浏览器如何构建 dom。

当您包含两个脚本标记时:

<script src="jquery.js"></script>
<script src="foo.js"></script>

下载并执行第一个，然后下载并执行第二个。如果在第一个脚本中定义了一个属性，例如 window.hello，您可以在第二个脚本中访问它，因为第二个脚本会在第一个脚本完成后下载并执行。如果脚本采用其他顺序，则该属性尚不可用。

就将代码包含在 head 和 body 中而言，你必须考虑代码相对于浏览器解析 html 和创建 DOM 的执行时间。浏览器从上到下读取 html，因此，当它到达 head 中的 script 标记时，body 节点甚至还不存在。这就是为什么你的代码在头脑中不起作用的原因。为了让它在头部工作，你必须以某种方式告诉你的代码等待元素存在。解决此问题的最常见方法是使用 DOMContentLoaded 事件，您可以使用以下方式绑定(bind)该事件:

$(document).ready(function(){
    // my code here
});

您还可以使用窗口加载事件。

$(window).on("load",function(){
    // my code here
})

除非您的代码需要获取元素的宽度或高度，否则最好使用 DOMContentLoaded，因为它会更快发生。

第三种选择是使用事件委托(delegate)，但它确实不适合您的用例。

$(document).on('click','#paragraph',function() {
    $('#paragraph').hide();
});

将 javascript 放在结束正文标记之前通常是一个更好的主意，但是对于许多 MVC 和 CMS 系统来说，这样做通常并不容易。