微信公眾號(hào)：lmlweb
一個(gè)分享前端技術(shù)、面試問題的小小公眾號(hào)，你的關(guān)注都可以讓號(hào)主開心一整天，嘻嘻;
如果你覺得寫的文章對(duì)你有幫助，歡迎關(guān)注我的簡(jiǎn)書號(hào)和微信公眾號(hào)[1]
文章概述
這篇文章介紹jsdoc的概念以及它的應(yīng)用場(chǎng)景，就是學(xué)習(xí)它到底香不香，當(dāng)然香不香還是得看個(gè)人，看自己的需求。
內(nèi)容目錄
JSDoc是什么？
Jsdoc的應(yīng)用場(chǎng)景
Jsdoc應(yīng)用場(chǎng)景的簡(jiǎn)單實(shí)例
相關(guān)學(xué)習(xí)資料
關(guān)注我
JSDoc是什么？
JSDoc是一個(gè)根據(jù)javascript文件中注釋信息，生成JavaScript應(yīng)用程序或庫(kù)、模塊的API文檔 的工具。你可以使用他記錄如：命名空間，類，方法，方法參數(shù)等。類似JavaDoc和PHPDoc?，F(xiàn)在很多編輯器或IDE中還可以通過JSDoc直接或使用插件生成智能提示。從而使開發(fā)者很容易了解整個(gè)類和其中的屬性和方法，并且快速知道如何使用，從而提高開發(fā)效率，降低維護(hù)成本。
Jsdoc的應(yīng)用場(chǎng)景
通過上面對(duì)Jsdoc的介紹就可以大概看出它的應(yīng)用場(chǎng)景了，如下，是我自己簡(jiǎn)單的歸納
- 生成開發(fā)
js或ts（尤其是）項(xiàng)目的接口文檔 - 通過Jsdoc優(yōu)化你的前端編輯器的代碼提示功能
Jsdoc應(yīng)用場(chǎng)景的簡(jiǎn)單實(shí)例
-
使用Jsdoc生成接口文檔
寫一個(gè)demo，如下：
/***Book類，代表一個(gè)書本. *@constructor *@param {string} title - 書本的標(biāo)題. *@param {string} author - 書本的作者.**/ function Book(title, author) { this.title=title; this.author=author; } Book.prototype={ /** * 獲取書本的標(biāo)題 * @returns {string|*} */ getTitle:function(){ return this.title; }, /** * 設(shè)置書本的頁(yè)數(shù) * @param pageNum {number} 頁(yè)數(shù) */ setPageNum:function(pageNum){ this.pageNum=pageNum; } };使用Jsdoc工具生成的接口文檔如下：
text<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">text</figcaption>
2.vscode配合Jsoc優(yōu)化代碼提示
Jsdoc注釋代碼
export class CommonUtilsWX {
/**
* 發(fā)送網(wǎng)絡(luò)請(qǐng)求，通信協(xié)議必須是http或https，數(shù)據(jù)協(xié)議必須是json
* @param {object} o 請(qǐng)求參數(shù)對(duì)象
* @param {string} o.host 請(qǐng)求url的域名，如http://xxx.xxx.com
* @param {string} o.path 請(qǐng)求url的路徑，如xxx/xxx
* @param {object} o.query 請(qǐng)求url的查詢段，根據(jù)對(duì)象中key，value拼成key1=value1&key2=value2的形式
* @param {string} o.method 請(qǐng)求方法，如GET，POST等
* @param {object} o.body 請(qǐng)求數(shù)據(jù)體，僅在method為POST時(shí)有效
* @param {function(Error):void} callback 請(qǐng)求回調(diào)，請(qǐng)求成功時(shí)error為空 */
request(o, callback){ //TODO:xxxxx }}
實(shí)現(xiàn)效果
相關(guān)學(xué)習(xí)資料
關(guān)于文檔中文手冊(cè)可以自己去找，這里分享兩篇Jsdoc入門使用文章
下一篇文章會(huì)介紹vscdoe如何配置智能提示，感興趣的小伙伴可以點(diǎn)個(gè)關(guān)注。
關(guān)注我
如果你覺得這篇文章對(duì)你有幫助的話，不妨小小關(guān)注或者是點(diǎn)贊一下，你的關(guān)注是我繼續(xù)寫文章的巨大動(dòng)力，阿里嘎多！
