【问题标题】:Best way to document anonymous objects and functions with jsdoc使用 jsdoc 记录匿名对象和函数的最佳方法
【发布时间】:2011-03-11 10:20:23
【问题描述】:

编辑:从技术上讲,这是一个两部分的问题。我选择了涵盖一般问题的最佳答案,并链接到处理特定问题的答案。

用 jsdoc 记录匿名对象和函数的最佳方法是什么?

/**
 * @class {Page} Page Class specification
 */
var Page = function() {

    /**
     * Get a page from the server
     * @param {PageRequest} pageRequest Info on the page you want to request
     * @param {function} callback Function executed when page is retrieved
     */
    this.getPage = function(pageRequest, callback) {
    }; 
};

代码中不存在PageRequest 对象或callback。它们将在运行时提供给getPage()。但我希望能够定义对象和函数是什么。

我可以创建 PageRequest 对象来记录:

/**
 * @namespace {PageRequest} Object specification
 * @property {String} pageId ID of the page you want.
 * @property {String} pageName Name of the page you want.
 */
var PageRequest = {
    pageId : null,
    pageName : null
};

这很好(尽管我愿意接受更好的方法来做到这一点)。

记录callback 函数的最佳方法是什么?我想在文档中说明一下,比如回调函数的形式是:

callback: function({PageResponse} pageResponse, {PageRequestStatus} pageRequestStatus)

任何想法如何做到这一点?

【问题讨论】:

    标签: javascript documentation tags jsdoc


    【解决方案1】:

    您可以使用@name 标签记录代码中不存在的内容。

    /**
     * Description of the function
     * @name IDontReallyExist
     * @function
     * @param {String} someParameter Description
    */
    
    /**
     * The CallAgain method calls the provided function twice
     * @param {IDontReallyExist} func The function to call twice
    */
    exports.CallAgain = function(func) { func(); func(); }
    

    这里是@name tag documentation。您可能会发现name paths 也很有用。

    【讨论】:

    • 真的很整洁!记录回调的好方法。
    • 但我不明白这对匿名对象是如何工作的?假设一个设置对象被发送到某个函数以创建一个在当前范围内不可见的对象。
    • 如果您不想使用@name 标记为您的匿名对象命名,请描述使用它的对象,这将是您的设置对象的@param 标记主体例子。
    • 还有@callback标签。
    【解决方案2】:

    您可以使用@callback@typedef

    /**
     * @callback arrayCallback
     * @param  {object} element - Value of array element
     * @param  {number} index   - Index of array element
     * @param  {Array}  array   - Array itself
     */
    
    /**
     * @param {arrayCallback} callback - function applied against elements
     * @return {Array} with elements transformed by callback
     */
    Array.prototype.map = function(callback) { ... }
    

    【讨论】:

    • @ChrisMoschini 谢谢。答案中的 @callback 标记已链接到相应的文档页面。
    【解决方案3】:

    为了补充 studgeek 的回答,我提供了一个示例,说明 JsDoc with Google Closure Compiler 可以让您做什么。

    请注意,记录的匿名类型会从生成的缩小文件中删除,编译器会确保传入有效对象(如果可能)。但是,即使您不使用编译器,它也可以帮助下一个开发人员和 WebStorm (IntelliJ) 等工具理解它并为您提供代码补全。

    // This defines an named type that you don't need much besides its name in the code
    // Look at the definition of Page#getPage which illustrates defining a type inline
    /**  @typedef { pageId : string, pageName : string, contents: string} */
    var PageResponse;
    
    /**
     * @class {Page} Page Class specification
     */
    var Page = function() {    
        /**
         * Get a page from the server
         * @param {PageRequest} pageRequest Info on the page you want to request
         *
         * The type for the second parameter for the function below is defined inline
         *
         * @param {function(PageResponse, {statusCode: number, statusMsg: string})} callback
         *        Function executed when page is retrieved
         */
        this.getPage = function(pageRequest, callback) {
        }; 
    };
    

    【讨论】:

    • 嗨,这似乎是最优雅的答案,但是 JSDoc 输出只包含 function 而没有特定的参数类型。我正在使用 jsdoc 3.4.0。不完全支持这种语法吗?
    • @PeteV。我没有跟上 jsdoc 和闭包编译器之间的同步水平。我建议您查看与闭包编译器一起使用的替代文档生成器(因为它是 jsdoc 标准的超集)。试试plovr.comseehuhn.de/pages/jvjsdocgithub.com/google/closure-compiler/wiki/…。我已经开始使用 TypeScript 向 JavaScript 添加静态类型
    【解决方案4】:

    @link 可以为方法和类添加内联链接。

    /**
     * Get a page from the server
     * @param {PageRequest} pageRequest Info on the page you want to request
     * @param {function} callback Function executed when page is retrieved<br />
     * function({@link PageResponse} pageResponse,{@link PageRequestStatus} pageRequestStatus)
     */
    this.getPage = function (pageRequest, callback) {
    };
    

    不理想,但它可以完成工作。

    【讨论】:

      【解决方案5】:

      Google Closure Compiler Annotations 对此有 Type Expressions,其中包括指示特定参数的类型、返回类型甚至这个的能力。许多库都在关注 Google Closure Compiler Annotations,因为他们想用它来压缩他们的代码。所以它有一些动力。缺点是我看不到描述的方法。

      为了提供描述,JSDoc Toolkit Parameters With Properties 方法可能会起作用(查看页面底部)。这就是我现在正在做的事情。 JSDoc Toolkit 正在准备开始在 V3 上工作,所以那里的反馈可能很好。

      【讨论】:

        【解决方案6】:

        您可以使用@see 链接到同一类中的另一个方法。该方法永远不会被使用,它只是用于文档目的。

        /**
         * @class {Page} Page Class specification
         */
        var Page = function() {
        
            /**
             * Get a page from the server
             * @param {PageRequest} pageRequest Info on the page you want to request
             * @param {function} callback Function executed when page is retrieved
             * @see #getPageCallback 
             */
            this.getPage = function (pageRequest, callback) {
            }; 
        
            /**
             * Called when page request completes 
             * @param {PageResponse} pageResponse The requested page
             * @param {PageRequestStatus} pageRequestStatus Status of the page
             */
            //#ifdef 0
            this.getPageCallback = function (pageResponse, pageRequestStatus) { };
            //#endif 
        };
        

        如果您使用某种构建系统,则可以轻松地从构建中省略虚拟方法。

        【讨论】:

        • 谢谢,不。我目前正在这样做(没有 ifdef)并且它可以工作,但我希望用户能够立即看到它是一个接受参数 X 和 Y 而不会离开它们所在位置的函数。类似于 google map api 的操作方式。例如:code.google.com/apis/maps/documentation/javascript/…
        • 刚刚发现@link 可以做我所说的。它并不完美,但它有效。我将创建一个单独的答案,以防其他人发现它有用。
        猜你喜欢
        • 1970-01-01
        • 2011-12-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-04-06
        • 2018-11-13
        • 2017-02-06
        相关资源
        最近更新 更多