npm 包 domready-loaded 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要等待 DOM 加载完毕后再执行一些操作。domready-loaded 是一款可以用来判断 DOM 是否加载完毕的 npm 包，它可以帮助我们更加方便地实现这一功能。

安装

使用 npm 安装：

npm install domready-loaded --save

使用示例

import domready from 'domready-loaded';

domready(() => {
  // DOM 加载完毕后执行的操作
});

在这个示例中，我们使用 ES6 的模块化语法来导入 domready-loaded，然后直接把需要执行的操作作为回调函数传递给 domready()，在 DOM 加载完毕后就会执行这个回调函数。

深入了解

domready-loaded 实际上是对 document.readyState 和 document.addEventListener('DOMContentLoaded') 的封装。它会判断 document.readyState 是否为 'complete'，如果不是，则会绑定一个 'DOMContentLoaded' 事件的监听器，等待 DOM 加载完毕后执行回调函数。

同时，domready-loaded 也可以兼容一些老版本的浏览器，比如 IE6。对于这些浏览器，它会通过判断 document.body 是否存在来判断 DOM 是否加载完毕。

总结

domready-loaded 可以帮助我们更加方便地实现 DOM 加载完毕后的操作。使用它可以让我们的代码更加简洁易读，同时也兼容老版本的浏览器。在实际的开发中，我们可以在需要等待 DOM 加载的操作中使用 domready()，提高代码的健壮性和稳定性。

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ---------------------- ------------
  -------
  ------
    ------- --------------------------
  -------
-------

import domready from 'domready-loaded';

domready(() => {
  const element = document.createElement('div');
  element.innerText = 'Hello World!';
  document.body.appendChild(element);
});

在这个示例中，我们创建了一个 div 元素，并在回调函数中将它添加到了 body 标签中。由于我们使用了 domready()，所以这个操作一定是在 DOM 加载完毕后才会执行。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b365d3