您何时将Javascript放在体内,何时放在头以及何时使用doc.load?[重复]

2021/01/31 12:41 · jquery ·  · 0评论

可能重复:
将Javascript放在HTML文件中的何处?
我应该在html的正文还是标题中编写脚本?

我一直想知道,主要是因为在创建页面时,由于以下原因,我总是遇到麻烦:

您什么时候写JavaScript

  • 在里面 <head>
  • 在里面 <body>
  • $(document).ready()

我可能很愚蠢,但是有几次我的JavaScript(/ jQuery)由于位置错误或yes或nodoc.ready()命令而没有执行。所以我真的很想知道。

jQuery和'var'命令也是如此

$(document).ready() 只需确保在加载JavaScript之前已加载所有DOM元素。

没关系的时候

不等待该事件触发,您可能最终要处理页面上尚不存在的DOM元素或样式。DOM ready事件还使您可以更加灵活地在页面的不同部分上运行脚本。例如:

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

将运行,因为在脚本运行之前已加载了map div。实际上,通过将脚本放在页面底部,您可以获得一些相当不错的性能改进

什么时候重要

但是,如果要在<head>元素中加载脚本,则大多数DOM都没有加载。此示例不起作用:

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

不会,因为尚未加载map div。

一个安全的解决方案

您可以通过等待整个DOM加载完成来避免这种情况:

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

有很多文章对此进行了解释,以及jQuery文档本身。

按照现代的“最佳实践”,它是这样的:

  • <head>开始呈现页面之前,将脚本放置在应该发生的时间。例如HTML 5填充程序库或Modernizr之类的东西。
  • 如果对脚本导入方式的控制有限,则将脚本置于“就绪”处理程序中。诸如可以在页面上包含的实用程序之类的东西通常会使用“就绪”处理程序,因为它们不确定如何使用它们,这些实用程序可以包含在页面中以不加干扰地添加功能。
  • <body>如果在其他所有情况下都可以避免使用脚本,请将脚本放在末尾

有时,您最终会遇到页面中的依赖项,而这些依赖项要求您将原本希望在body元素的末尾加载的内容。这是不希望发生的情况,但是如果您无法避免这种情况,则会强制将脚本加载到<head>而不是末尾<body>

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

何时使用“就绪”处理程序(或“加载”处理程序)的决定与有关将<script>标签放置在何处的决定有些不同例如,如果您从服务器端模板系统中获得了页面内窗口小部件来生成(不需要的,但是您能做什么?)jQuery引用,那么即使其他代码,您也需要在页面顶部导入jQuery。可能会将初始化推迟到“就绪”处理程序。就是说,何时使用“就绪”的决定与您的脚本是否愿意在正确的时间点将其导入页面有关,还是要确保无论在何处都发生正确的事情,它的<script>标签被放置。

这取决于何时需要执行代码。

如果要操纵DOM树(例如,将元素四处移动/显示隐藏等)并将代码放在文档的开头,则在执行代码时元素将不存在,因此代码将无法工作。

在这种情况下,您可以将代码放在文档的开头,并在文档DOM准备就绪时调用它, $(document).ready()

在您的文档末尾放置代码几乎是没有必要的,我可以想到的一个例子是google plus +1按钮,它要求您将脚本放在最后一个+1按钮之后,因此只需将其粘贴到文档末尾即可为了确定。

本文地址:http://jquery.askforanswer.com/ninheshijiangjavascriptfangzaitineiheshifangzaitouyijiheshishiyongdoc-loadzhongfu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!