"Go" jsduck: Front-end document generation tool Jsduck introduction and installation Use

Making front-end programs more maintainable is a cliché, and most of the time we focus on application-level code maintainability, such as OO, modularity, MVC, coding specifications, extensibility, and reusability, but this is something that needs to be considered at the design level, and maintainability should include another aspect, is also a lot of coder easy to ignore the place, is to write their own program in the form of a document precipitation, to their own work has a structured organization, can also help others.

Think of the following:
1, the team joined the new classmate, then he may need to quickly the current project has a systematic understanding of the existing program, such as: the use of a common tool module, the interface of a common component, the dependencies between programs, then he only to see the source code and comments.
2, the team has a classmate left, but he wrote the program has been deep into the project at all levels, the most understand and can quickly modify the maintenance of these programs may only him, then in the iteration of its link, the other students can only be wistfully.
3, I wrote a good reusable components, intends to promote to the team, when others need to use their own components when they have to see the source code and comments.

At this time, if everyone has a documented interpretation of their own program, it can be a great relief to the above problems, usually the documentation needs of the program only exist in large projects or the framework of a mature system, for the front end of the most often want to use documents to display and precipitate their own knowledge of the results, The lack of a well-established and fast-consistent solution has led to a prohibitive level of time when it comes to procedural documentation.

There has long been a lack of a decent documentation tool for front-end developers, even though YUI DOC and JSDoc have been there before, but these tools have always been difficult to free developers from complex configurations, allowing developers to quickly forget about them.

If you have an understanding of Sencha's ExtJS and Sencha Touch Development framework, you should be impressed with the API documentation for them, rich application patterns and tree node namespace management, to avoid the YUI DOC and Jqeury API as long as the page to bring the complex , and the additional learning paradigm in the documentation can help beginners get started as quickly as possible, generating such a powerful API document using Jsduck, which is not only very simple to use and configure, but also the UI and interaction of the document is currently the most user friendly for developers.

1. Jsduck Introduction

Jsduck is one of Senchalabs's many open source projects, which are JavaScript API document generators written in Ruby.

The Jsduck strength function points are as follows:

• Tree-like namespace organization
• Hierarchical system presentation of class-Parent relationships
• Quick indexing of members and events and configuration items
• Sample code can be illustrated and edited with sample coloring code
• Class member source code implementation part of the rapid navigation

2. Installing Jsduck

First download the latest version of the binary version on GitHub, after downloading only one EXE file, this file has been bundled with the Ruby interpreter, do not need to install separately, Rename the downloaded file to Jsduck.exe and add the path to the file in the path variable of the environment variable in windows so that the Jsduck can be called directly to Jsduck.exe when the command line is entered.

Note that the specification needs to end with "/**" and "*/", type "/**" in an IDE such as Eclipse or Aptana to support JAVADOC or JSDOC and press ENTER to generate a comment block that conforms to the document health standard, if you use Spketide, the comment block generates a can also help developers automatically name function parameters.

Here are some common tags for annotations:

• @author: Author
• @class: Class
• @deprecated: Marking this method property or class is deprecated and is particularly useful when upgrading a transition to be compatible with the previous API.
• @example: Add a code example to a class or method, Jsduck not only coloring the code, but also generating a code editor for the code, previewing the code in real time, and using @example to indent four spaces.
• @extends: Marks a class that inherits from another class, and generates a type inheritance system that is displayed on the right side of the document view.
• @cfg: The constructor's configuration item followed by "{ClassName}" followed by the parameter name.
• Example: @cfg {String} fieldname a description of the configuration item.
• @return: Similar to @cfg, marks a return type after a function member has been called.
• Example: @return {number} literal description
• @param: Similar to @cfg, a function member is labeled with its desired parameter type and description, and if the parameter type is multiple, it can be split with "/", and a "[Param.member]" descriptor can be used if the parameter needs to be described in more detail.
• Example: @param {number/string} fieldName
• Example: @param {string[]} fieldName
• Example:/**
  * @cfg {Object} opt
  * @cfg {number} [Opt.age]
  * @cfg {number} [opt.name=0]
  */
• @event: Marks an event followed by the @param tag to the description of the event callback function declaration parameter.
• @inheritdoc: After following the class#member, it is common to use a subclass comment block to continue using the parent class comment after the child class overrides the parent class member.
• @private: Marks a member as private, although there are @public but is public if not specifically marked.
• @protected: Marks a member as protected.
• @static: The members are marked as static, and static members are also categorized in the document.
• @img: Link a picture in a document comment to make the document more readable.
• @link: Marks the anchor point of a class or class member in a document comment.

Documenting your project not only makes it worthwhile for the front end to write their own annotation changes, but also provides a great convenience for post-project maintenance, and plays a vital role in a collaborative combat environment.

"Go" jsduck: Front-end document generation tool Jsduck introduction and installation Use