jQuery $(document).ready原生JS等效实现不同版本差异咨询

两个版本的核心差异 #

两个版本的核心区别是执行时机的兼容性不同：

• 版本2只是单纯给DOMContentLoaded事件绑定回调，如果执行这条语句的时候，页面的DOMContentLoaded事件已经触发过了，你传入的fn永远不会执行。
• 版本1是完整的兼容封装，和jQuery的$(document).ready()行为完全一致，不管你什么时候调用，传入的回调都能正常执行。

版本1判断document.readyState的原因 #

DOMContentLoaded事件只会在页面DOM树首次构建完成时触发一次，触发后不会二次执行。如果你的JS脚本是异步加载、动态插入到页面的，或者执行时机本身就在页面加载完成之后，这时候直接绑定DOMContentLoaded事件监听是无效的。
加这个判断就是为了覆盖这类场景：如果当前文档已经不在加载状态（readyState为interactive或complete），就直接执行回调，只有还在加载阶段时才绑定事件监听。

版本1的使用要求 #

是的，版本1只是函数定义，你需要额外调用ready(fn)才能生效，示例用法如下：

// 定义工具函数（可复用）
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

// 调用执行，传入你要运行的逻辑
ready(() => {
  // 此处为DOM就绪后需要执行的业务代码
  console.log('DOM已加载完成')
})

如果你的逻辑不需要复用，也可以直接写判断逻辑，不需要单独封装ready函数。

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