沙箱模式

概念 :

• 利用了函数内 间接的返回了 一个函数
• 外部函数 返回了一个对象, 这个对象内书写了多少个函数
  • 1. 放置一些 外部函数的私有变量
  • 2. 对象内部 放置 若干个函数 ( 创建了一个沙箱 )
  • 3. 将对象返回到函数外

        function outer() {
            // 1. 放置 一些 外部函数的私有变量
            let a = 0
            let b = 999
            const obj = {
                // 2. 对象内部 放置若干个 函数 (创建了一个沙箱)
                getA: function () {
                    return a  // 向上找 找到a = 0
                },
                setA: function (val) {
                    a = val
                },
                getB() {
                    return b  // 向上找 找到a = 0
                },
                setB(val) {
                    b = val
                }
            }
            // 3. 将对象返回到函数外
            return obj
        }

        // 得到函数内部的对象 , 这个对象内部有多个操作函数
        const res = outer()
        // 得到函数内部的私有变量
        let winA = res.getA()  // 0
        // 修改函数内部 私有变量
        // res.setA('原本的值' + 1)
        res.setA(winA + 1)  // 1 
        console.log(res.getA());  // 1

沙箱模式语法糖

概念 :

• 在不影响功能的情况下, 给我们提供了一些更简单的操作方式

函数的柯理化

概念 :

• 一个函数接收多个参数能够完成功能, 柯理化函数就是将一个函数拆分为两个函数
• 每个函数都只接受一个参数, 然后完成的功能相同

函数柯理化的封装

• 函数柯理化内 : 外层函数 收集参数 内层函数 负责处理功能

        // 柯理化版 :
        function fn(a, b, c, d) {
            // console.log(fn.length);
            return a + '://' + b + ':' + c + d
        }
        fn()

        function curry(callback, ...arg) {  // 外层函数 : 负责接收参数
            // console.log('callback', callback);
            // console.log('arg', ...arg);
            /*
              curry 函数需要接收 两个参数
                  callback : 当参数传递足够时, 需要执行的函数
                  arg : 接收后续 这个参数传递的实参 (以数组的形式存储) 
            */
            return function (..._arg) {  // 内层函数: 负责处理功能
                _arg = [...arg, ..._arg]  // 把所有参数放在一个数组中, 方便统一维护与管理
                // if('当前接收参数的数量' === 'fn函数需要的采纳数数量'){
                //     '执行fn函数'
                // }else{
                //     '此时参数数量不满足函数要求, 需要继续收集参数'
                // }
                if (_arg.length === callback.length) {
                    return callback(..._arg)
                } else {
                    return curry(callback, ..._arg)
                }
            }
        }
        // const newfn = curry(fn, 'http', '127.0.0.1', '8080', '/index.html')
        // console.log(newfn());

        const newfn = curry(fn,'http')
        const newfn2 = newfn('127.0.0.1')
        const newfn3 = newfn2('8888')
        const newfn4 = newfn3('/a.html')
        console.log(newfn4);

函数的防抖节流

防抖 :

• 事件在开始执行时, 如果快速触发了第二次, 那么第二次会取代第一次, 只会执行最后一次

        // 自执行函数 :
        inp.oninput = (function (timer) {
            return function () {
                clearInterval(timer)
                timer = setInterval(() => {
                    console.log(this.value);
                }, 1000)
            }
        })(0)

节流

• 事件在执行时, 第一次开始执行时, 在结束之前 或者 之指定时间之前, 无法触发下一次
• 除非 等到第一次执行结束 或者 在指定时间到达之后, 才可以进行下一次

        // 节流的优化 : 
        inp.oninput = (function (flag) {  // 当前这个函数会立即执行, 然后返回一个 函数给到 inp.oninput
            return function fn() {
                // 使用 flag 的时候会现在 当前作用域找, 没找到, 然后会去上层作用域(自行函数内)找, 这里找到了 形参flag, 赋为初始值 
                if (flag === false) {
                    return
                }
                flag = false
                setInterval(() => {
                    flag = true
                    console.log(this.value);
                }, 300)
            }   // true

        })(true)