javascript - 最后加载的JS文件里写$(function() {});ready函数的意义何在？-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

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

阿神 2017-04-11 10:02:06

[JavaScript讨论组]

359

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

阿神

闭关修行中......

全部回复(5)

PHPz2017-04-11 10:04:06 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() 方式书写代码要视情况而定，不能一概而论。