一、命名规范
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. 每个接口都需要带有注释
七、开发工具(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 取色器