JavaScript Development Specification

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

Catalogue

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:

Good naming way var maxCount = 10;var tabletitle = ' logintable ';//bad naming method var setcount = 10;var getTitle = ' 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
Can	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:

Whether you can read function CanRead () {    return true;} Gets the name function GetName () {    return this.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:

var max_count = 10;var URL = ' 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:

function Student (name) {    this.name = name;} var st = new Student (' 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:

function Student (name) {    var _name = name;//Private Member    //public method    This.getname = function () {        return _name;    }    //public mode    this.setname = function (value) {        _name = value;    }} var st = new Student (' Tom '); St.setname (' Jerry '); Console.log (St.getname ()); = Jerry: Output _name value of private variable

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:

A function is called; 1) Settitle () in a single row; var maxCount = 10; Set the maximum amount; 2) Comment//SetName () behind the code; 3) Comment Code

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:

The/** code executes here and calls the Settitle () function * Settitle (): Sets the value of the 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:

/*** the row that merges the grid * @param grid {Ext.Grid.Panel} needs to merge the grid* @param cols {array} needs to merge the index (ordinal) array of the columns, counting from 0, and the serial number is also included. * @param isallsome {Boolean}: Whether the 2 TR cols must be completed in order to be merged. True: Complete the same; False (default): Not exactly the same * @return void* @author polk6 2015/07/21  * @example * _________________                             _____________ ____* |  Age |  name |                             |  Age |  Name |*-----------------      mergecells (grid,[0])   -----------------* |   |  Zhang San |              =             |       |  Zhang San | *-----------------                             -   ---------* |   |  Harry |                             |       |  Harry |*-----------------                             -----------------*/function mergecells (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:

================================== Series article ==========================================

This article: 3.10 JavaScript Development Specification

Web Development Road Series articles

JavaScript Development Specification