JavaScript Development Specification

JavaScript Development Specification

This article mainly introduces JS naming specification, annotation specification and some problems of framework development.

Directory

1. Naming conventions: Introduction of naming conventions for variables, functions, constants, constructors, members of classes, and so on

2. Annotation Specification: Introduction of single-line comments, multiline comments, and function annotations

3. Framework development: Introduction to global variable conflicts, single global variables, and namespaces

1. Naming conventions description of Hump-type nomenclature:

The camel-named method starts with a small (large) letter, followed by the first letter of each word capitalized.

According to whether the first letter is capitalized, divided into:

① Pascal Case Big Hump-type nomenclature : Capitalize first letter. Eg:Studentinfo,Userinfo,Productinfo

② Camel Case Small Hump-type naming method : lowercase first letter. Eg:studentinfo, userinfo, productinfo

1.1 Variables

naming method: The small hump-type naming method.

naming conventions: prefixes should be nouns. (the function's name prefix is a verb, which distinguishes between variables and functions)

naming suggestions: as far as possible in the name of the variable to reflect the type, such as: length, count and so on to represent the numeric type, but contains the name, title is expressed as a string type.

Example:

1234567

// 好的命名方式varmaxCount = 10;var tableTitle = ‘LoginTable‘; // 不好的命名方式var setCount = 10;vargetTitle = ‘LoginTable‘;

1.2 Functions

naming method: The small hump-type naming method.

naming conventions: prefixes should be verbs.

naming suggestions: You can use common verb conventions

Verb	Meaning	return value
Aa	Determine if an action (permission) can be performed	The function returns a Boolean value. true: executable; false: not enforceable
Has	Determine if a value is included	The function returns a Boolean value. True: contains this value; false: This value is not included
Is	Determine if a value is a	The function returns a Boolean value. True: is a value; false: Not a value
Get	Get a value	function returns a non-Boolean value
Set	Set a value	No return value, return set success, or Return chain object
Load	Loading some data	No return value or returns whether the completed result is loaded

Example:

123456789

// 是否可阅读functioncanRead() {    return true;} // 获取名称function getName() {    returnthis.name;}

1.3 Constants

naming method: name all uppercase.

Naming conventions: use uppercase letters and underscores to combine names and underscores to split words.

naming suggestions: none.

Example:

12	varMAX_COUNT = 10;varURL = ‘http://www.baidu.com‘;

1.4 Constructors

Description: in JS, the constructor is also part of the function, except that the new operator is used to create the object.

naming method: Large Hump-type naming method, capitalized first letter.

naming conventions: prefixes are names.

naming suggestions: none.

Example:

12345

functionStudent(name) {    this.name = name;} var st = newStudent(‘tom‘);

Members of Class 1.5

The members of the class contain:

① Public properties and methods: The same as the names of variables and functions.

② private properties and methods: The prefix is _ (underscore), followed by the same naming method as public properties and methods.

Example:

12345678910111213141516

functionStudent(name) {    var_name = name; // 私有成员    // 公共方法    this.getName = function() {        return_name;    }    // 公共方式    this.setName = function(value) {        _name = value;    }}varst = newStudent(‘tom‘);st.setName(‘jerry‘);console.log(st.getName()); // => jerry：输出_name私有变量的值

2. Annotation specification

JS supports two different types of annotations: single-line comments and multiline comments.

2.1 Single-line comment

Description: A single line comment starts with two slashes and ends at the end of the line.

syntax://This is a single-line comment

How to use:

① a single line://(double slash) leave a space between the comment text.

② Add a comment after the code://(double slash) leave a space between the Code and//(double slash) and a space between the comment text.

③ Comment Code://(double slash) leave a space between the code.

Example:

123456

// 调用了一个函数；1)单独在一行setTitle();var maxCount = 10; // 设置最大量；2)在代码后面注释// setName(); // 3)注释代码

2.2 Multi-line comments

Description: start with/* and end with */

Syntax:/* Comment Description */

How to use:

① if Start (/*) and end (*/) are on one line, a single-line comment is recommended.

② if at least three lines of comment, the first behavior/*, the last behavior */, the other lines start with a *, and the comment text and * Leave a space.

Example:

12345

/** 代码执行到这里后会调用setTitle()函数* setTitle()：设置title的值*/setTitle();

2.3 Function (method) comments

Note: the function (method) Comment is also a multi-line comment, but contains special annotation requirements, refer to Javadoc (Baidu Encyclopedia).

Grammar:

/**
* Function Description
* @ keyword
*/

frequently used comment keywords: (List only part, not all)

Comment Name	Grammar	Meaning	Example
@param	@param parameter name {parameter type} description information	Information describing the parameter	@param name {String} to pass in Names
@return	@return {return type} description information	Information describing the return value	@return {Boolean} true: executable; false: not enforceable
@author	@author author Information [affiliated information: such as mailbox, Date]	Information describing the author of this function	@author Zhang San 2015/07/21
@version	@version XX. Xx. Xx	Describes the version number of this function	@version 1.0.3
@example	@example Sample Code	Use of demo functions	@example settitle (' test ')

Example:

12345678910111213141516171819

/*** 合并Grid的行* @param grid {Ext.Grid.Panel} 需要合并的Grid* @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。* @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样* @return void* @author polk6 2015/07/21 * @example* _________________                             _________________* |  年龄 |  姓名 |                             |  年龄 |  姓名 |* -----------------      mergeCells(grid,[0])   -----------------* |  18   |  张三 |              =>             |       |  张三 |* -----------------                             -  18   ---------* |  18   |  王五 |                             |       |  王五 |* -----------------                             -----------------*/functionmergeCells(grid, cols, isAllSome) {    // Do Something}

3. Framework Development 3.1 global variable conflicts

When a team develops or introduces a third-party JS file, it sometimes causes the name conflict of the global object, such as A.js has a global function sendmsg (), B.js also has a global function sendmsg (), the introduction of A.js and b.js files, will cause sendmsg () function conflict.

Example:

3.2 Single Global variables

The global object name created is unique and adds all the function code to this global object. This global object is the entry point when calling the code that you write.

Such as:

* JQuery Global objects: $ and jquery

* ExtJS Global object: EXT

Example:

3.3 Namespaces

When the project is growing in size, the JS code can be normalized by namespace: The code is grouped by function and attached to a single global object in the form of a group.

Take Ext's Chart module for example:

Reference

[1] References: JAVASCRIPT development Specification Http://www.cnblogs.com/polk6/p/4660195.html

JavaScript Development Specification