js装饰器（Decorator）实现登录监测

我们一些操作前，必须得判断用户是否登录，比较点赞、结算、发送弹幕…按照之前的写法，我们必须在每一个方法中判断用户的登录情况，然后再进行业务的操作，很显然前置条件和业务又混到了一起，用修饰器，就可以完美的解决这一问题，代码如下

class User {
    // 获取已登录用户的用户信息
    @checkLogin
    getUserInfo() {
        /**
         * 之前，我们都会这么写：
         *      if(checkLogin()) {
         *          // 业务代码
         *      }
         *  这段代码会在每一个需要登录的方法中执行
         *  还是上面的问题，执行的前提和业务又混到了一起
         */
        console.log('获取已登录用户的用户信息')
    }
    // 发送消息
    @checkLogin
    sendMsg() {
        console.log('发送消息')
    }
}
// 检查用户是否登录，如果没有登录，就跳转到登录页面
function checkLogin(target, name, descriptor) {
    let method = descriptor.value
    // 模拟判断条件
    let isLogin = true
    descriptor.value = function (...args) {
        if (isLogin) {
            method.apply(this, args)
        } else {
            console.log('没有登录，即将跳转到登录页面...')
        }
    }
}
let u = new User()
u.getUserInfo()
u.sendMsg()

结语

以上只是修饰器的基本应用，只要我们掌握了原理，在实际的工作中，要思考自己的应用场景，只要我们涉及需要在执行前做一些处理的应用，不管是修改函数的参数值，还是增加属性，还是执行的先决条件，我们都可以使用修饰器，这种编程的方式，就是面向切面编程
更多关于js装饰器的内容可以看我这篇文章