JavaScript 开发秘籍：日常总结与实战技巧-1

注释在js中的作用

 * 小驼峰转小写下划线 userNameInfo
 * @param { string } v 需要转换的名称
 * @returns user_name_info
 */
export const toUnderline = (v) => {
  if (v) {
    return v.replace(/[A-Z]/g, (current) => `_${current.toLowerCase()}`)
  }
}

调用时的提示：

常用的注释：

注释名	语法	含义	示例
@param	@param { 参数类型 } 参数名 描述信息	描述参数信息	@param { sting } name 描述信息
@returns	@returns { 返回类型 } 描述信息	描述返回值的信息	@returns { boolean } true:可执行，false:不可执行
@author	@author {附属信息：日期、邮箱等} 作者信息	描述此函数作者的信息	@author WangFan 2024/01/19
@version	@version xx.xx.xx	描述此函数的版本号	@version 1.0.1
@example	@example 示例代码	演示函数的使用	@example setName('测试')
@method	@method 函数名	描述使用的函数	@method getName
@description	@description 描述信息	当前的说明信息	@description 描述xxx
@link	@link 超链接	超链接	@link 参考： https://github.com/

引用类型

通常我们会在列表的每一行增加一个编辑按钮，如果后端不提供详情接口，那么编辑的表单回显可以通过作用域插槽获取当前行数据进行回显，但请时刻记住，对象or数组的值为引用类型，使用作用域插槽的值进行回显编辑一定要深拷贝当前行数据，否则会造成原始数据修改。

表达式取值

function A(v) {
   if(v == 'car'){
       return {
           color: 'black',
           money: 100000,
       }
   } else if(v == 'phone'){
       return {
           color: 'white',
           money: 1000
       }
   } else if(v == 'pen'){
       return {
           color: 'gold',
           money: 2
       }
   }
}

实际上我们只需要利用key，通过命令的方式直接读取值，比判断的效率更高，而且更加直观

let info = {
    car: {
        color: 'black',
        money: 100000,
    },
    phone: {
        color: 'white',
        money: 1000,
    },
    pen: {
        color: 'gold',
        money: 2,
    },
}

function A(v) {
   return info[v]
}

组件的的职责

组件封装需要考虑复用性，由于组件非常灵活，不建议在页面中大量使用组件，否则页面会拆的太碎，导致传值混乱。组件的一个重要作用就是一次封装，多次复用，这和组件职责密不可分，例如一个查询省市区的树形控件，这个组件的职责就是负责查询省市区并将查询结果返回，不需要在组件内做任何其他逻辑操作，你只需要在对应页面引入即可使用。一旦组件内做了非组件职责的其它逻辑操作，该组件的可复用性就会大大降低，在复用的时候该组件可能会做其它与当前逻辑不相关的操作，原本是可以避免的。

条件判断和循环

能使用三元表达式和逻辑运算符的，不要使用条件判断。如果三元表达式超过三层，需要抽成函数或者使用逻辑判断并写明注释。

定时器的执行

在调用函数时，函数带上括号表示执行该函数，不带括号表示该函数体。定时器是一个异步执行函数，在设定的时间后执行。但如果在定时器中使用带括号的函数调用，则会立刻执行。

// 带括号
const fn = () => {
    console.log('执行了')
}
setTimeout(fn(), 1000) // 立刻执行

// 不带括号调用
const fn = () => {
    console.log('执行了')
}
setTimeout(fn, 1000) // 1s后执行

解决事件多次触发

有时候会碰到一个点击事件触发了多次的情况，这可能是点击穿透或者默认事件造成的，当你需要解决但又没时间分析是啥问题的时候，可以使用防抖或节流，只执行一次。

// 防抖
times: null,

// 点击节点
onNodeClick(data, all) {
  clearTimeout(this.times);
  this.times = setTimeout(() => {
    // 逻辑处理
  },500);
},

不要忽略默认值

函数参数、解构、判断这些操作都是建立在值存在的情况下进行的，如果值不存在，这些操作获取的值可能是undefined等不可操作的数据，往下运行会报错，所以我们需要使用默认值兜底。

// 解构默认值,对象和数组的解构允许默认值
let obj = {a: [10,20,30],b: [100,200,300],c: [1000,2000,3000]};
let { a = [], b = [], c = [] } = obj; 


// 函数默认值
function getInfo(params = []) {
      // params.filter .. 基于数组的操作
}

// 赋值默认值
let dataList = res?.data || []

你也可以通过默认值来区分是新增还是修改，一般来说修改会拿id查详情回显，而新增不需要id

// 新增
getInfo()
// 修改
getInfo(row.id)

// 函数默认值
function create(id = null) {
   if(id){
     // 修改
   } else {
     // 新增
}