注释

  1. 文件顶部注释
1
2
3
4
5
/**
* @description xxx
* @author oeloowu
* @since 20/07/31
*/
  1. 模块注释
1
2
3
4
5
6
/**
* 拷贝数据
* @param {*} data                     源数据
* @param {boolean} {{isDeep = false}  是否深拷贝，默认浅拷贝
* @return {*}                         返回拷贝后的数据
*/
  1. 业务代码注释
1
/* 业务代码注释 */
  1. 变量注释
1
2
3
4
5
6
7
8
interface IState {
  // 名字
  name: string;
  // 电话
  phone: number;
  // 地址
  address: string;
}

组件引用顺序

先引用外部组件库，再引用当前组件块级组件，然后common公共函数，最后css样式

1
2
3
4
5
import * as React from 'react'
import {Dropdown, Menu, Icon} from 'antd'
import Header from './Header'
import toast from 'common/toast'
import './index.less'

引号使用

单引号，ES6 反引号 `

空格

  1. 缩进使用两个空格

  2. 二元和三元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格

    ++x
    y--
    z = x ? 1: 2

  3. 代码块起始左花括号｛前必须有一个空格

  4. 对象创建，属性：后面必须有空格，前面不予许有空格

括号

以下关键字后必须有大括号，即使代码只有一行：if、else、for、while、do、switch、try、catch、finally、with

命名

  • 类名：大驼峰风格
  • 函数名：小驼峰风格
  • 变量名：同函数名
  • 常量：全大写风格，单词之间下划线分隔
  • 使用 onXxx 形式作为 props 中用于回调的属性名称
  • 组件内事件函数使用 handle 开头，handleCheckBtn
  • 使用 withXxx 作为高阶组件的名称
  • 接口命名前面带上I，interfase IProps()

interface 声明顺序

只读参数 -> 必选参数 -> 可选参数 -> 不确定参数

1
2
3
4
5
6
7
8
interface IPeople {
  readonly x: number;
  readonly y: number;
  name: string;
  age: number;
  height?: number;
  [propName: string]: any;
}

TS 相关工具泛型、tips

  • Record<string, any> 声明对象结构的类型
1
2
3
4
const people:Record<string, any> = {
  name: 'oeloowu',
  age: 10
}
  • Partial 将传入的属性变为可选项
1
2
3
4
const people:Partial<IPeople> = {
  name: 'oeloowu'
}
// 定义的结构可以是接口的任意 key
  • Readonly 将传入的属性变为只读
1
2
3
const people:Readonly<IPeople> = {
  name: 'oeloowu'
}
  • Required 将传入的属性变为必选项
1
2
3
4
const people:Require<IPeople> = {
  name: 'oeloowu'
}
// Error: property 'height' missing

查看更多

  • keyof
1
2
3
4
5
6
7
8
type T = keyof IPeople
// 输出 IPeople keys

type Keys = "a" | "b"
type Obj =  {
  [p in Keys]: any
}
// -> { a: any, b: any }

稳健性判断

增加必要的判断，提高代码的稳健性，如：非空，数组.xx，对象.xx.xx 等

判断真假

js 中，false、null、undefined、0、’’、NaN 为 false，其他均为真

常用属性缓存

1
const { app, time} = this.props

阻止默认行为

React 中不能通过返回 false 阻止默认行为，必须明确调用 preventDefault

hasOwnProperty 判断

for … in 中一定要有 hasOwnProperty 判断，即禁止直接读取原型对象的属性

1
2
3
4
5
6
7
8
9
10
11
12
const obj = {
  name: 'oeloowu',
  age: 18,
  sexy: '男'
}

const arr = []
for (key in obj) {
  if (obj.hasOwnProperty(key)) {
    arr.push(obj[key]);
  }
}

Event 事件对象类型

ClipboardEvent<T = Element> 剪贴板事件对象
DragEvent<T = Element> 拖拽事件对象
ChangeEvent<T = Element> Change 事件对象
KeyboardEvent<T = Element> 键盘事件对象
MouseEvent<T = Element> 鼠标事件对象
TouchEvent<T = Element> 触摸事件对象
WheelEvent<T = Element> 滚轮事件对象
AnimationEvent<T = Element> 动画事件对象
TransitionEvent<T = Element> 过渡事件对象

代码颗粒度

工具函数 和 业务逻辑 抽离
表单校验 和 业务逻辑 抽离
事件函数 和 业务逻辑 抽离
ajax 和 业务逻辑 抽离

其他规范

不要使用 var 声明变量
不会被修改的变量使用 const 声明
去除声明但未使用的代码
禁止代码中使用 debug
不允许空代码块
input 输入框 trim()
location 跳转前需要先转义，window.location.href = redirectUrl + encodeURIComponent('?a=10&b=20');
调用第三方库，try catch 包裹，防止第三方库出错

a 标签安全问题

window.opener（.location） 访问原始页面的 location 对象

target="_blank" 标签加上 rel = "noopener"

window.open 打开的页面，将 opener 对象置空

1
2
var windowObj = window.open();
windowObj.opener = null;