最后加载的JS文件里写$(function() {});ready函数的意义何在?

大伯格
  • 371

如果在body的最后面在家一个script标签。
js内容是$(function() {});
那么,当最后加载这个script标签的时候是不是就没必要写$(function() {});了?
因为我觉得,按照页面加载顺序,加载到body最后的时候不是本身就是dom加载完成的状态了吗?是不是就不需要在写$(function() {});了?

回复
阅读 5.2k
5 个回答
✓ 已被采纳

jQuery 的 ready 方法在现代浏览器中的实际是监听 document 的 DOMContentLoaded 事件。此事件是在文档的 DOM 结构加载完成后触发,注意这里是文档结构而不是整个页面内容(引用资源不属于文档结构,如图片)。

在 body 最后面直接执行与使用 ready 方式执行脚本在时间点上还是有一些差别的,ready 方式会等到 </html> 加载完后才会触发。

如果 script 标签后面就是 </body>了,那直接运行和调用 ready 方法(这里的 $(function() {}) 调用的其实是 ready() 方法)运行基本没有差别。当然 jQuery 的 ready 方法还有隔离作用域的作用(但不是主要作用,隔离使用域可以使用 IIFE 的)。

如果 script 标签后面还有别的内容比较能看清楚问题在哪里,如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    $(function() {
      console.log('ready');
    });
    
    (function () {
      console.log('run');
    })();
  </script>
  <script>
    console.log('last');
  </script>
</body>
</html>

如果你能想清楚输出顺序,那就明白我说的意思了。

所以,虽然代码放在了 body 所有内容之后,是不是还需要 ready() 方式书写代码要视情况而定,不能一概而论。

不爱吃西红柿的鱼
  • 8.2k

$(function() {});的主要意义在于申明一个作用域,隔离其他作用域,避免全局变量的污染

但是类似img这种东西是异步的。

简单的来说就是页面中加载内容时候执行JS的顺序

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