示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] 一.問題描述 最近向一些同事推薦了網頁中實現流程圖繪製的工具庫 ，Community版 ...
目錄
示例代碼托管在：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工具介紹
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那樣將註釋語句單獨寫在一個文件中，因為是一個自動化工具，也沒什麼太多可講的，有需要的朋友直接瀏覽一下官網就可以很容易地使用了。
