js/ts 变量规范

概述

WARNING

1.命名规范请认真阅读，约束不是目的，统一风格是为了方便代码阅读，见名知意，后期代码维护方便；2.有些地方也相对开放，最终目的是要简洁明了，表意准确。

关键字

关键字变量统一优先用es6+ 的let,const方式定义

使用var时需要注明原因和场景

变量名

1.使用小驼峰命名（第一个单词首个字母小写，其他单词首字母大写） 比如：fileName,vueRouter,orderList

const fileName = ''
const vueRouter = {}
const orderList = []
const useHook = () => {}
const onMouseOver = () => {}

2.使用单词全称，除非常用的单词缩写或单词组合太长的情况

变量一般不超过 20 个字符，尽量表意准确

单词组合太长，且 不好表达意图 的时候，可以根据单词重要性，缩略次要的单词

3.使用规范变量前后缀 比如：List,Obj,Array,Number,Num,Data,Str,Item等常用词

注: 不乱用关键词和数据结构词

数组

Array 数组

用 List,Array 等后缀或单词复数表示

//数组
const orderList = []
const orderArray = []
let works = []

对象

Object 对象

用 Object,Obj,Data，Info，Bean 等后缀或对象单词表示

const userInfo = {}
const formData = {}
const orderObj = {}
let tomCat = {}

Map 与 Set

Map 与 Set

用 Map,Set 等后缀分别表示 Map,Set 结构

const eventMap = new Map()
const elementSet = new Set()

Boolean 布尔

布尔

用 is,has,can 等前缀,或有判断意图的单词表示

 # 是不是
 let isEmpty=true
 # 有没有
 let hasExport=true
 # 能不能
 let canOpen=true

 let show =false

Number 数字

数字

用 length,count,num,Number,Total 等后缀,或表示量词的单词表示

let fileLength = 1
const pollenCount = 1
const rowTotal = 100
let limit = 1

String 字符串

字符串

用 Str,String,Json 等后缀或其他（字符串定义较开放）

 let name= '张三'
 //url参数串
 const paramStr="name=ppy&age=1"
 //json字符串
 const argJson="{ "l1": { "l1_1":[ "l1_1_1"]}}"

reactive(ref) 响应式变量

reactive 与 ref

推荐用 State,Ref 等后缀

// input组件的ref引用
let inputRef = ref()

//子模块的响应式变量,带上`curr`前缀
// 默认直接state
let currState = reactive({
  title: '首页',
  logo: 'icon-logo',
})

// setup 作用域 全局共享State的hook
// 定义共享state
let [state, setState] = defineCtxState<IDemo>({
  name: string,
})

// 使用defineCtxState的共享数据,不能跨组件,所有子hooks可以使用

const [state, setState] = useCtxState<IDemo>()

注意

defineCtxState 和 useCtxState 是联合出现的

useCtxState使用的是defineCtxState的定义的数据

函数名

1. 使用小驼峰命名（第一个单词首个字母小写，其他单词首字母大写）
2. 采用 动作特性开头的 组成结构

// 设值,取值 (anything is set or get)
const setToken = (token) => {}
const getToken = () => {}

// 新增,删除,修改 (create,delete,update,add,remove,edit)
const addUser = (user) => {}
const deleteUser = (id) => {}
const updateUser = (user) => {}

// 显示,隐藏,切换 (show,hide,toggle)
const showLoading = () => {}
const hideLoading = () => {}
const toggleMenu = (status) => {}

// 加载,提交,保存 (load,submit,save)
const loadFontFace = (Object) => {}
const submitForm = (formData) => {}
const saveData = (data) => {}

// 校验,验证,重置 (validate,verify,reset)
const validateForm = (ref) => {}
const resetForm = (ref) => {}

api 函数

api 接口相关

• 对于api 接口请求的情况，可以用api开头
• api 一般是多文件共享的，所以用统一前缀方便查找,类型提示

const apiGetInfo = (args): Promise<UserInfo> => {
  return request({
    url: '/api/user/info',
    method: 'get',
    params: args,
  })
}
const apiRefreshToken = (args): Promise<TokenInfo> => {}
const apiVehicleInfo = (args): Promise<IVehicleInfoResp> => {}

事件函数

处理事件

对于明确组件事件动作的情况，可以用on开头

也可以使用通用的handle开头

//点击编辑
const onClickEditBtn = () => {}
//keyUp键盘enter键
const onKeyUpEnter = () => {}
//鼠标浮出菜单事件
const onMouseOverMenu = () => {}

通用情况

在不确定动作的单词的函数情况，推荐使用handle开头

const handleFilter = () => {}
const handleFile = () => {}
const handleSearch = () => {}

hook 函数

hook 相关

• 对于hook 函数的情况，可以用use开头

// hook对象
let inputHook = useInput()
//解构
let { render: renderLoading } = useLoading()

枚举

枚举

• 枚举采用Enum 开头(推荐)或结尾,大驼峰 命名（每个单词首字母大写）
• 枚举属性 采用 大写 命名,用 下划线 分割

//枚举采用Enum 开头,大驼峰命名
enum EnumYesOrNo {
  //枚举属性 全大写,用下划线分割
  YES = 1,
  NO = 0,
}

枚举是一种特殊的对象,一般用于 常量 的定义,在 ts 中可以用as const来约束枚举的值类型

let EnumStatus = {
  SUCCESS: 1,
  ERROR: 2,
} as const

为什么 推荐 Enum 开头捏, Enum 一般都是夸文件共享,主要是为了方便提示

渲染函数

渲染函数

• 渲染函数一般在jsx/tsx的写法中会多一些
• 使用 render 开头,后面跟上组件名

比如: vant 组件里面的renderLoadingIcon函数

const renderLoadingIcon = () => {
  if (slots.loading) {
    return slots.loading()
  }

  return <Loading size={props.loadingSize} type={props.loadingType} class={bem('loading')} />
}