沙箱模式

沙箱模式

• 利用了函数内"间接"的返回了一个函数
• 外部函数 返回了一个对象,这个对象内书写多个函数

    function outer() {
      // 1. 放置一些外部函数的私有变量
      let a = 0
      let b = 999
      const obj = {
        // 2. 放置若干个 函数
        getA: function() {
          return a
        },
        setA: function(val) {
          a = val
        },
        getB() {
          return b
        },
        setB(val) {
          b = val
        }
      }
      // 3. 将对象返回到函数外
      return obj
    }
    // 得到函数内部的对象,这个对象内部有多个操作函数
    const res = outer()
    // 得到函数内部的私有变量a
    let winA = res.getA()
    console.log(winA) //0
    // 修改函数内部的私有变量a
    res.setA(winA + 1)
    console.log(res.getA()) //1

课堂案例

    // 0.获取标签
    const add1 = document.querySelector('.add1')
    const inp1 = document.querySelector('.inp1')
    const sub1 = document.querySelector('.sub1')
    // 沙箱模式创建变量
    function outer() {
      let count = 1
      return {
        getCount() {
          return count
        },
        setCount(val) {
          count = val
        }
      }
    }
    const res = outer()
    // console.log(res)
    add1.onclick = function() {
      // 增加
      // console.log(res.getCount()) //1
      let num = res.getCount()
      //在原本的数字上加1
      res.setCount(num + 1)
      inp1.value = res.getCount()
    }
    sub1.onclick = function() {
      // 减少
      let num = res.getCount()
      //在原本的数字上减1
      res.setCount(num - 1)
      inp1.value = res.getCount()
    }
    // 正常版写法
    /*let count = 1
    add1.onclick = function() {
      // 增加
      count++
      inp1.value = count
    }
    sub1.onclick = function() {
      // 减少
      count--
      inp1.value = count
    }*/

沙箱模式语法糖

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

    // 语法糖版,其实就是利用getter 和 setter 帮助我们简化了一些操作与代码
    function outter() {
      let a = 1

      return {
        get a() {
          return a
        },
        set a(val) {
          a = val
        }
      }
    }
    const res = outter()
    console.log(res.a) //1
    res.a = 999
    console.log(res.a) //999
    // 普通版
    /*function outter() {
      let a = 1
      return {
        getA() {
          return a
        },
        setA(val) {
          a = val
        }
      }
    }
    const res = outter()
    res.setA(99)
    console.log(res.getA()) //99*/