SlideShare una empresa de Scribd logo
1 de 17
Descargar para leer sin conexión
Javascript代码注释及文档生
成
        jsdoc等文档相关工具介绍
                 by Bruce.liz
代码注释及文档的必要性
   一个优秀的js框架包括:
              1.健壮可扩展的架
                   构




      4.完善的                     2.良好的
                                Debug机
      文档系统
                                   制



              3. 多样的Unit Test
                   模块
代码注释及文档的必要性
   完善的文档有利于别人快速了解你的代
    码结构和使用方法,提高团队的开发效
    率。

   文档的自动化必不可少

但是JS作为一门松散型解释语言,多变
 的代码结构给文档自动化带来一定难
 度,            What’s
            the
有什么解决方案么?   solution???
自动文档系统的解决方案
   使用开源项目jsdoc-toolkit

优点:
 jsdoc-toolkit是基于java的文档生成系
  统,基于mogzilla的rhino项目
  (JDK1.6的ScriptEngine中已加入这
  feature),全部代码为js实现,懂得
  javascript的程序员就可以进行2次开
  发
自动文档系统的解决方案
    2jsdoc有良好的plugin机制和模板系
     统,
    便于生成使用与特定项目的文档,支持
    多语言。

   基于java可以快速集成到j2ee build环
    境中
JS注释规范
   基本注释:
    @author 作者
    @version 版本信息   {@link 连接目标}
    @param {变量类型} 变量名 注释描述
    @returns {返变量类型} 注释描述
    @type 变量类型      @throws {错误类
    型}
    @private        @public
    @constructor    @constant
    @class 类名 注释描述 @default
    @namespace       @ deprecated
JS注释规范
   Jdsoc辅助注释:
    @scope 类名         (闭包范围标记)
    @name                (标记名称)
    @memberOf 类型名       (成员标
    记)
    @ignore             (忽略标
    记)
    @static        (标记为静态变量)
    @event          (标记为事件函数)
    @extends 类名     (标明继承的父类)
    @example      (代码使用范例标
    记)
    ……
JS注释规范
    Meta Tags:
    /**#nocode+*/   (忽略代码开始标
     记)
    /**#nocode-*/   (忽略代码结束标
     记)
    /**#@+*/        (共享注释开始标
     记)
    /**#@-*/        (共享注释开始标
     记)
JS注释规范
   注意事项及技巧:
    /** */ 为jsdoc的注释上下文区域,如有
    非需要注释的被容请使用/* */或//或者
    使用nocode注释。

    对与可选参数或变量可将变量或参数名
    加[]表示optional。如:
    @{String} [pval]
JS注释规范
注意事项及技巧:
 对于函数参数变量可使用行注释
如:
    function foo(/**String*/arg0,/**Number*/arg1){}


等价于:
/**
 *@param {String} arg0
 *@param {Number} arg1
 */
function foo(/**String*/arg0,/**Number*/arg1){}
JS注释规范
   注意事项及技巧:
    Foo# 等价于 Foo.prototype

    对不能识别的闭包使用@scope声明作
    用域
JS注释规范
   注意事项及技巧:
    要充分利用jsdoc的代码伪注释机制,
    可以让jsdoc对不能识别的闭包区间或
    方法进行解析。(此为常用技巧,必须
    掌握)
jsdoc实战演示环节
   Let’s go!
关于jsdoc的二次开发改造
 Jsdoc主要逻辑为js代码因此前端程序
  员能很好的进行二次开发。
 本身jsdoc提供了plugin的机制,可以以
  插件形式在解析注释的时候加入自己的
  逻辑。
 Jsdoc的文档输出是基于JsPlate模板系
  统,
可以方便的定制html文档的输出格式。
……
Jsdoc实际使用时辅助工具
Jsdoc可配合eclipse的插件方便的使用
 注释。
如myeclipse8+或eclipse WTP
 (两者都使用的是JSDT的plugin,此插件
 也可单独安装,需要eclipse 3.6+)
项目实际使用设想
1.   对jsdoc进行改造,增加对现在FDEV
     的框架的适用性
2.   修改模板生成js的lib代码,辅助jsdt的
     lib import机制(类似java),方便于
     开发人员
3.   对FDEV类的framework采用整体build
     机制,对其它些common的widget类js
     文件采用在线文档生成和索引机制,
     方便分享
最后引言
要实现文档自动化离不开每个人的配
 合,希望大家能从繁琐的手写文档中解
 放出来,提高代码质量,更好的与别人
 分享代码

          Enjoy it! Thanks

Más contenido relacionado

Destacado

Javascript正则
Javascript正则Javascript正则
Javascript正则fangdeng
 
浅尝jQuery
浅尝jQuery浅尝jQuery
浅尝jQueryfangdeng
 
Html基础培训
Html基础培训Html基础培训
Html基础培训fangdeng
 
jQuery底层架构
jQuery底层架构jQuery底层架构
jQuery底层架构fangdeng
 
Building an event driven web
Building an event driven webBuilding an event driven web
Building an event driven webfangdeng
 
前端开发之Js
前端开发之Js前端开发之Js
前端开发之Jsfangdeng
 
Teaching Students with Emojis, Emoticons, & Textspeak
Teaching Students with Emojis, Emoticons, & TextspeakTeaching Students with Emojis, Emoticons, & Textspeak
Teaching Students with Emojis, Emoticons, & TextspeakShelly Sanchez Terrell
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerLuminary Labs
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsLinkedIn
 

Destacado (9)

Javascript正则
Javascript正则Javascript正则
Javascript正则
 
浅尝jQuery
浅尝jQuery浅尝jQuery
浅尝jQuery
 
Html基础培训
Html基础培训Html基础培训
Html基础培训
 
