ReactNaive开发规范

修订日期	修订内容	版本号	修订人
2017.9.26		V1.0	XXX
2017.11.15	RN升级到0.50版本，app入口修改	V1.1	XXX

 

一、编程规范

1)      命名规则

a)         【强制】不能用‘$’或‘_’开始/结束

b)         【强制】严禁用拼音命名，请用有含义的英文单词

c)         【强制】类名：首字母大写的驼峰形式，比如LoginPage/MsgPage

d)         【强制】方法名，参数名，成员变量，局部变量：首字母小写的驼峰形式，比如localValue / getHttpMessage() / inputUserId

e)         【强制】常量：

•  全字符大写，下划线分割，使用明确的单词，不嫌名字长。正例: MAX_STOCK_COUNT 反例: MAX_COUNT
• 先定义，后使用
• 常量类按照功能分不同文件维护，比如配置相关的放在ConfigConsts.js里。

f)          【强制】周知的可缩写的单词，使用缩写，比如userMsg 好于 userMessaage, userPic 好于userPicture

g)         【强制】文件夹：名字无论多长，都小写。

2)      格式规则

a)         【推荐】推荐使用三目运算符，替换if/else

b)         【推荐】尽量不要在if条件中加入过多的判断，这样会增加代码阅读难度和bug产生

c)         【强制】在一个 switch 块内，每个case要么通过 break/return 等来终止，要么注释说明程序将继续执行到哪一个case 为止;在一个 switch 块内，都必须包含一个default 语句并且 放在最后，即使它什么代码也没有

d)         【强制】空格的使用：

•   if/for/while/switch/do等保留字与左右括号之间都必须加空格
•   任何运算符左右必须加一个空格
•   缩进采用 4 个空格，禁止使用tab 字符
•   方法参数在定义和传入时，多个参数逗号后边必须加空格

onMsgByCallAndMsg=(msg, title, type)=>{

     this.setState({

         callMsgAndMsg:msg

     })

 }

e)         换行的使用

•    运算符与下文一起换行
•    方法调用的点符号与下文一起换行
•    在多个参数超长，逗号后进行换行
•   【推荐】方法体内的执行语句组、变量的定义语句组、不同的业务逻辑之间或者不同的语义之间用一个空行分割。
•   【强制】使用链式调用的时候，每个方法都要换行

const path = Path()

        .moveTo(0, -radius/2)

         .arc(0,radius, 1)

         .arc(0,-radius, 1)

        .close();

3)      package.json

a)         【强制】使用npm下载组件的时候，必须在命令结尾添加 –save，确保下载的组件关联在package.json中。其他成员更新代码或者下载后，使用npmi就可以获取必要的组件。

b)         【强制】使用git或者GitHub管理代码版本时，不要上传node_module文件。

c)         【强制】必须配置readme文件，说明配置相关或者注意事项。

d)         【推荐】使用npm，推荐使用~标记版本。第三方组件可以使用最新的，RN库使用约定的版本

4)      注释规则

a)         【强制】所有js文件都要有头部注释，具体同js开发规范（必要：开发者，开发时间，文件用途）

b)         【强制】所有方法要有注释，具体同js开发规范（必要：参数说明，返回说明）

c)         【强制】所有的常量，都要有注释，说明用途

d)         【参考】注释掉的代码，要配合必要的说明。说明这些代码是之后还用，还是完全废弃，或其他原因。完全废弃的代码建议删掉，代码仓库会有备份。

e)         【参考】多人开发同一文件，每个人写的代码，添加注释的时候写明修改人。

5)      日志规则

a)         【推荐】console.log()可以作为调试的手段，但是会消耗性能，确定代码无误后建议删除。推荐使用下面的方法。

b)         RN中有一个全局变量__DEV__用于指示当前运行环境是否是开发环境。可以使用下面的代码判断环境，如果是打包发布，所有的log都替换成空函数，开发时则可以正常使用。

