React 前端开发规范（执行版）
一、命名规范
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. 作者信息
2. 结构
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';
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 取色器