1. Naming convention
1. Variables
Naming method: small camel case, the first letter is lowercase. studentInfo, userInfo
Naming suggestion: Use English word combinations with clear semantics
忌 ： var a = 0; var nihao = true;
Note: Words that cannot be interpreted in English can use the first spelling, for example: var hkb={};//Hukou book
2. Constants
Naming Method: All uppercase, separated by underscores
Naming conventions: Use capital letters and underscores to combine names, and underscores to separate words
例：var MAX_COUNT=10;
3. Function
Naming method: small camel case, the first letter is lowercase. isStudent, getUserInfo
Naming Suggestions: Prefixes are best with verbs
4. Constructor
Note: Constructor is also a type of function, but the new operator is used to create an object
Nomenclature: CamelCase, capitalized.
例：function Student(name){
this.name = name;
}
var st = new Student ('empty');
5. Constructor members
Description: public properties and methods: the same as the names of variables and functions
2. Annotation specification
1. Single-line comments
Description: A single-line comment starts with two slashes and ends with the end of the line
Comment position: 1. Above the code 2. To the right of the code
E.g:
// called a function
setTitle();
var maxCount = 10; // set max count
2. Multi-line comments
/*
* The setTitle() function will be called after the code is executed here
* setTitle(): Set the value of title
*/
3. Function comments
/** Start, note two stars here
* Start with an asterisk, followed by a space, the first line is the function description
* @param { type } parameter parameters of individual types
* @param { [ type | type | type ] } parameter multiple types of parameters
* @param {type} [ optional parameters ] parameters optional parameters are wrapped in []
* @return {type} description
@author author creation time modification time (short date) to change other people's code to leave a name
* @example example (if needed)
*/
Common types Array, Number, Int, Float, Boolean, Object, Null, Undefined, String, Void
example:
/**
* Get the data of the tree component
* @param {Int} id
* @return {Array} returns the array under this id
* @author jialong2018/5/5
* @example example
* var list=getTreeListItemDataForId (23);
*/
getTreeListItemDataForId (id) {
return [];
}
// Functions with no parameters and no return value write a single-line comment above the function
setTitle();
4. Unfinished Notes
// EVERYTHING
3. Specification of file information
1. Author information
<!--
by: longjia 2018/5/5
name: Business district information maintenance page
notes: page notes
-->
2. Structure
<!--
by: longjia 2018/5/5
name: Business district information maintenance page
notes: page notes
-->
class businessInforMaintain extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { }
method
render() {
return ( )
}
}
export default businessInforMaintain
3. Template Specification
The structure is clear, the comments are appropriately written, and the direct use of p, h, span tags is prohibited, and classes can be added for use.
4. style style specification
a) The class is named in camel case, and the naming is semantic (same as variable naming rules)
b) The style must have a hierarchical affiliation with a clear hierarchical structure
c) Annotate as appropriate
Taboo:
a) No hierarchical structure, flat and straightforward
b) Use attribute [ src=xxx ] selectors, and :nth selectors (except :first-child, :last-child)
c) Non-semantic naming
d) directly use the element selector of p{ } \ a{} \ h{} div{}
4. Routing & Component Specifications
1. router.js
a)
import shopFeature from './routes/systemDataConfig/shopFeature';
<Route
path="systemDataConfig/shopFeature/" component={ shopFeature } />
2. src\services\test.js
{
"menuName": "System Data Configuration",
"forwardUrl": "/systemDataConfig",
"id": "113",
"children": [
{
"menuName": "Storefront Type Maintenance",
"forwardUrl": "/systemDataConfig/shopTypeMaintain/",
"id": "115"
},
{
"menuName": "Business district information maintenance",
"forwardUrl": "/businessInforMaintain/businessInforMaintain/",
"id": "115"
}
]
},
5. Project Specifications
1. Interface table
a) Storage location
src\services\interface.js
b) Internal Specifications
import url from './website';
level:{
lenovoshoplevels:url.lenovoStoreL+'/lenovoshoplevels' //Store level
},;//Interface object
c) Interface Object Specification
1. Keep the same hierarchy as the page (the name of the file)
2. Each interface needs to be annotated
7. Project address
Project GIT address: http://gitlab.xpaas.lenovo.com/DLX/pcsd-bp-web-admin.git
Project test address: http://10.120.112.94
Eight, development tools (Atom) commonly used plug-ins
n Atom Beautify code formatting tool
n docblockr documentation comments
n simplified-chinese-menu Simplified Chinese language pack
n platformio-ide-terminal terminal tool
n atom-ternjs js, nodejs, es6 completion, highly customized
n autoclose-html closes the html tag
n autoprefixer css browser compatible auto-completion
n autocomplete-paths prompts when filling in the path
n file-icons file file icons, file icons
n minimap code thumbnail
n color-picker color picker