我的前端编码习惯分享

良好的编程规范对于软件的开发与维护，至关重要！他不仅可以提高代码的可读性、可靠性、有效性、健壮性，而且利于帮助开发人员开发和维护代码。对于一个团队协作的项目来说，人员的变动，一个良好的编程规范，有助于后续开发者和新手快速了解项目代码所要表现的含义。

一个好的项目代码应该具备以下优点

1. 注释清楚

2. 间隔整齐

3. 可读性高

4. 可维护性好

5. 可扩展性好

react 类中 方法声明的顺序

• 原则上按如下顺序排列React组件的各个方法（生命周期）：

1. constructor

2. 静态方法

3. 生命周期

   1. componentWillMount
   2. componentDidMount
   3. componentWillReceiveProps
   4. shouldComponentUpdate
   5. componentWillUpdate
   6. componentDidUpdate
   7. componentWillUnmount

4. 子组件ref

5. 点击处理或事件处理函数，比如onClickSubmit()、onChangeDescription()

6. 用在render中的getter方法，比如getSelectReason()、getFooterContent()

7. 可选的render方法，比如renderNavigation()、renderProfilePicture()

8. render() 避免在render方法中使用setState()

• 按如下方式定义propTypes, defaultProps, contextTypes等

import React, { Component, PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends Component {
  // 第二种定义propTypes和defaultProps的方式
  static propTypes = {
    id: PropTypes.number.isRequired,
    url: PropTypes.string.isRequired,
    text: PropTypes.string,
  }
  static defaultProps = {
    text: 'Hello World',
  };
  // end
  constructor(props) {
    super(props);
    this.state = {}
  }
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

14. render（）

判断条件

指标：圈复杂度
圈复杂度(Cyclomatic complexity)是一种代码复杂度的衡量标准
避免如图所示的这种判断（上百行全是switch case圈复杂度直接拉满）

无效的else if

优化1 不是用else if (if判断条件执行语句只有一个的情况可以省略花括号（不换行），其他情况不建议省略)

优化2 映射（也可以使用Array或Map做映射）

JSX

样式分离

应尽量避免行内样式，影响组件的层级结构和阅读体验

对比下来第二个可以直观的观察到组件层级

方法及调用分离

• 禁止在JSX内写方法体(单行语句简单语句例外)
• 组件复杂参数剥离、定义在return之前，可复用的定义在实例内部

函数

1. 命名
小驼峰式写法(lowerCamelCase),命名清晰，命名过长可以缩写（通俗易懂的缩写,禁止随意缩写）

init、refresh 单词除外
尽量使用常用单词开头（set、get、go、can、has、is）
// 请求数据方法，以 data 结尾
getListData () {};
getFormData () {};
// 命名
get 获取/set 设置,
add 增加/remove 删除 
create 创建/destory 移除 
start 启动/stop 停止 
open 打开/close 关闭, 
read 读取/write 写入 
load 载入/save 保存, 
create 创建/destroy 销毁 
begin 开始/end 结束, 
backup 备份/restore 恢复

2.格式

• 一行只写一个执行语句;
• 代码行连续调用长度过长的情况下适度换行处理
• 变量定义在顶部 let const 分别定义
• 方法体单一职责
• 禁止循环嵌套
• 特殊语句、逻辑、业务场景注释清晰

代码注释

变量注释

// 文件头注释
/** 
 * 本js实现专线续费申请页面所有功能
 * @author xuweijian 
 * @date 2015/10/12 15:25:33 
 * @lastModify 2015/10/12 15:25:33 by xxx
 */ 


// 全局变量注释 页面的常量或全局的常量并使用多行注释（大写加下划线的方式命名）
/** 超时时间 */
const OVER_TIME = 10;

组件使用说明，和调用说明
/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述
* @author 组件作者
* @date 2017年12月05日17:22:43
* @param {Object} [title]    - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
*  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
**/


// 方法注释
/**
* @desc 方法描述
* @param {Array} arr 这是一个数组表示XXX
* @param {Object} obj 这是一个对象表示XXX
* @param {boolean} bool XXX是否为。。。
* @returns {Array} 返回XXX的处理结果
*/
function foo (arr, obj, bool)  {
  const tempArr = [...arr]; // 不建议直接对参数进行操作
  tempArr .push(obj);
  return bool ? arr : [];
}

日志打印

调试打印日志禁止提交
需要保留的日志：按照模块名-页面-文件-要打印的信息 格式输出

console.log('模块-页面-文件-info');

设计模式七大原则

1. 单一职责原则
2. 里氏代换原则
3. 依赖倒转原则
4. 接口隔离原则
5. 迪米特法则
6. 合成复用原则
7. 开闭原则
   参考文章链接