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

文章目录 注释在js中的作用引用类型表达式取值组件的的职责条件判断和循环定时器的执行解决事件多次触发不要忽略默认值

注释在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 参考： github / 引用类型

通常我们会在列表的每一行增加一个编辑按钮，如果后端不提供详情接口，那么编辑的表单回显可以通过作用域插槽获取当前行数据进行回显，但请时刻记住，对象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 { // 新增 }