Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/396.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
什么时候将Javascript放在主体中,什么时候放在头部,什么时候使用doc.load?_Javascript_Jquery_Location_Head_Document Body - Fatal编程技术网

什么时候将Javascript放在主体中,什么时候放在头部,什么时候使用doc.load?

什么时候将Javascript放在主体中,什么时候放在头部,什么时候使用doc.load?,javascript,jquery,location,head,document-body,Javascript,Jquery,Location,Head,Document Body,可能重复: 我一直在想,主要是因为在创建页面时,我总是遇到以下问题: 什么时候编写javascript 在 在 带有$(document).ready() 我可能很愚蠢,但我曾经有过几次JavaScript(/jQuery)因为错误的位置或是或否doc.ready()命令而没有执行。所以我真的很好奇 jQuery和'var'命令也是如此。ready()只是确保在加载javascript之前加载所有DOM元素 无所谓的时候 在不等待触发此事件的情况下,您可能会最终操纵页面上尚未存在的DOM

可能重复:

我一直在想,主要是因为在创建页面时,我总是遇到以下问题:

什么时候编写javascript

  • 带有
    $(document).ready()
我可能很愚蠢,但我曾经有过几次JavaScript(/jQuery)因为错误的位置或是或否
doc.ready()
命令而没有执行。所以我真的很好奇

jQuery和'var'命令也是如此。ready()只是确保在加载javascript之前加载所有DOM元素

无所谓的时候

在不等待触发此事件的情况下,您可能会最终操纵页面上尚未存在的DOM元素或样式。DOM就绪事件还允许您更灵活地在页面的不同部分上运行脚本。例如:

<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

document.getElementById('map').style.opacity=0;
将运行,因为在脚本运行之前已加载映射div。事实上,您可以通过将脚本放在页面底部来获得一些

当它真的重要时

但是,如果在
元素中加载脚本,则大部分DOM都没有加载。此示例不起作用:

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>
document.getElementById('map').style.opacity=0;
不会,因为映射div尚未加载

安全的解决方案

只需等待整个DOM加载完毕,即可避免此问题:

<script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>
$(文档).ready(函数(){
document.getElementById('map').style.opacity=0;
});
有很多这样的解释,以及它本身。

根据现代“最佳实践”,它是这样的:

  • 当脚本应该在页面开始呈现之前出现时,将脚本放入
    。例如HTML5垫片库或Modernizer
  • 当对脚本的导入方式控制有限时,将脚本放入“就绪”处理程序中。可以包含在页面上以不引人注目的方式添加功能的实用程序等通常使用“就绪”处理程序,因为它们无法确定如何使用它们
  • 如果在所有其他情况下都可以避免,请将脚本放在
    的末尾
有时,页面中的依赖项会导致需要在body元素末尾加载的内容。这是一种不希望出现的情况,但如果无法避免,则可能会强制在
中加载脚本,而不是在
末尾加载脚本

最好在文档末尾加载内容,因为浏览器在加载时会评估
标记的内容。(有一些“现代”的方法可以避免这种情况,但这正进入更复杂的领域。)


何时使用“就绪”处理程序(或“加载”处理程序)的决定与将
标记放置在何处的决定略有不同。例如,如果您有来自服务器端模板系统的页面内小部件生成jQuery引用(不需要,但您能做什么?),那么您需要在页面顶部导入jQuery,即使其他代码可能会将初始化延迟到“就绪”处理程序。也就是说,关于何时使用“ready”的决定与您的脚本是否愿意依赖于在正确的点导入页面有关,或者它是否希望确保无论其
标记放置在何处都发生正确的事情有关。

这是您需要何时执行代码的问题

如果要操作DOM树(例如,移动元素/显示隐藏等),并且将代码放在文档的头部,那么在执行代码时,元素将不在那里,因此代码将无法工作

在这种情况下,您可以使用
$(document.ready()


将代码放在文档末尾很少是必要的,我能想到的一种情况是google plus+1按钮,它要求您在最后一个+1按钮之后放置一个脚本,因此您只需将其粘贴到文档末尾即可。嗯var与其他按钮有很大不同……请注意,我已经看到[var]写在头和身上,所以我想知道是否有任何区别。马克·舒尔泰斯,我想问的是它们之间的区别,而不是一个剧本应该是在头上还是在身体上。这有点不同。不过,谢谢。在外部样式表中加载它会落在哪里呢?我同意这种方法。我知道“现代”的方法是把JS文件放在正文的末尾。但是,除非性能是至关重要的,或者您希望您的用户使用传统的硬件/软件,否则将JS文件放在头上没有什么错。事实上,用户甚至可能没有注意到任何性能差异。为了维护和清洁,我更喜欢将JS文件保存在头部,或者将它们异步加载到头部。但是,如果页面只使用vanilla JS,我可能会在正文末尾加载JS文件。