if (!__DEV__) {

   global.console= {

     info: ()=> {},

     log: ()=> {},

     warn: ()=> {},

     error: ()=> {},

   };

 }

6)       

 

二、RN项目目录结构规范

    以下目录结构示例中只展示js与静态资源，不包含原生代码。在components和pages文件夹中，可以为一些高内聚的模块再细分目录

├── index.js    项目入口

├──app.js          路由入口

└── app

├── components                                     组件，其中文件用Component结尾

    ├── purecomponent                                 无状态组件，组件内部没有state，可以使用props进行属性值控制。

    ├── pages                                              完整页面，就是路由配置使用的页面。其中文件用Page结尾

    ├── config                                配置项（常量、接口地址、路由、多语言化等预置数据）

    ├── utils                                                   工具项（非UI组件)

    ├── style                                                   全局样式库

├── resources                                           资源文件夹，可以包含图片，音频，视频，静态json文件等。

├── actions                                                             redux（可选是否使用）

    ├── reducers                                             redux

    ├── store                                                  redux

    └── constant                                            redux

 

三、RN页面开发规范

1)      state，props

a)         【强制】代码中初始化state在constructor(props)方法中，对每个变量进行注释

b)         【强制】代码中使用setState，异步会导致问题，尽量使用回调函数。

this.setState({

        //todo

     },()=>{

        //执行setState后执行此函数

     })

c)         【强制】代码中使用props，需进行propTypes检测和defaultProps默认值初始化

static propTypes = {

         color:PropTypes.string,

        dotRadius: PropTypes.number,

         size:PropTypes.number

     };

 

 staticdefaultProps = {

         color:'#1e90ff',

        dotRadius: 10,

         size: 40

     };

d)         【强制】代码中，除组件原有方法，其他自定义方法强制使用箭头函数；自定义方法调用的时候，需要绑定this

//原有放阿飞

constructor(props){

    super(props);

};

//自定义方法

goMainPage=()=>{

   

};

e)         【推荐】初始化的数据，配置信息，推荐在componentWillMount中初始化

f)          【强制】代码中使用了定时器，监听，必须在组件componentWillUnmount销毁或者清除

g)         【强制】使用本地图片，必须设置宽高并进行适当适配。

h)         【强制】在RN版本小于46时，配置不同尺寸的屏幕，需要引入不同尺寸的图片，图片用@结尾。

i)            

2)      样式规则

a)         【强制】样式属性大于等于三个的时候，使用StyleSheet创建样式属性。小于三个，可以使用行内样式

b)         【推荐】建立全局样式文件，管理公用样式，这点同web开发

3)      var let  const

a)         【强制】常量使用const。const定义的常量，不能修改，修改会报错

b)         【推荐】变量使用let。Let定义的变量，定义之前不能使用，会报错

4)      语法

a)         【强制】使用ES6语法

 

 

 

 

四、RN页面开发规范

1)      组件引用，变量定义

a)         【强制】react组件，react-native组件优先，npm组件第二，自定义组件最后

b)         【强制】变量，常量的初始化，放在组件引用之后。

c)         【推荐】没有使用的组件和变量，常量，推荐及时删除

2)      项目入口

a)         【强制】0.50版本之后，index.js为app入口，和index.js平级的app.js为程序（路由）入口

b)         【强制】RN开发，不要使用任何后端开发模式，比如MVC，MVVC等。RN推荐组件化，颗粒化，后端模式和这个原则相违背。如果使用redux框架，则使用它的结构

五、 版本升级&代码迁移策略

1)          【强制】APP在未发布或者正常使用时，请使用最新版本和组件。

2)          【强制】当低版本APP进行迭代升级时，需进行版本升级时，必须进行代码备份。同时，新建同名最新版本项目，进行相关代码迁移和功能配置。

2)

六、 其他

1)      【推荐】使用ESLint检查代码错误

七、 备用