202012-前端开发vue项目代码中的亮点和疑点

1、:class="$route.path.indexOf('contentEdit')>0?'is-active':''"

<router-link :to="contentEditToPath" :class="$route.path.indexOf('contentEdit')>0?'is-active':''" v-if="userInfo.pages['内容维护']">内容维护</router-link>

2、exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

<span v-show="roleInfo.current_role">
 ({{ roleInfo.current_role ? (/(管理员)/g.exec(roleInfo.current_role) ? /(管理员)/g.exec(roleInfo.current_role)[0] : roleInfo.current_role) : '暂无角色' }})
</span>

3、~ 在 JavaScript 中用来进行按位取反，比如 1999(10) = 11111001111(2)，那么 ~1999(10) = 00000110000(2)

原码
原码表示法最高位为符号位，该位为0表示正数，1表示负数。其余位表示数的绝对值。
反码
对于一个带符号的数来说，正数的反码与其原码相同；负数的反码为其原码除符号位以外的各位按位取反。反码常用来做求补码过程中的中间形式。
补码
正数的补码与其原码和反码相同；负数的补码是对它的原码除符号位以外各位取反，并在末位加1而得到，即为该数的补码加1。

isAdmin() {
   return this.roleInfo.current_role && ~this.roleInfo.current_role.indexOf('管理员');
}

4、排序

computed: {
    contentEditToPath() {
            if (this.userInfo.pages && this.userInfo.pages['内容维护']) {
                let arr = ['学科素养', '知识说明', '通用考情', '地区进展', '胶囊测评', '魔术卡', '版本'];
                let pages = this.userInfo.pages['内容维护'];
                pages.sort((a, b) => {
                    let aIndex = arr.findIndex(item => item === a.name);
                    let bIndex = arr.findIndex(item => item === b.name);
                    return aIndex > bIndex ? 1 : -1;
                });
                return pages[0].path;
            }
            return '';
        }
}

5、用法import * as obj from，这种写法是把所有的输出包裹到obj对象里。

import * as Diff from 'diff';

6、async await写异步代码就像写同步代码一样了，再也没有回调地域了。适用于有互相依赖的请求。

Async—声明一个异步函数(async function someName(){...})

• 自动将常规函数转换成Promise，返回值也是一个Promise对象
• 只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数
• 异步函数内部可以使用await

Await—暂停异步的功能执行(var result = await someAsyncCall();)

• 放置在Promise调用之前，await强制其他代码等待，直到Promise完成并返回结果
• 只能与Promise一起使用，不适用与回调
• 只能在async函数内部使用

pass(resource_type, task_id, name, query) {
            const passFun = async () => {
                this.isClick = true;
                this.hasData = false;
                let data = await this.PUT_REVIEW_STATUS({
                    resource_type,
                    task_id,
                    operation: 'pass'
                });
                if (data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '已审核通过！',
                        duration: 500,
                        onClose: () => {
                            this.isClick = false;
                            this.hasData = true;
                            this.$router.push({name, query});
                        }
                    });
                } else {
                    this.isClick = false;
                    this.hasData = true;
                    this.$message.warning(data.msg);
                }
            };
            this.$confirm('确认后该版本将成为线上版本，其余版本都不会通过审核，请确认是否继续此操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                passFun();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });         
            });
        },

以上是2020年12月工作总结的部分项目心得后者疑点，还有部分内容将在明天陆续更新出来，敬请期待。