关于javascript:JS装饰器的理解和应用

装璜器 – 外表上了解是 用来装璜个啥货色的货色
是指这个货色原本就有，只是通过什么形式或渠道 加工装璜了一下
常被用于插件的封装

常见利用

特务装璜

个别用于单元测试

• 定义一个一般的函数

function f(a, b) {alert(a + b)
}

• 想要封装该函数，使其可能多出一些没有的性能

function spy(func) { // 传入函数，返回一个新的函数
    return function(...args) {// 内部执行函数 func 时的参数
        let _args = args.push('i')
        func.apply(this, _args)
    }
}

f = spy(f) // 通过装璜
f(1,2) // alert 进去是 1，2 ,i

延时装璜

• 还是下面那个一般的参数f
• 想封装一个函数delay，传入毫秒工夫后，毫秒后执行该一般函数f

function delay(func, ms) {return function(...args) {setTimeout(() => {func.apply(this, args)
        }, ms)
    }
}

f1000 = delay(f, 1000) // 1s 后执行
f5000 = delay(f, 5000) // 5s 后执行

去抖装璜

• 还是下面那个一般的参数f
• 想封装一个函数，f函数执行之后的一小段时间内的继续执行操作，不触发 f 函数执行
• 就是相似于一个按钮在 2 秒钟内点 20 下，也只执行一下

function debounce(func, ms) {
    let isCool = false // 是否为解冻状态
    return function(...args) {if (isCool) return // 解冻状态间接跳出不继续执行
        // 非解冻状态
        func.apply(this, args) // 执行
        isCool = false // 执行后把状态置为解冻状态
        setTimeOut(() => {isCool = true}, ms) // 过 ms 工夫后再把状态置为冻结
    }
}

let p5 = debounce(f, 5000)

节流装璜

• 还是下面那个一般的参数f
• 想封装一个函数，f函数执行之后的一小段时间内的继续执行操作，不触发 f 函数执行，但 ms 工夫到了当前会主动执行这段时间中最初一次触发的操作
• 就是相似于鼠标拖动，在 1s 内可能触发 200 次，取最初一次的后果执行

function throttle(func, ms) {
    let isCool = false,
    _self,
    _args;
    function w(...args) {if (isCool) {
            _self = this
            _args = args
            return
        } // 如果解冻状态，间接返回，并记录下来传递的参数
        // 非解冻状态
        func.apply(this, args) // 执行
        isCool =true // 执行后解冻
        setTimeout(() => {
            isCool = false // 工夫到了之后冻结
           if (_args && _args.length) { // ms 工夫过后，如果在解冻期有触发操作，则执行一次
                w.apply(_self, _args)
                _self = null
                _args = null // 执行后把解冻期参数置空，防止 ms 之后对之前的操作进行下一轮执行
           } 
        }, ms)
        
    }
    return w
}

let w5 = throttle(f, 5000)