设为首页 加入收藏

TOP

React Native中的约束规范(二)
2017-10-11 14:01:12 】 浏览:7952
Tags:React Native 约束 规范
() ... else if( )...else...

方式表达逻辑,【强制】请勿超过3层, 超过请使用状态设计模式。 正例:逻辑上超过 3 层的 if-else 代码可以使用卫语句,或者状态模式来实现。

4.【推荐】使用三目运算,替换if else结构,精简代码

let account=5; if(account>10){ console.log("true"); }else { console.log("false"); } let msg=account>10?"true":"false"; 

5.【推荐】除常用方法(如 getXxx/isXxx)等外,不要在条件判断中执行其它复杂的语句,将复 杂逻辑判断的结果赋值给一个有意义的布尔变量名,以提高可读性。 说明:很多 if 语句内的逻辑相当复杂,阅读者需要分析条件表达式的最终结果,才能明确什么 样的条件执行什么样的语句,那么,如果阅读者分析逻辑表达式错误呢?

 //伪代码如下 boolean existed = (file.open(fileName, "w") != null)&& (...) || (...); if (existed) { ... } 

###(六) 注释规约

  1. 【强制】类、类属性、类方法的注释必须使用 Javadoc 规范,使用/*内容/格式,不得使用 //xxx 方式; 说明:在 IDE 编辑窗口中,Javadoc 方式会提示相关注释,生成 Javadoc 可以正确输出相应注释;在 IDE 中,工程调用方法时,不进入方法即可悬浮提示方法、参数、返回值的意义,提高阅读效率。

  2. 【强制】所有的类都必须添加创建者信息,以及类的说明;

  3. 【强制】方法内部单行注释,在被注释语句上方另起一行,使用//注释; 方法内部多行注释使用/* */注释,注意与代码对齐。

  4. 【强制】所有的常量类型字段必须要有注释,说明每个值的用途;

  5. 【参考】注释掉的代码尽量要配合说明,而不是简单的注释掉。 说明:代码被注释掉有两种可能性: 1)后续会恢复此段代码逻辑。 2)永久不用。前者如果没有备注信息,难以知晓注释动机。后者建议直接删掉(代码仓库保存了历史代码)。

  6. 【参考】对于注释的要求: 第一、能够准确反应设计思想和代码逻辑; 第二、能够描述业务含义,使别的程序员能够迅速了解到代码背后的信息。完全没有注释的大段代码对于阅读者形同 天书,注释是给自己看的,即使隔很长时间,也能清晰理解当时的思路;注释也是给继任者看的,使其能够快速接替自己的工作。

  7. 【参考】好的命名、代码结构是自解释的,注释力求精简准确、表达到位。避免出现注释的一个极端:过多过滥的注释,代码的逻辑一旦修改,修改注释是相当大的负担。

  8. 【参考】特殊注释标记,请注明标记人与标记时间。注意及时处理这些标记,通过标记扫描,经常清理此类标记。

  1. 待办事宜(TODO):( 标记人,标记时间,[预计处理时间]) 表示需要实现,但目前还未实现的功能。
  2. 错误,不能工作:(标记人,标记时间,[预计处理时间]) 在注释中用 FIXME标记某代码是错误的,而且不能工作,需要及时纠正的情况。

###(七) 日志管理

  1. 【推荐】 代码中过多使用console.log()会消耗性能,推荐去除不必要的日志输入代码;

  2. 【强制】 在入口文件添加以下代码; 说明:可以在发布时屏蔽掉所有的console.*调用。React Native中有一个全局变量__DEV__用于指示当前运行环境是否是开发环境。我们可以据此在正式环境中替换掉系统原先的console实现。

     if (!__DEV__) { global.console = { info: () => {}, log: () => {}, warn: () => {}, error: () => {}, }; } 

这样在打包发布时,所有的控制台语句就会被自动替换为空函数,而在调试时它们仍然会被正常调用。

###(八) 目录结构规范

 以下目录结构示例中只展示js与静态资源,不包含原生代码: ├── index.ios.js ├── index.android.js └── js ├── component 可复用的组件(非完整页面) ├── page 完整页面 ├── config 配置项(常量、接口地址、路由、多语言化等预置数据) ├── util 工具类(非UI组件) ├── style 全局样式 └── image 图片 在component和page目录中,可能还有一些内聚度较高的模块再建目录 page/component ├── HomeView.component.js ├── HomeView.style.js └── MovieView ├── MovieList.component.js ├── MovieList.style.js ├── MovieCell.component.js ├── MovieCell.style.js ├── MovieView.component.js └── MovieView.style.js 

##二、页面编写规范 ###(一) state,props

  1. 【强制】 代码中初始化state因在constructor(props)函数中,而且尽量对每个变量进行注释;

  2. 【强制】 代码中使用setState时,因注意异步可能导致的问题,尽量使用回调函数;

     this.setState({ //todo },()=>{ //执行setState后执行此函数 }) 
  3. 【强制】 代码中使用props时,需进行propTypes检测和defaultProps默认值初始化;

     static propTypes = { color: PropTypes.string, dotRadius: PropTypes.number, size: PropTypes.number }; static defaultProps = { color: '#1e90ff', dotRadius: 10, size: 40 }; 

4.【强制】 代码中用于页面展示处理UI的组件,命名以Page结尾,自定义组件命名中必须包含Component; 例子:

 LoginPage 登录页 BtuuonComponent 按钮组件 

5.【强制】代码中创建数组或对象使用以下方式;

const user={ name:'time', sex:'男', age:25, }; const itemArray=['0','1','2',3,{name:'25',age:'男'}]; 

6.【强制】代码中函数绑定this,强制使用箭头函数; 注:除组件原有方法,其他自定义函数命名时,需使用箭头函数;

//系统组件生命周期方法 constructor(props){ super(props); }; //自定义方法 goMainPage=()=>{ }; 

7.【推荐】代码中一些网络数据初始化,配置信息,推荐在此生命周期进行初始化;

componentWillMount 

8.【强制】代码中使用定时器或者DeviceEventEmitter,必须在组件卸载进行销毁或者清除;

componentDidMount() { //注意addListener的key和emit的key保持一致 this.msgListener = DeviceEventEmitter.addListener('Msg',(listenerMsg) =
首页 上一页 1 2 3 4 下一页 尾页 2/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇react native进阶 下一篇Ionic3 环境搭建以及基础配置实现..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目