利用jsdoc提高自动提示—Webstorm入门指南

很多人第一眼喜欢上idea或Webstorm，是其拥有非常强大的自动提示功能（js中的自动提示准确率和范围远远高过其他编辑器）。

但javascript太灵活了，又是弱类型语言，提示的准确度和详细度依然是个问题（比如，一个带参数的函数，Webstorm无法提示出参数的数据类型）。

Webstorm5.0引入JSdoc的标签支持，通过开发者自己给代码加上符合jsdoc要求的注释，来达到强化js自动提示的目标。

关于jsdoc，有不清楚的请看明河以前写的文章《使用jsdoc生成组件API文档—jsdoc实战》，如果你想知道如何编译出API文档，请看明河写的ant教程《ant结合jsdoc构建js文档—ant入门指南》。

随便写个类，没加任何jsdoc注释时

function User(name){

      this.name=  name;

}

User.prototype = {

  render:function(){

 

  },

  getMoney:function(money){

    returnmoney;

  }

};

外部调用之：

var minghe = new User('明河');

minghe.getMoney(1000);

在写这二行中，Webstorm给出User类和getMoney的提示，但如果getMoney的参数数据类型只能是数值型，Webstorm没给出对应的提示。

接下来我们给getMoney这个函数加上jsdoc。

（PS：Webstorm非常的知心，当你写好函数时候，输入“/**”加回车，会自动生成jsdoc格式的注释）

  /**

   *

   * @param money

   * @return {*}

   */

getMoney:function(money){

  returnmoney;

}

我们补充些限制上去：

  /**

   *

   * @param {Number} money 一个屌丝能有多少钱

   * @return {Number}

   */

getMoney:function(money){

  returnmoney;

}

做个测试：外部传入一个字符串作为参数

提示你传入的参数不是数值型！！

上面明河只是举了个简单的例子，来看下其他的demo。

先来看下一个带完成jsdoc注释的类，uploader中的queue。

利用jsdoc可以强化Structure的类成员的索引,有jsdoc补充后，Structure变得非常方便，我现在我用它来快速定位代码。

使用ctrl+F12快速打开Structure界面。

@extends ：用于类继承关系的声明

@typedef：用于复杂数据类型的声明

明河费这么多口舌，只是传递一个信息：完善的注释对于前端而言非常重要，利用jsdoc，不只可以输出API文档，还可以给我们实际编码带来便利，何乐而不为呢？

转载地址：http://www.36ria.com/5793