惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Application and Cybersecurity Blog
Application and Cybersecurity Blog
L
LINUX DO - 热门话题
V
Vulnerabilities – Threatpost
S
Secure Thoughts
The GitHub Blog
The GitHub Blog
Security Latest
Security Latest
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
P
Palo Alto Networks Blog
O
OpenAI News
L
LINUX DO - 最新话题
C
Cyber Attacks, Cyber Crime and Cyber Security
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
P
Privacy & Cybersecurity Law Blog
AWS News Blog
AWS News Blog
S
Security @ Cisco Blogs
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Y
Y Combinator Blog
Cloudbric
Cloudbric
H
Heimdal Security Blog
Microsoft Security Blog
Microsoft Security Blog
V2EX - 技术
V2EX - 技术
博客园_首页
Cisco Talos Blog
Cisco Talos Blog
D
DataBreaches.Net
T
Troy Hunt's Blog
博客园 - 叶小钗
M
MIT News - Artificial intelligence
Latest news
Latest news
Webroot Blog
Webroot Blog
S
Security Affairs
Martin Fowler
Martin Fowler
T
Tailwind CSS Blog
C
Check Point Blog
The Last Watchdog
The Last Watchdog
Microsoft Azure Blog
Microsoft Azure Blog
V
Visual Studio Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
云风的 BLOG
云风的 BLOG
aimingoo的专栏
aimingoo的专栏
爱范儿
爱范儿
Vercel News
Vercel News
The Register - Security
The Register - Security
阮一峰的网络日志
阮一峰的网络日志
L
Lohrmann on Cybersecurity
J
Java Code Geeks
L
LangChain Blog
腾讯CDC
I
InfoQ
博客园 - 三生石上(FineUI控件)
C
CERT Recently Published Vulnerability Notes

博客园 - Roy Zhang

让文档和Demo生成更加简单和强大 - SmartDoc 0.1.1 说明 SmartDoc(YUIDoc) 注释编写 smartjs - DataManager 场景示例分析 - 数据懒加载 smartjs - DataManager API smartjs 0.3 DataManager 发布&介绍 SmartJS 系列规划分享和背景介绍 smartjs 0.2 OOP讲解 - factory smartjs 0.2 OOP讲解 - Klass 类继承 smartjs 0.2发布 - 新增oop模块&AOP增强 smartJS 0.1 API 讲解 - FlowController smartJS 0.1 API 讲解 - Trigger smartJS 0.1 API 讲解 - PromiseEvent SmartJS 第一期(0.1)发布 - AOP三剑客 SmartUI2.0后续声明 JQuery SmartUI 2.0 方案启动 JQuery Smart UI 开发规范&API文档发布 JQuery Smart UI与Moss结合演示 JQuery Smart UI 快捷开发实例应用(二)— 开发模式【从项目开发流程说起】 告别aspx,高性能快捷开发 — JQuery Smart UI 快捷开发实例应用(一)入门【后篇】
JS文档和Demo自动化生成工具 - SmartDoc发布
Roy Zhang · 2014-10-08 · via 博客园 - Roy Zhang

  曾几何时,当你码神附体,一路披荆斩棘的完成代码后,带着“一码在手,天下我有”的傲然环顾之时,却发现单元测试、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区域的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页面


在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,后面会写两篇介绍如何写注释的经验

SmartDoc的GitHub地址

使用SmartDoc生成的SmartJS API地址