曾幾何時，當你碼神附體，一路披荊斬棘的完成代碼后，帶着“一碼在手，天下我有”的傲然環顧之時，卻發現單元測試、API文檔、Demo實例陸續向你砸來，頓時有木有一種冰水挑戰后的感覺。而這時你應該：喲喲，快使用SmartDoc；
SmartDoc， 一個基於NodeJS的自動化文檔生成工具，她擁有明眸的雙眼(yuidoc引擎)，華麗的外衣（bootstrap 3風格），靈巧的雙手（demo生成，codemirror代碼編輯，jasmine接口兼容）;擁有她，相信你一定會仰天長嘯："小伙伴們再也不用擔心我的API了。“
最近有不少朋友問我SmartJS的一些API，我使用YUIDoc和bootstrap2的那個主題全部整理了一遍，但發現只有API沒有具體例子也比較難懂，而且沒有幾個人會看單元測試。遂起念，將文檔、單元測試、demo整合提供完整的生成方案，這就有了SmartDoc。
SmartDoc 0.1.0 新鮮上架
具有以下特點：
* 基於Bootstrp3構建，排版和樣式美化 * 支持html和js的Demo生成,與查看 * 提供在線的demo編輯頁面（類似於jsfiddler） * 同步jasmine的expect接口，使得單元測試與example的代碼能夠復用 * 可以配置化增強 - 項目信息配置；Document頁面導航配置；demo依賴庫配置 * 提供全局api查詢和導航過濾功能，篩選更加便利 * 提供grunt插件 - grunt-contrib-smartdoc
界面講解
全局過濾
通過右側全局過濾，可以快速檢索所有的API，點擊可以跳轉到API頁面並定位到對於的位置；支持全鍵盤操作
源代碼展示
點擊代碼位置的鏈接，就可以進入源代碼展示頁面
Example演示頁面
Example演示頁面
點擊Example區域的Edit Code按鈕開啟代碼編輯頁面，如下：
頁面中有HTML和Code兩個編輯區域和結果的展示區域，代碼編輯器使用codemirror，sublime風格，支持智能感知，可以通過配置項來引入樣式和腳本庫。
提供log和expect公共方法；
log：在結果區輸出日志信息
expect ：兼容jasmine的expect方法
在example區域中寫入html代碼時，使用<html>html代碼</html>和<script>js代碼<script>的格式錄入即可；
注1：代碼編輯頁面必須需要服務器環境才能正常運行，本地文件方式只能使用view demo頁面查看結果；
View Demo頁面
View Demo頁面
在Example區域點擊view demo按鈕或者在code edit頁面點擊view in new window進入；
頁面上展示最終結果
單獨使用說明
單獨使用說明
在目錄中加入docConfig.js文件，詳細配置如下:
module.exports = { //掃描的文件路徑 paths: ['input/'], //文檔頁面輸出路徑 outdir: 'doc/', //項目信息配置 project: { //項目名稱 name: 'SmartDoc', //項目描述，可以配置html，會生成到document主頁 description: '<h2>SmartDoc</h2> <p>Javascript Document builder base on YUIDoc.</p>', //版本信息 version: '1.1.0', //地址信息 url: 'https://github.com/zhh77/smartjs', //logo地址 logo : 'https://github.com/zhh77/logo.png', //導航信息 navs: [{ name: "Home", url: "https://github.com/zhh77/smartjs" }, { name: "Document", url: "" }, { name: "About", url: "https://github.com/zhh77/smartjs" }] }, //demo展示頁面配置；需要加載的資源； 資源只能是css和js文件 demo: { //外部資源鏈接 link : ['http://code.jquery.com/jquery-1.11.0.min.js'], //文件復制路徑; 將目下的資源復制到doc生成目錄中，並在deom頁面引用 paths : ['input/ui/uicode.js','input/'] //是否開啟在code編輯器中的自動完成功能(會將link和paths的引入加入)；默認開啟； autoComplete : true }, //自定義主題路徑 themedir: 'theme/', //自定義helpers helpers: ["theme/helpers/helpers.js"] };
運行如下代碼：
npm install -g smartdoc
smartdoc
grunt使用
如果是grunt的話引入grunt-contrib-smartdoc，在grunt配置上述docconfig內容；例如：
// 項目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), smartdoc: { build: { options: { paths: ['src/'], outdir: 'doc/', demo: { paths: ['dest/smart.js','dest/smart-dataManager.js'], link: ['http://code.jquery.com/jquery-1.11.0.min.js'] }, //項目信息配置 project: { name: '<%= pkg.name %>', // description: '<%= pkg.description %>', version: '<%= pkg.version %>', url: 'https://github.com/zhh77/smartjs', navs: [{ name: "Home", url: "https://github.com/zhh77/smartjs" }, { name: "Document", url: "http://zhh77.github.io/smartjs/" }, { name: "Blog", url: "http://www.cnblogs.com/zhh8077" }, { name: "SmartDoc", url: "https://github.com/zhh77/smartDoc" }] } } } }, …………
結尾
SmartDoc 第一版重點在對YUIDoc的增強以及主題的美化，后面有時間會對YUIDoc的掃描規則做優化（yuidoc對於module的掃描還存在不少問題）；
目前還是使用YUIDoc的注釋規則，更多信息可以查看YUIDoc，后面會寫兩篇介紹如何寫注釋的經驗