review code中学到的一些经验

1、逻辑运算

// || false 没有意义， 没有赋值时，undefined 就是 false，
let isOpenPer = obj.isOpen || false

// 这么写会导致横为 true 了
isOpenPer: obj.isOpen || true;

2、函数返回值类型要保持统一

// × 可以加一个 key，而不是返回布尔和字符串类型这种异结构
function fn () {
    // ...
    return index === -1 ? `str` : false
}


// √
function fn () {
    return `text${index}`
}

3、使用工具函数简化代码

const arr = []
const items = arr.map(it => {
    if(typeof it === 'string') {
        return it
    } else {
        return {
            id: it.id,
            name: it.type !== 'user' ? it.name : undefined,
            nickName: it.type === 'user' ? it.nickName : undefined,
            type: it.type
        }
    }
})

// 可以使用 lodash 的 pick 函数
import _ from 'lodash';
const arr = []
const items = arr.map(it => {
    if(typeof it === 'string') {
        return it
    } else {
        return {
            ..._.pick(it, ['id', it.type === 'user' ? 'nickName' : 'name', 'type'])
        }
    }
})

4、公共组件尽量避免使用某个字符串作为特殊值，没有可扩展性

5、对象点操作要注意无效值情况

// 如果逻辑判断都没匹配上，key 为初始值，导致报错
async function handleConfirm() {
    let key = ''
    if(type === 'create') {
        key = 'addData'
    } else if (type === 'update') {
        key = 'updateData'
    }
    await service[key]({...})
}

// √
async function handleConfirm() {
    let key = 'addData'
    if(type === 'update') {
        key = 'updateData'
    }
    await Service[key]({...})
}                      

6、操作之后可以不用刷新页面，通过数据替换实现效果

比如，删除操作，删除成功只需要将被删除的数据过滤掉，而不用重新调用获取数据的接口，同理、更新等其他操作也可以只替换部分值实现(当然，要注意使用场景，像有翻页的列表，可能就不使用了)

7、catch语句不能为空

// 注释掉之后 catch 语句是空, 如果有报错，不利于排查问题
async function getList() {
    try {
        await service.api({})
    } catch (error) {
        // console.log(error.code)
    }
}

// √
async function getList() {
    try {
        await service.api({})
    } catch (error) {
        console.log('getList function error', error.code)
    }
}

8、国际化时不能使用拼接

因为有些国家的语言是从后往前的

const str = ${`this.$t('ok')}${this.$t('txt')}`

// 应该使用占位符的形式
const str = this.$t('ok', [this.$t('txt')])

9、用户操作应该给予回应

操作都要有回应，不论成功失败

async function deleteTodo() {
    try {
        await service.api({})
        alert('删除成功')
    } catch (error) {
        alert('删除失败')
    }
}

10、函数命名不适合用名词，一般用动词或者动名词短语

11、要复用、不要复制

发现和其他地方有相似的部分，应该尽量抽离优化，而不是复制使用

12、提交代码记得去掉调试信息

比如 console.log