开源项目 `when-dom-ready` 使用教程

开源项目 when-dom-ready 使用教程

when-dom-ready$(document).ready() for the 21st century项目地址:https://gitcode.com/gh_mirrors/wh/when-dom-ready

1. 项目的目录结构及介绍

when-dom-ready/
├── LICENSE
├── README.md
├── package.json
├── src/
│   └── index.js
└── test/
    └── index.test.js

• LICENSE: 项目的许可证文件。
• README.md: 项目的说明文档。
• package.json: 项目的依赖管理文件。
• src/: 源代码目录，包含项目的主要逻辑。
  • index.js: 项目的主入口文件。
• test/: 测试代码目录，包含项目的测试用例。
  • index.test.js: 项目的测试文件。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.js。该文件主要用于检测 DOM 是否已经加载完成，并执行相应的回调函数。以下是文件的主要内容：

export default function whenDomReady(callback, options) {
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    setTimeout(callback, 1);
  } else {
    document.addEventListener('DOMContentLoaded', callback, options);
  }
}

whenDomReady.promise = (options) => {
  return new Promise((resolve) => {
    whenDomReady(resolve, options);
  });
};

• whenDomReady: 主函数，用于检测 DOM 是否已经加载完成，并在加载完成后执行回调函数。
• whenDomReady.promise: 返回一个 Promise 对象，方便异步操作。

3. 项目的配置文件介绍

项目的配置文件是 package.json，该文件包含了项目的基本信息和依赖项。以下是文件的主要内容：

{
  "name": "when-dom-ready",
  "version": "1.2.0",
  "description": "A lightweight, dependency-free, ES6 promise-based library to check if the DOM is ready.",
  "main": "src/index.js",
  "scripts": {
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lukechilds/when-dom-ready.git"
  },
  "keywords": [
    "dom",
    "ready",
    "domcontentloaded",
    "promise"
  ],
  "author": "Luke Childs",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/lukechilds/when-dom-ready/issues"
  },
  "homepage": "https://github.com/lukechilds/when-dom-ready#readme",
  "devDependencies": {
    "jest": "^24.9.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 项目的主入口文件。
• scripts: 项目的脚本命令，如测试命令 npm test。
• repository: 项目的仓库地址。
• keywords: 项目的关键词。
• author: 项目的作者。
• license: 项目的许可证。
• bugs: 项目的 Bug 跟踪地址。
• homepage: 项目的主页地址。
• devDependencies: 项目的开发依赖。

以上是 when-dom-ready 项目的使用教程，希望对你有所帮助。

when-dom-ready$(document).ready() for the 21st century项目地址:https://gitcode.com/gh_mirrors/wh/when-dom-ready