React 前端开发规范（执行版）

不念不忘少年蓝@ 2022-05-25 02:58 258阅读 0赞

一、命名规范

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

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 取色器

React 前端开发规范（执行版）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端开发规范【范本】

相关前端开发规范详解

相关 Vue前端开发规范

相关前端开发规范参考

相关前端开发规范

相关前端开发规范

相关前端开发规范总结

相关 React 前端开发规范（执行版）

相关前端开发命名规范

相关 React代码开发规范