跳到主要内容

2.1-代码编写

Create by fall on 03 Feb 2022
Recently revised in 27 Apr 2023

你觉得代码好看还是难看，那只是因为你熟悉或陌生。

好的代码​

这是代码常见问题的一些思考

  • 使用默认导出还是命名导出？
    • 默认导出可以在使用的时候重命名
    • 命名导出，在命名更改的时候，其它地方可以同步更改（不然报错）
  • 文件命名
    • 使用 index.tsx，可以保证你打开一个文件夹知道要找的文件是谁，报错的时候，搜索的时候，就会有成百上千个 index 文件
    • 使用文件夹的名称，可以让搜索更容易，重构时给文件夹重命名也很重要
  • Prop 命名
    • 使用 Props 简单，但如果想要导出这个类型，就还需要再重命名，也很难保持一致，搜索也会有多个结果
    • 使用文件夹的名称，可以让搜索更容易，重构时给文件夹重命名也很重要
  • 普通函数还是箭头函数
    • 普通函数（ES6 之前唯一支持的函数声明方式
    • 箭头函数简洁，紧凑，可读性（一部分人来说）
  • 三步运算符还是提前返回
    • 在返回时使用三步运算符，条件不多，且返回内容简单时非常好，条件多后可读性非常差
    • if 提前返回，多行的内容十分友好，注意使用提前返回可以避免多级嵌套（也不建议 if 中的内容过多，影响理解

软件设计原则​

  • 不要重复
  • 让方法保持简单，甚至简单到小白都能懂
  • 面向接口编程，而不是实现
  • 别因为下次需要在这次编程中实现
  • 顶层询问原则，在模块的最顶层询问内容，而不是其中的一部分

组件开发推荐使用强类型语言，因为需要调用对应的 API 实现功能，强类型独有语法提示，类型提示。

只有当同一份代码使用过多次之后，再提取到工具中，视图上同理

命名规则​

尽可能使用方法命名代替注释

/**
 * 求和函数
 * @param {number} a 加数
 * @param {number} b 加数
 * @return {number} sum 和
 */
function getAB(a,b){
  return parseInt(a)+parseInt(b)
}

// 尽可能不使用注释
function sumString(a,b){
  return parseInt(a)+parseInt(b)
}