持续更新

书写命名约束

文件约束

文件结构

src/
  components/ （通用组件，与业务无关，可被其他所有组件调用）
    Button/
      index.tsx
  containers/ （容器组件，与业务深度耦合，可被页面组件调用）
    Hello/
      Kitty/ （容器组件中的特有组件，不能与其他容器组件共享）
      index.tsx
    World/
      components/
      index.tsx
  hooks/ （公共的 hooks）
  pages/ （页面组件，特定的页面，无复用性）
    my-app/
  store/ （状态管理）
  services/ （接口定义）
  utils/ （工具类）

要求自己

1. 一个组件一个样式文件，不要一个大样式文件包含很多子组件样式
2. 对于新写文件要求自己加文件注释 control + cmd + i
   后来发现，会经常造成冲突（停用）
3. 
4. 文件命名
   1. 驼峰命名
   2. 组件名首字母大写

命名风格约束

常量	HOME_PAGE	大写+下划线
变量	homePage	驼峰
方法	onSubmit	驼峰
TS类型	CourseData	首字母大写+驼峰
css id	myCon	驼峰
css类名	home-page-con	小写+短横/驼峰

注释书写

永远不要注释，除非你有充分的理由 -- 正确性？如何判断？

1. 自定义方法 control + cmd + T（插件koroFileHeader） 逻辑复杂方法注释
2. 对于不能很快理清思路的代码 -- 加注释
3. 存在todo任务，但目前不影响业务 -- 加注释
4. 语义化不强的变量/值 -- 加注释 的让人明白用这个东西做了什么
5. ...

javaScript约束

字符串拼接

字符串拼接采用模版字符串``可读性更好

循环性能

双层循环 转Map - 单循环

let arrMap = new Map(arr.map(item => [item.label, item]))

循环绑定事件

事件委托

对于同级多个元素同时绑定事件时，进行事件委托

判断条件

??

````

a ? a : 1   ===    a ?? 1

!!

!!a      // true false

&&

a && b   // 前真与反后

||

a || b  // 前真或返前

?.

``

obj?.a

三元

a ? 1 : 2

不做无用判断

if(checked.value !== undefined && checked.value?.length > 0) {}

函数封装

函数参数不宜太多

tip: 参数太多时，还需要关心顺序...

函数拆分

一个函数处理一个功能，

tips：当认为已经难以理解的时候，就是不得不拆的时候

函数封装

通用函数封装适当的，不要为了什么通用，兼容去无限处理参数

promise

promise.all使用要catch

await要考虑error

try catch / .catch / 兜底全局

防御编程

展示时最好做默认值

{data.rate? data.rate : '--'}    // 这样的默认值

考虑弱网、无网的页面展示与交互

考虑按钮的多次点击情况

VUE框架习惯

1. 不要修改计算属性数据，能用计算属性数据的不要新建变量
2. 定时器销毁
3. 缓存复杂计算
4. 懒加载
5. 模态框销毁

工作中

1. 语义化
   1. 起名字
   2. 长度很长的判断，尽量少用
2. 复杂度
   1. 少用双层循环
3. 方法尽量单独定义，不要用行内方法
4. try catch 应用场景，不要滥用