如何在多JS文件的Web应用中添加多个jQuery.ready()函数？

首先要明确：jQuery完全支持多次调用$(function() {})（或者等价的$(document).ready()），每一次调用都会把传入的函数加入到DOM就绪的执行队列中，当页面DOM加载完成后，所有这些函数都会按代码引入的顺序依次执行。

你的代码本身是完全有效的 #

你给出的代码结构：

• index.pug中依次引入两个JS文件
• firstFile.js：$(() => { doSomeThings() })
• secondFile.js：$(() => { doSomeOtherThings() })

这段代码在正常场景下，两个函数都会在DOM就绪后被执行。你之前遇到只有第一个函数生效的情况，是因为缺少doSomeOtherThings()对应的HTML元素（比如操作的DOM节点不存在），并不是多次调用$(function())的机制问题。

可选的优化小方案 #

如果后续需要更灵活地管理就绪逻辑，或者担心执行顺序的可读性，可以把初始化逻辑封装成命名函数，再统一调用：

// firstFile.js
function initFirstModule() {
  doSomeThings();
}

// secondFile.js
function initSecondModule() {
  doSomeOtherThings();
}

// 可以单独建一个初始化文件，或者放在最后引入的文件中
$(function() {
  initFirstModule();
  initSecondModule();
});

不过这只是可选的优化方式，原生的多次$(function())调用本身就是合法且可靠的写法。

内容的提问来源于stack exchange，提问作者Mateusz Komarnicki