jQuery底层架构
jQuery底层架构jQuery底层架构
jQuery底层架构
 
Building an event driven web
Building an event driven webBuilding an event driven web
Building an event driven web
 
前端开发之Js
前端开发之Js前端开发之Js
前端开发之Js
 
Teaching Students with Emojis, Emoticons, & Textspeak
Teaching Students with Emojis, Emoticons, & TextspeakTeaching Students with Emojis, Emoticons, & Textspeak
Teaching Students with Emojis, Emoticons, & Textspeak
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
 

Similar a Javascript代码注释及文档生成

Django敏捷开发 刘天斯
Django敏捷开发 刘天斯Django敏捷开发 刘天斯
Django敏捷开发 刘天斯liuts
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2luolonghao
 
Js高级技巧
Js高级技巧Js高级技巧
Js高级技巧fool2fish
 
jsdoc-toolkit
jsdoc-toolkitjsdoc-toolkit
jsdoc-toolkitsatans17
 
Struts Mitac(1)
Struts Mitac(1)Struts Mitac(1)
Struts Mitac(1)wangjiaz
 
Struts学习笔记
Struts学习笔记Struts学习笔记
Struts学习笔记yiditushe
 
山頂洞人日記 - 回歸到最純樸的開發
山頂洞人日記 -  回歸到最純樸的開發山頂洞人日記 -  回歸到最純樸的開發
山頂洞人日記 - 回歸到最純樸的開發koji lin
 
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式Will Huang
 
J2ee经典学习笔记
J2ee经典学习笔记J2ee经典学习笔记
J2ee经典学习笔记yiditushe
 
Facebook android sdk research
Facebook android sdk researchFacebook android sdk research
Facebook android sdk researchwhykill
 
深入学习Mongo db
深入学习Mongo db深入学习Mongo db
深入学习Mongo dbLucien Li
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路luolonghao
 
第9章 t sql程序设计
第9章 t sql程序设计第9章 t sql程序设计
第9章 t sql程序设计hanmo1988
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路taobao.com
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)ziggear
 
MongoDB Basics and Tutorial
MongoDB Basics and TutorialMongoDB Basics and Tutorial
MongoDB Basics and TutorialHo Kim
 
开源应用日志收集系统
开源应用日志收集系统开源应用日志收集系统
开源应用日志收集系统klandor
 

Similar a Javascript代码注释及文档生成 (20)

Django敏捷开发 刘天斯
Django敏捷开发 刘天斯Django敏捷开发 刘天斯
Django敏捷开发 刘天斯
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2
 
Js高级技巧
Js高级技巧Js高级技巧
Js高级技巧
 
jsdoc-toolkit
jsdoc-toolkitjsdoc-toolkit
jsdoc-toolkit
 
Struts Mitac(1)
Struts Mitac(1)Struts Mitac(1)
Struts Mitac(1)
 
Struts学习笔记
Struts学习笔记Struts学习笔记
Struts学习笔记
 
SCJP ch02
SCJP ch02SCJP ch02
SCJP ch02
 
beidakejian
beidakejianbeidakejian
beidakejian
 
山頂洞人日記 - 回歸到最純樸的開發
山頂洞人日記 -  回歸到最純樸的開發山頂洞人日記 -  回歸到最純樸的開發
山頂洞人日記 - 回歸到最純樸的開發
 
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式
 
J2ee经典学习笔记
J2ee经典学习笔记J2ee经典学习笔记
J2ee经典学习笔记
 
Facebook android sdk research
Facebook android sdk researchFacebook android sdk research
Facebook android sdk research
 
深入学习Mongo db
深入学习Mongo db深入学习Mongo db
深入学习Mongo db
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路
 
第9章 t sql程序设计
第9章 t sql程序设计第9章 t sql程序设计
第9章 t sql程序设计
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
 
MongoDB Basics and Tutorial
MongoDB Basics and TutorialMongoDB Basics and Tutorial
MongoDB Basics and Tutorial
 
Php
Php Php
Php
 
开源应用日志收集系统
开源应用日志收集系统开源应用日志收集系统
开源应用日志收集系统
 

Más de fangdeng

J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架fangdeng
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验fangdeng
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit utfangdeng
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考fangdeng
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计fangdeng
 
Varnish简介
Varnish简介Varnish简介
Varnish简介fangdeng
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascriptfangdeng
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-developfangdeng
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期fangdeng
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期fangdeng
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式fangdeng
 
Datalazyload
DatalazyloadDatalazyload
Datalazyloadfangdeng
 
Request animateframe初探
Request animateframe初探Request animateframe初探
Request animateframe初探fangdeng
 
简鲜侠Websocket
简鲜侠Websocket简鲜侠Websocket
简鲜侠Websocketfangdeng
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式fangdeng
 
方凳激励体系(试行)
方凳激励体系(试行)方凳激励体系(试行)
方凳激励体系(试行)fangdeng
 
高性能Javascript
高性能Javascript高性能Javascript
高性能Javascriptfangdeng
 

Más de fangdeng (20)

J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit ut
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
 
Varnish简介
Varnish简介Varnish简介
Varnish简介
 
Websocket
WebsocketWebsocket
Websocket
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascript
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-develop
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
 
Datalazyload
DatalazyloadDatalazyload
Datalazyload
 
Request animateframe初探
Request animateframe初探Request animateframe初探
Request animateframe初探
 
简鲜侠Websocket
简鲜侠Websocket简鲜侠Websocket
简鲜侠Websocket
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
 
方凳激励体系(试行)
方凳激励体系(试行)方凳激励体系(试行)
方凳激励体系(试行)
 
高性能Javascript
高性能Javascript高性能Javascript
高性能Javascript
 

Javascript代码注释及文档生成