如何在无框架HTML项目中访问JavaScript函数的JSDoc文档？

1. 规范function.js中的JSDoc注释 #

先确保updateChecklist函数的JSDoc注释符合标准格式，示例如下：

/**
 * 更新Checklist条目状态
 * @param {Array} checklistItems - 待处理的Checklist条目数组，每个条目需包含id、text、status字段
 * @param {string} targetStatus - 目标状态，可选值：'completed' / 'uncompleted'
 * @returns {Array} 更新后的Checklist条目数组
 * @example
 * // 调用示例
 * const originalList = [{id: 1, text: '完成文档', status: 'uncompleted'}];
 * const updatedList = updateChecklist(originalList, 'completed');
 */
function updateChecklist(checklistItems, targetStatus) {
  return checklistItems.map(item => ({...item, status: targetStatus}));
}

2. 用JSDoc生成静态文档 #

在项目根目录（Project文件夹）执行以下操作：

• 初始化npm（未初始化过的话）：npm init -y
• 安装JSDoc依赖：npm install jsdoc --save-dev
• 在package.json中添加生成脚本：

  "scripts": {
    "generate-docs": "jsdoc function.js -d docs"
  }
  

• 运行生成命令：npm run generate-docs
  执行后会在Project目录下生成docs文件夹，里面是自动生成的静态HTML文档。

3. 在index.html中配置文档访问入口 #

直接在index.html中添加跳转链接或嵌入文档，两种方式任选：

方式1：添加跳转链接 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>项目函数文档</title>
</head>
<body>
  <h1>常用工具函数文档</h1>
  <p><a href="./docs/function.html#updateChecklist">查看updateChecklist函数详情</a></p>
</body>
</html>

方式2：用iframe直接嵌入文档 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>项目函数文档</title>
</head>
<body>
  <h1>updateChecklist 函数文档</h1>
  <iframe src="./docs/function.html#updateChecklist" width="100%" height="700px" frameborder="0"></iframe>
</body>
</html>

4. 本地预览 #

用VSCode的Live Server插件打开index.html，即可直接访问生成的函数文档。

内容的提问来源于stack exchange，提问作者Diego Fernandez Herrero