JSDoc 高级用法 #
虚拟注释 #
@virtualDoc 虚拟文档 #
为无法直接注释的代码添加文档:
javascript
/**
* @virtualDoc
* @function jQuery.ajax
* @param {Object} options - 配置选项
* @returns {Promise} Promise 对象
*/
为第三方库添加类型 #
javascript
/**
* @typedef {Object} JQueryAjaxSettings
* @property {string} [url] - 请求地址
* @property {string} [method] - 请求方法
* @property {Object} [data] - 请求数据
* @property {function} [success] - 成功回调
* @property {function} [error] - 错误回调
*/
/**
* @external jQuery
* @see {@link https://jquery.com|jQuery}
*/
/**
* @function external:jQuery.ajax
* @param {JQueryAjaxSettings} settings - 配置选项
* @returns {JQuery.jqXHR}
*/
为 .d.ts 文件添加 JSDoc #
javascript
// 在 .d.ts 文件中
/**
* 用户接口
* @interface User
*/
interface User {
/** 用户 ID */
id: number;
/** 用户名 */
name: string;
}
条件文档 #
环境相关文档 #
javascript
/**
* 获取配置
* @param {string} key - 配置键名
* @returns {*} 配置值
* @example <caption>开发环境</caption>
* // 返回开发配置
* getConfig('apiUrl') // 'http://localhost:3000'
*
* @example <caption>生产环境</caption>
* // 返回生产配置
* getConfig('apiUrl') // 'https://api.example.com'
*/
function getConfig(key) {
// ...
}
版本相关文档 #
javascript
/**
* 用户认证
* @param {Object} credentials - 凭证
* @returns {Promise<User>}
*
* @version 1.0.0
* @example
* // 版本 1.0
* authenticate({ username, password })
*
* @version 2.0.0
* @example
* // 版本 2.0 支持 OAuth
* authenticate({ token })
*/
async function authenticate(credentials) {
// ...
}
TypeScript 集成 #
JSDoc 与 TypeScript 混用 #
javascript
// @ts-check
/**
* @typedef {Object} User
* @property {number} id
* @property {string} name
* @property {string} email
*/
/**
* 创建用户
* @param {User} user - 用户对象
* @returns {Promise<User>}
*/
async function createUser(user) {
// TypeScript 会检查 user 的类型
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(user)
});
return response.json();
}
导入 TypeScript 类型 #
javascript
/**
* @typedef {import('./types').User} User
* @typedef {import('./types').Config} Config
* @typedef {import('./types').ApiResponse<T>} ApiResponse
*/
/**
* @template T
* @param {string} endpoint
* @param {Config} config
* @returns {Promise<ApiResponse<T>>}
*/
async function fetchApi(endpoint, config) {
// ...
}
类型守卫 #
javascript
/**
* 检查是否为用户对象
* @param {*} obj - 任意对象
* @returns {obj is User}
*/
function isUser(obj) {
return (
typeof obj === 'object' &&
obj !== null &&
typeof obj.id === 'number' &&
typeof obj.name === 'string'
);
}
/**
* 处理数据
* @param {User|Admin} entity - 实体
*/
function process(entity) {
if (isUser(entity)) {
// 这里 entity 被识别为 User 类型
console.log(entity.name);
}
}
this 类型 #
javascript
/**
* 计数器类
* @class
*/
class Counter {
constructor() {
/**
* @type {number}
*/
this.count = 0;
}
/**
* 增加计数
* @returns {this}
*/
increment() {
this.count++;
return this;
}
/**
* 减少计数
* @returns {this}
*/
decrement() {
this.count--;
return this;
}
}
自定义标签 #
创建自定义标签处理器 #
javascript
// plugins/customTags.js
/**
* @param {Object} dictionary - JSDoc 字典
*/
exports.defineTags = function(dictionary) {
dictionary.defineTag('category', {
mustHaveValue: true,
onTagged: function(doclet, tag) {
doclet.category = tag.value;
}
});
dictionary.defineTag('security', {
mustHaveValue: true,
onTagged: function(doclet, tag) {
doclet.security = tag.value;
}
});
};
使用自定义标签 #
javascript
/**
* 获取用户信息
* @category User
* @security authenticated
* @param {number} id - 用户 ID
* @returns {Promise<User>}
*/
async function getUser(id) {
// ...
}
/**
* 删除用户
* @category User
* @security admin
* @param {number} id - 用户 ID
* @returns {Promise<void>}
*/
async function deleteUser(id) {
// ...
}
文档过滤 #
条件包含 #
javascript
// jsdoc.json
{
"source": {
"includePattern": ".+\\.js(doc)?$",
"excludePattern": "(^|\\/|\\\\)_"
}
}
基于标签过滤 #
javascript
/**
* 公开 API
* @public
*/
function publicApi() {}
/**
* 内部 API
* @private
* @ignore
*/
function internalApi() {}
基于访问级别过滤 #
javascript
// jsdoc.json
{
"opts": {
"access": "public" // 只生成 public 文档
}
}
文档分组 #
按模块分组 #
javascript
/**
* @module services/user
* @description 用户服务模块
*/
/**
* @module services/auth
* @description 认证服务模块
*/
按类别分组 #
javascript
/**
* @namespace API
*/
/**
* @memberof API
* @category User
*/
function getUser() {}
/**
* @memberof API
* @category User
*/
function createUser() {}
/**
* @memberof API
* @category Auth
*/
function login() {}
文档链接 #
内部链接 #
javascript
/**
* 用户类
* @class
* @see {@link User#getName} 获取名称方法
* @see {@link User#setName} 设置名称方法
*/
class User {
/**
* @see {@link User}
*/
constructor() {}
/**
* @see module:services/user
*/
save() {}
}
外部链接 #
javascript
/**
* @external Promise
* @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise|Promise}
*/
/**
* @external console
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/console|console}
*/
/**
* 记录日志
* @param {string} message - 日志消息
* @see {@link external:console.log}
*/
function log(message) {
console.log(message);
}
文件链接 #
javascript
/**
* @see {@link module:utils/format} 格式化工具
* @see file:./types.js 类型定义文件
*/
异步文档 #
Promise 类型 #
javascript
/**
* 获取用户列表
* @returns {Promise<User[]>} 用户列表 Promise
* @async
*/
async function getUsers() {
const response = await fetch('/api/users');
return response.json();
}
/**
* @async
* @param {number} id
* @returns {Promise<void>}
*/
async function deleteUser(id) {
await fetch(`/api/users/${id}`, { method: 'DELETE' });
}
回调与 Promise #
javascript
/**
* 获取数据
* @param {string} url - 请求地址
* @param {function(?Error, *=): void} [callback] - 回调函数
* @returns {Promise<*>|undefined} 如果没有回调则返回 Promise
*/
function fetchData(url, callback) {
if (callback) {
fetch(url)
.then(res => res.json())
.then(data => callback(null, data))
.catch(err => callback(err));
} else {
return fetch(url).then(res => res.json());
}
}
事件文档 #
定义事件 #
javascript
/**
* 用户事件
* @event User#login
* @type {Object}
* @property {User} user - 用户对象
* @property {Date} timestamp - 登录时间
*/
/**
* 用户登出事件
* @event User#logout
* @type {Object}
* @property {number} userId - 用户 ID
*/
触发事件 #
javascript
/**
* 用户管理器
* @class
* @fires User#login
* @fires User#logout
*/
class UserManager {
/**
* 用户登录
* @param {Object} credentials - 凭证
* @fires User#login
*/
login(credentials) {
const user = authenticate(credentials);
/**
* 登录事件
* @event User#login
* @type {Object}
*/
this.emit('login', { user, timestamp: new Date() });
}
}
监听事件 #
javascript
/**
* 初始化事件处理
* @listens User#login
* @listens User#logout
*/
function initHandlers(userManager) {
userManager.on('login', handleLogin);
userManager.on('logout', handleLogout);
}
枚举文档 #
基本枚举 #
javascript
/**
* 用户状态
* @enum {string}
* @readonly
*/
const UserStatus = {
/** 活跃状态 */
ACTIVE: 'active',
/** 未激活状态 */
INACTIVE: 'inactive',
/** 已禁用 */
DISABLED: 'disabled'
};
/**
* @param {UserStatus} status - 用户状态
*/
function updateStatus(status) {
// ...
}
数字枚举 #
javascript
/**
* HTTP 状态码
* @enum {number}
* @readonly
*/
const HttpStatus = {
/** 成功 */
OK: 200,
/** 已创建 */
CREATED: 201,
/** 错误请求 */
BAD_REQUEST: 400,
/** 未授权 */
UNAUTHORIZED: 401,
/** 未找到 */
NOT_FOUND: 404,
/** 服务器错误 */
INTERNAL_SERVER_ERROR: 500
};
复合枚举 #
javascript
/**
* 权限枚举
* @enum {Object}
* @property {string} name - 权限名称
* @property {number} level - 权限级别
*/
const Permission = {
/** 只读权限 */
READ: { name: 'read', level: 1 },
/** 写入权限 */
WRITE: { name: 'write', level: 2 },
/** 管理权限 */
ADMIN: { name: 'admin', level: 3 }
};
命名空间文档 #
定义命名空间 #
javascript
/**
* 工具函数命名空间
* @namespace Utils
*/
/**
* 格式化工具
* @namespace Utils.Format
* @memberof Utils
*/
/**
* 日期格式化
* @function
* @memberof Utils.Format
* @param {Date} date - 日期对象
* @returns {string}
*/
function formatDate(date) {
// ...
}
/**
* 数字格式化
* @function
* @memberof Utils.Format
* @param {number} num - 数字
* @returns {string}
*/
function formatNumber(num) {
// ...
}
嵌套命名空间 #
javascript
/**
* 应用命名空间
* @namespace App
*/
/**
* 服务层
* @namespace App.Services
* @memberof App
*/
/**
* 用户服务
* @class
* @memberof App.Services
*/
class UserService {
// ...
}
/**
* 数据层
* @namespace App.Models
* @memberof App
*/
/**
* 用户模型
* @class
* @memberof App.Models
*/
class User {
// ...
}
源码链接 #
配置源码链接 #
javascript
// jsdoc.json
{
"opts": {
"sourceRoot": "https://github.com/user/repo/blob/main/"
}
}
使用 @source 标签 #
javascript
/**
* @source https://github.com/user/repo/blob/main/src/utils.js#L10-L20
*/
function utility() {}
国际化 #
多语言描述 #
javascript
/**
* 获取用户信息
* @description [en] Get user information
* @description [zh] 获取用户信息
* @description [ja] ユーザー情報を取得
* @param {number} id - 用户 ID
* @returns {User}
*/
function getUser(id) {}
使用插件支持 #
javascript
// jsdoc.json
{
"plugins": [
"plugins/i18n"
],
"i18n": {
"locales": ["en", "zh", "ja"],
"defaultLocale": "en"
}
}
调试技巧 #
查看解析结果 #
javascript
// jsdoc.json
{
"opts": {
"explain": true // 输出解析的 doclet
}
}
查看处理流程 #
javascript
// jsdoc.json
{
"opts": {
"debug": true,
"verbose": true
}
}
输出 AST #
javascript
/**
* @debug
*/
function testFunction() {
// 会输出该函数的 AST 结构
}
性能优化 #
增量生成 #
javascript
// jsdoc.json
{
"opts": {
"incremental": true,
"cache": ".jsdoc-cache"
}
}
并行处理 #
javascript
// jsdoc.json
{
"opts": {
"parallel": 4 // 使用 4 个进程
}
}
排除不必要的文件 #
javascript
// jsdoc.json
{
"source": {
"exclude": [
"node_modules",
"dist",
"coverage",
"**/*.test.js",
"**/*.spec.js"
]
}
}
下一步 #
现在你已经掌握了 JSDoc 高级用法,接下来学习 配置文件 了解如何配置 JSDoc!
最后更新:2026-03-29