微信小程序-代码优化方式

三目运算场景

• 场景一

  • leftData ? leftData : rightData
  • 简化：leftData || rightData
  • 适合场景：isClick ? ‘’ : ‘hidden’

• 场景二

  • leftData ? rightData : leftData
  • 简化：leftData && rightData

• 场景三: (只要leftData不为undefined或null 就返回leftData)

  • leftData !== null && leftData !== undefined ? leftData : rightData
  • 简化：leftData ?? rightData

运算符释义

• ||,会判断问号左边是否有值，即会使用Boolean将左边进行转化，若为true，返回左边的值，若为false，返回右边的值
• &&,会判断问号左边是否有值，即会使用Boolean将左边进行转化，若为false，返回左边的值，若为true，返回右边的值
• ??,ES2020 新增，当左侧的操作数为 null 或者 undefined时，返回其右侧操作数，否则返回左侧操作数

代码优化方式

场景一：页面使用复杂的表达式，可以在函数中返回结果，直接调用函数

• 示例： disabled: !a && b && c && d
• 解决：
  • disabled: isDisabled
  • const isDisabled = () => {return !a && b && c && d}

场景二：页面存在重复节点，一般存在表单页面

• 解决： 将数据存在数组中，遍历出来

场景三：if else switch + 要校验，表单

• 将提示信息，校验的key值，和是否必填(可以通过ts的类型校验忽略或排除)写成一个数组对象
• 通过判断这个key对应的value的布尔类型时候为undefined，是就提示并返回。
• 注意点：
  • 有两个数组，数组一是存放key和value的数组对象，数组二是存放要检验的key和提示信息。
  • 这个校验方式是按顺序的，所以数组的顺序要和页面的表单顺序一致

场景三：从后端获取参数存进对象中，但有几个数据要单独处理

• 示例：

  const params = {}
  params.id = this.formItem.id
  params.time = this.formItem.time.format('YYYY-MM-DD')
  ...次数省略多个重复代码

• 解决：使用解构，不处理的直接存，处理的拎出来处理

  const {time,...params} = this.formItem   // 这里输出params就可以得到params对象
  params.time = this.formItem.time.format('YYYY-MM-DD')

场景四：常量使用枚举保存好

场景五：css用BEM命名法

BEM命名法

场景六：switch 比 if/else在 执行效率高

场景七： 优化switch

策略模式： 简单理解一个函数对应一个方法

• 解决：使用对象存储，然后在函数中返回
• 本质：在工厂函数中使用策略模式
• 示例：

  const weekFun = (opt: number) => {
  	// 使用对象字面量
  	const status: Record<number, string> = {
  		0: '周日',  // value可以是函数
  		1: '周一',
  		2: '周二',
  		3: '周三',
  		4: '周四',
  		5: '周五',
  		6: '周六',
  	}
  	return status[opt] ?? 'weekFun is not get useful num'
  }

场景八： 优化if/else代码块

• Map写法

  const opt = {
  	0: "add",
  	1: "even",
  	2: "divided",
  	3: "multi"
  }
  
  const actions = new Map([
   ["add", "成功,444444444444"],
   ["even", "失败,44444444"],
   ["divided", "进行中,11111111"],
   ["multi", "未开始"]
  ])
  // 调用
  actions.get(opt[0])
  console.log(actions.get(opt[0])) // "成功,444444444444"