原生js实现jquery的ready

欧易交易所欧易app 欧易下载搜狗输入法搜狗输入法 quickq下载 quickq官网

Hey小伙伴们，今天来聊聊如何用原生JavaScript实现类似jQuery的$(document).ready()功能，这个功能对于我们前端开发者来说非常重要，因为它确保了DOM元素加载完成后再执行我们的脚本，避免了在DOM未完全加载时就去操作元素，导致脚本出错的情况，不使用jQuery，我们如何用原生JS来实现这个功能呢？别急，我来一步步给大家揭晓。

我们需要了解$(document).ready()背后的原理，这个函数其实是利用了浏览器的事件机制，当DOM加载完成时，会触发一个DOMContentLoaded事件，我们的目标就是监听这个事件，然后在事件触发时执行我们的代码。

1. 监听DOMContentLoaded事件

在原生JavaScript中，我们可以使用addEventListener方法来监听事件，对于DOMContentLoaded事件，我们可以这样做：

document.addEventListener('DOMContentLoaded', function() {
  // 你的代码逻辑
});

这段代码会在DOM加载完成后执行函数中的代码，这里的function() {}就是我们的回调函数，里面可以放置我们希望在DOM加载完成后执行的代码。

兼容性考虑

虽然DOMContentLoaded事件在现代浏览器中得到了广泛支持，但我们还是要考虑到一些老旧浏览器的兼容性问题，为了确保在所有浏览器中都能正常工作，我们可以使用一个自执行函数来检查DOM是否已经加载完成：

(function() {
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    // DOM已经加载完成，执行代码
  } else {
    document.addEventListener('DOMContentLoaded', function() {
      // DOM加载完成后执行代码
    });
  }
})();

这段代码首先检查document.readyState属性，如果它的值是complete或interactive，说明DOM已经加载完成，可以直接执行代码，如果不是，就监听DOMContentLoaded事件，等待DOM加载完成后再执行代码。

简化代码

上面的代码虽然有效，但看起来有点繁琐，我们可以进一步简化它，让代码更加简洁：

(function() {
  if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') {
    // DOM加载完成，执行代码
  } else {
    document.addEventListener('DOMContentLoaded', function() {
      // DOM加载完成后执行代码
    });
  }
})();

这里我们使用了document.attachEvent来判断是否是IE浏览器，因为IE浏览器使用attachEvent而不是addEventListener，我们通过document.readyState !== 'loading'来判断除了IE以外的其他浏览器的DOM加载状态。

利用Promise

如果你喜欢使用现代JavaScript的特性，我们还可以用Promise来实现这个功能：

function domReady() {
  return new Promise((resolve) => {
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
      resolve();
    } else {
      document.addEventListener('DOMContentLoaded', () => resolve());
    }
  });
}
domReady().then(() => {
  // DOM加载完成后执行代码
});

这段代码创建了一个domReady函数，它返回一个Promise，如果DOM已经加载完成，就直接resolve这个Promise，否则，就监听DOMContentLoaded事件，并在事件触发时resolve，我们可以用.then()方法来处理DOM加载完成后的逻辑。

通过以上几种方法，我们可以用原生JavaScript实现类似jQuery的$(document).ready()功能，这样，即使不使用jQuery，我们也能确保在DOM加载完成后再执行我们的脚本，提高代码的健壮性和兼容性，希望这篇文章能帮助到大家，如果有任何问题，欢迎在评论区交流哦！