示例代码托管在:http://www.github.com/dashnowords/blogs

博客园地址:《大史住在大前端》原创博文目录

华为云社区地址:【你要的前端打怪升级指南】

一.问题描述

最近向一些同事推荐了网页中实现流程图绘制的工具库jsplumb.js,Community版本是开源的,在github的官方仓库的Wiki中能够找到社区版的官方指南,非常非常详细。但是在后来很多人反馈说找不到API文档,github官方仓库中的API文档链接失效了,jsplumb.js官网也找不到。

二. 处理方法

其实API文档就放在官方代码仓中,只是需要一些小小的加工,具体步骤如下:

1.先从官方代码仓https://github.com/jsplumb/jsplumb 将master分支的工程拉取到本地

2.使用npm install yuidocjs -gyarn global add yuidocjs全局安装文档工具YUIdoc

3.进入刚才下载的工程目录中的/doc/api文件夹

4.打开cmd小黑窗,输入yuidoc .(yuidoc后面是1个空格1个点号)

YUIdoc就会在当前目录新建一个out文件夹,并将文档输出为本地静态网站,完成后只需要打开out目录中的index.html就可以本地查看API离线文档了,下图即是YUIdoc默认样式生成的离线文档:

怎么样,这个技能你Get到了吗?

三. YUIdoc工具介绍

官方仓库:https://github.com/yui/yuidoc

YUIdoc是一个基于模板引擎Handlebars.js自动化文档工具,可以将javascriptjsdoc风格的注释语句转换成静态网站式的离线文档,所以你可以通过定制模板来为最终生成的文档增加不同的主题样式。jsdoc风格通常都会有IDE插件直接生成(vscodesublime里肯定是有的,因为我自己天天用),最常见的是函数声明注释,YUIdoc中可以识别的所有语法可以查看官方提供的【YUIdoc支持的注释语法】

//jsdoc风格的注释

/**
* My method description. Like other pieces of your comment blocks,
* this can span multiple lines.
*
* @method methodName
* @param {String} foo Argument 1
* @param {Object} config A config object
* @param {String} config.name The name on the config object
* @param {Function} config.callback A callback function on the config object
* @param {Boolean} [extra=false] Do extra, optional work
* @return {Boolean} Returns true on success
*/

你可以通过-e参数来指定注释文件的格式,例如你的工程是基于Typescript开发的,就可以使用yuidoc . -e .ts将项目中的*.d.ts声明文件转换成离线文档,以便团队内部查阅。如果你开发的是一个工具库,需要生成完备的API文档,为了不影响源码阅读和开发,可以像jsplumb.js那样将注释语句单独写在一个文件中,因为是一个自动化工具,也没什么太多可讲的,有需要的朋友直接浏览一下官网就可以很容易地使用了。

如何查看jsplumb.js的API文档(YUIdoc的基本使用)的更多相关文章

  1. 如何在IntelliJ IDEA在线查看源码的API文档

    https://blog.csdn.net/IFollowRivers/article/details/81604463

  2. 使用springfox+swagger2书写API文档(十八)

    使用springfox+swagger2书写API文档 springfox是通过注解的形式自动生成API文档,利用它,可以很方便的书写restful API,swagger主要用于展示springfo ...

  3. 必应地图api文档,微软必应地图web开发版详解,可以在国内使用国外地图

    最近,公司项目要求在页面中嵌入地图,需求还算简单,但是由于必须具备响应式(主要是pc和移动端),而且由于公司业务是全球性的,要支持国外地点搜索.考虑到百度,腾讯,高德等等国内地图无法显示国外数据,谷歌 ...

  4. 使用jsdoc-toolkit来自动生成js api文档

    近来前端组小盆友开发的类库越来越多,很多情况下彼此不知道写了些什么方法,为了更好的合作提高工作效率,找了个比较好的api文档生成方法.使用jsdoc-toolkit来自动生成js api文档. 一.  ...

  5. layer.js 弹窗组件API文档

      基础参数 type title content skin area offset icon btn closeBtn shade shadeClose time id shift maxmin f ...

  6. 新手如何查看API文档?

    Java API文档为例: 1:知道包名,可以在Overview里直接找到这个包,然后去查这个包下面的类和方法.2:知道类名和方法名,可以在Index.html里直接去找这个类或方法,然后查看.3:如 ...

  7. 使用jsdoc-toolkit实现JS API文档自动化

    在前面的博文中探讨自动化工程问题时,写过基于NodeJS的,使用gulp.grunt的jsdoc插件实现文档自动化.本文探讨基于java环境的自动化实现. 一.Java安装与环境配置 关于Java的安 ...

  8. Grunt-jsdoc生成JS API文档

    Grunt-jsdoc生成JS API文档 具体的请看官网 https://github.com/krampstudio/grunt-jsdoc 一:首先确保本机电脑上是否已经安装了nodejs和np ...

  9. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

随机推荐

  1. glibc头文件和宏定义

    头文件没啥好说的,无非就是" "和< >的区别,这估计只要是学过C/C++的人都明白.现在的编译器对头文件的包含顺序没有要求,但老的C实现则不一样.当然,我们现在无需关 ...

  2. MVC 身份验证和异常处理过滤器

    :在Global中注册为全局过滤器,应用于所有的Controller的Action 参数类均继承自ControllerContext,主要包含属性请求上下文.路由数据.结果 using FilterE ...

  3. MVC 组件之间的关系

    View和Controller都可以直接请求Model 但是Model不依赖View和controller lController可以直接请求View来显示具体页面 View不依赖Controller ...

  4. C# TCP 通讯

    //接收 using System; using System.Collections.Generic;using System.ComponentModel;using System.Data;us ...

  5. Windows系统CPU内存网络性能统计第一篇 内存

    最近翻出以前做过的Windows系统性能统计程序,这个程序可以统计系统中的CPU使用情况,内存使用情况以及网络流量.现在将其整理一下(共有三篇),希望对大家有所帮助. 目录如下: 1.<Wind ...

  6. hexo-theme-next

    Hexo Next github主页:https://github.com/iissnan/hexo-theme-next 官网地址:http://theme-next.iissnan.com/ 一篇 ...

  7. C#最基本的数据库增删改查

    namespace access { public partial class Form1 : Form { //定义数据库的连接路径 string txtConn ="Provider=M ...

  8. uwp开发————换背景图片

    原文:uwp开发----换背景图片 用后台代码来实现对容器背景的切换,用本地图片作为背景. 把需要的图片素材放到Assets文件夹下 前台xaml代码如下: <Grid x:Name=" ...

  9. 《解读window核心编程》 之 进程

    1.         进程是执行文件的运行时形态.包括两部分:内核数据(对应内核对象).地址空间(包括执行文件代码和栈堆等动态内存). 2.         把VC的“系统-子系统”值删除掉,即不指定 ...

  10. 一份React-Native学习指南

    直击现场 学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集Rea ...