如何查看jsplumb.js的API文檔(YUIdoc的基本使用)

目錄

• 一.問題描述
• 二. 處理方法
• 三. YUIdoc工具介紹

示例代碼託管在：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 -g 或yarn 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 的自動化文檔工具，能夠將javascript中jsdoc風格的註釋語句轉換成靜態網站式的離線文檔，因此你能夠經過定製模板來爲最終生成的文檔增長不一樣的主題樣式。jsdoc風格一般都會有IDE插件直接生成（vscode和sublime裏確定是有的，由於我本身每天用），最多見的是函數聲明註釋，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那樣將註釋語句單獨寫在一個文件中，由於是一個自動化工具，也沒什麼太多可講的，有須要的朋友直接瀏覽一下官網就能夠很容易地使用了。