前言

  本文较适合对代码有追求||有代码洁癖的前端攻城狮观看，由于我本人有代码洁癖，且追求最少的代码做最多的事，一路走来也学习了不少大佬的代码之道，我本无道，且行且道，遂得道。 本文即讲述我的代码简洁之道。

我本无道，且行且道，遂得道。

Bob叔叔的《代码整洁之道》

我时常认为，将编程喻为建筑和构造并不恰当。因为程序员不会做一个完整的设计，从头开始建基，再一步步搭建直至完工。

编程的步骤是：先画草图，再反复添加细节。程序员要做的是修改、完善和扩展——这些都在各抽象层次上完成，直到软件满足要求为止。而软件永远不会真正完成。

这就是《代码整洁之道》的中心思想。贯穿全书的要点是：软件是一门艺术，做软件就像“画画”。作者认为编程的本质是一门工艺。

逻辑抽象化

  前段时间翻阅《周易》，还记得，《周易》卦爻辞，一般分为两部分。一部分是取象，说明事理；另一部分是断语。

• 所谓取象，就是叙述一件事，或描述某一自然现象，以此说明一个道理。
• 所谓断语，就是下结论，多用吉、凶、悔、吝等辞。
• 《周易》卦爻辞之所以要由两部分组成，原因就是为了占问。在占问时，遇到某一卦或某一卦中的某一爻，先看卦爻辞取象部分，表示占问者处境，然后看判断结果。

感觉写代码其实也是一种玄学，取象则是一些需求、业务，断语则是抽象化事物、逻辑。

实践

首先代码分为红、绿、黄三部分

• 红色部分为条件语句
• 绿色部分为逻辑语句
• 红色部分为赋值语句

1、条件语句：逻辑较复杂，提取为条件函数

const Audited = (): boolean => [undefined, 1].includes(record.auditStatus) && record.regulatoryMark === 2 && val === 1

2、业务逻辑：重复逻辑，提取为逻辑函数

 const auditedLogic = () => {
    record.targetRegulatoryMark = val
    state.currentRecord = record
  }

3、赋值操作：合理运用解构赋值，简洁代码(解构无值返回的是undefined)

const {regionDistrict, regulatoryAgency, companyType, businessSubtype, companyAddress} = record
state.setSuperviseParams.regionDistrict = regionDistrict
state.setSuperviseParams.regulatoryAgency = regulatoryAgency
state.setSuperviseParams.companyType = companyType
state.setSuperviseParams.businessSubtype = businessSubtype
state.setSuperviseParams.companyAddress = companyAddress ?? ''
state.setSuperviseDialogVisible = true

4、可选链运算符（?.）（无值返回的是undefined）、空值合并运算符（??）（undefined||null取右）

最终优化效果图

定义变量的简单写法（ts）

const state = reactive<{
      treeData:itemListType[]
      choseData:number[]
      activeNames:number[]
      submitLoading:boolean
    }>({
      treeData: [],
      choseData: [],
      activeNames: [],
      submitLoading: false
    })

未完待续...本文将持续更新，如若对你有帮助，可以大胆喜欢加点赞！

完全不够看？往期精彩回顾

写在最后

我是凉城a，一个前端，热爱技术也热爱生活。

与你相逢，我很开心。