一、命名规范
1. 变量
命名方法：小驼峰式命名法，首字母小写。studentInfo、userInfo
命名建议：使用英文单词组合，语义清晰
忌：var a=0;var nihao=true;
注明：无法用英文诠释的单词可使用首拼，例：var hkb={};//户口本
2. 常量
命名方法：全部大写，下划线分隔
命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词
例：var MAX_COUNT=10;
3. 函数
命名方法：小驼峰式命名法，首字母小写。isStudent、getUserInfo
命名建议：前缀最好为动词
4. 构造函数
说明：构造函数也属于函数的一种，只不过采用new 运算符创建对象
命名方法：大驼峰式命名法，首字母大写。
例：function Student(name){
this.name = name;
}
var st = new Student('tom');
5. 构造函数成员
说明：公共属性和方法：跟变量和函数的命名一样
二、注释规范
1. 单行注释
说明：单行注释以两个斜线开始，以行尾结束
注释位置：1、代码上方 2、代码右方
例如：
// 调用了一个函数
setTitle();
var maxCount = 10; // 设置最大量
2. 多行注释
/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
3. 函数注释
/** 开始，注此处两个星
* 以星号开头，紧跟一个空格，第一行为函数说明
* @param {类型} 参数 单独类型的参数
* @param {[类型|类型|类型]} 参数 多种类型的参数
* @param {类型} [可选参数] 参数 可选参数用[]包起来
* @return {类型} 说明
@author 作者 创建时间 修改时间（短日期）改别人代码要留名
* @example 举例（如果需要）
*/
常用类型 Array、Number、Int、Float、Boolean、Object、Null、Undefined、String、Void
例：
/**
* 获取树组件的数据
* @param {Int} id
* @return {Array} 返回此id下的数组
* @author jialong2018/5/5
* @example 例
* var list=getTreeListItemDataForId (23);
*/
getTreeListItemDataForId (id){
return [];
}
// 无参数无返回值的函数在函数上方书写单行注释
setTitle();
4. 未完成注释
// TODO
三、文件信息规范
1. 作者信息
<!--
by: longjia 2018/5/5
name: 商圈信息维护页面
notes: 页面说明
-->
2. 结构
<!--
by: longjia 2018/5/5
name: 商圈信息维护页面
notes: 页面说明
-->
class businessInforMaintain extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { }
方法
render() {
return ( )
}
}
export default businessInforMaintain
3. 模板规范
结构清晰、适当书写注释、禁止直接使用p、h、span标签，可添加class使用。
4. style样式规范
a) class采用驼峰命名，命名具有语义化（同变量命名规则）
b) 样式要有层级隶属关系，层次结构清晰
c) 适当添加注释
禁忌：
a) 没有层级结构，平铺直叙
b) 使用属性[ src=xxx ] 选择器，以及:nth选择器（:first-child、:last-child除外）
c) 非语义化的命名方式
d) 直接使用 p{ } \ a{} \ h{} div{} 的元素选择器
四、路由&组件规范
1. router.js
a)
import shopFeature from './routes/systemDataConfig/shopFeature';
<Route
path="systemDataConfig/shopFeature/" component={ shopFeature } />
2. src\services\test.js
{
"menuName": "系统数据配置",
"forwardUrl": "/systemDataConfig",
"id": "113",
"children": [
{
"menuName": "店面类型维护",
"forwardUrl": "/systemDataConfig/shopTypeMaintain/",
"id": "115"
},
{
"menuName": "商圈信息维护",
"forwardUrl": "/businessInforMaintain/businessInforMaintain/",
"id": "115"
}
]
},
五、项目规范
1. 接口表
a) 存放位置
src\services\interface.js
b) 内部规范
import url from './website';
level:{
lenovoshoplevels:url.lenovoStoreL+'/lenovoshoplevels' //店面级别
},;//接口对象
c) 接口对象规范
1. 保持和页面同样的层级结构（文件的名称）
2. 每个接口都需要带有注释
七、项目地址
项目GIT地址：http://gitlab.xpaas.lenovo.com/DLX/pcsd-bp-web-admin.git
项目测试地址：http://10.120.112.94
八、开发工具（Atom）常用插件
n Atom Beautify 代码格式化工具
n docblockr 文档化注释
n simplified-chinese-menu 简体中文语言包
n platformio-ide-terminal 终端工具
n atom-ternjs js,nodejs,es6补全，高度定制化
n autoclose-html 闭合html标签
n autoprefixer css浏览器兼容自动补全
n autocomplete-paths 填写路径的时候有提示
n file-icons file文件icons图标，文件图标
n minimap 代码缩略图
n color-picker 取色器