js闭包的实用性----应用场景

上篇文章说了闭包的形成以及原理。
这篇说一说闭包的实用性。

应用场景一：事件节流与事件防抖

这里讲一个事件防抖的例子，在监听input值发生变化的时候，定时发送请求，预防请求过多，服务器性能过载。

function antiShake(fn, wait) {
     let timeOut = null;
     return args => {
         if (timeOut) clearTimeout(timeOut) 
             timeOut = setTimeout(fn, wait);
     }
 }
 function demo2(){
     console.log("ajax请求");
 }
 let telInput = document.querySelector('input');
 telInput.addEventListener('input',antiShake(demo2,1000));

应用场景二 : 调整字号

样式部分

<style>
    body {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 12px;
        }

        h1 {
            font-size: 1.5em;
        }

        h2 {
            font-size: 1.2em;
        }
    </style>

js部分（dom部分不难，脑补下就ok）

 function makeSizer(size) {
     return function() {
              document.body.style.fontSize = size + 'px';
          };
      }

      var size12 = makeSizer(12);
      var size14 = makeSizer(14);
      var size16 = makeSizer(16);
      //size12，size14 和 size16 三个函数将分别把 body 文本调整为 12，14，16 像素。
      //我们可以将它们分别添加到按钮的点击事件上。如下所示：
      document.getElementById('size-12').onclick = size12;
      document.getElementById('size-14').onclick = size14;
      document.getElementById('size-16').onclick = size16;

应用场景三 : 闭包模拟私有方法

编程语言中，比如 Java，是支持将方法声明为私有的，即它们只能被同一个类中的其它方法所调用。
而 JavaScript 没有这种原生支持，但我们可以使用闭包来模拟私有方法。
私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。
下面的示例展现了如何使用闭包来定义公共函数，并令其可以访问私有函数和变量。这个方式也称为 模块模式（module pattern）：

 var Counter = (function() {
     var privateCounter = 0;
      function changeBy(val) {
          privateCounter += val;
      }
      return {
          increment: function() {
              changeBy(1);
          },
          decrement: function() {
              changeBy(-1);
          },
          value: function() {
              return privateCounter;
          }
      }   
  })();

  console.log(Counter.value()); /* logs 0 */
  Counter.increment();
  Counter.increment();
  console.log(Counter.value()); /* logs 2 */
  Counter.decrement();
  console.log(Counter.value()); /* logs 1 */

在之前的示例中，每个闭包都有它自己的词法环境；而以上的示例我们只创建了一个词法环境，为三个函数所共享：Counter.increment，Counter.decrement 和 Counter.value。

该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。

这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。

这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。

应用场景四 : 使用闭包创建多个计数器

定义了一个匿名函数，用于创建一个计数器。立即执行了这个匿名函数，并将他的值赋给了变量Counter。
可以把这个函数储存在另外一个变量makeCounter中，并用他来创建多个计数器。

 var makeCounter = function() {
     var privateCounter = 0;
       function changeBy(val) {
           privateCounter += val;
       }
       return {
           increment: function() {
               changeBy(1);
           },
           decrement: function() {
               changeBy(-1);
           },
           value: function() {
               return privateCounter;
           }
       }  
   };

   var Counter1 = makeCounter();
   var Counter2 = makeCounter();
   console.log(Counter1.value()); /* logs 0 */
   Counter1.increment();
   Counter1.increment();
   console.log(Counter1.value()); /* logs 2 */
   Counter1.decrement();
   console.log(Counter1.value()); /* logs 1 */
   console.log(Counter2.value()); /* logs 0 */

请注意两个计数器 Counter1 和 Counter2 是如何维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。
每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。
然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

以这种方式使用闭包，提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。

那么，闭包这么好用，是不是可以随心所欲的用呢，下一篇说说闭包的性能考量

js闭包的实用性----应用场景

猜你喜欢