javascript 闭包函数做显隐内容

下面是详细讲解“JavaScript闭包函数做显隐内容”的完整攻略。

什么是JavaScript闭包函数

JavaScript闭包函数是指内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。这是由于内部函数形成了一个闭包环境，保持了对其父级作用域的引用。通过此特性，闭包函数经常被用来保护私有变量并创建模块化结构。

如何通过闭包函数来做显隐内容

通过闭包函数，我们可以创建一个简单的代码段来让内容交替显示和隐藏。

下面是一个示例代码：

<button id="btn">点击我显示/隐藏内容</button>
<div id="content" style="display:none">这是要被显示或隐藏的内容</div>

<script>
  var btn = document.getElementById("btn");
  var content = document.getElementById("content");

  // 使用立即调用函数表达式（IIFE）创建闭包
  (function() {
    var isShown = false; // 初始状态为隐藏

    // 定义一个闭包函数来显示或隐藏内容
    function toggleContent() {
      if (!isShown) {
        content.style.display = "block";
        isShown = true;
      } else {
        content.style.display = "none";
        isShown = false;
      }
    }

    // 给按钮添加点击事件监听器
    btn.addEventListener("click", toggleContent);
  })();
</script>

在这个示例中，我们创建了一个立即调用函数表达式（IIFE），它定义了一个名为 toggleContent 的内部函数。该函数通过 isShown 变量来确定当前显示/隐藏状态，并在内容上切换显示样式。

我们也将内部函数添加为按钮的点击事件监听器，这样每次点击按钮时，都会触发 toggleContent 函数。这个函数通过闭包环境保持了对 isShown 变量的引用，因此可以正常工作。

另一个示例

当然，还有很多其他的实现方式。下面是另一个示例，这次我们将闭包函数封装在一个名为 makeToggleable 的函数中。该函数将返回一个可以切换显示/隐藏状态的函数，并保护了 isShown 变量，让它不会被意外修改。

<button id="btn">点击我显示/隐藏内容</button>
<div id="content" style="display:none">这是要被显示或隐藏的内容</div>

<script>
  var btn = document.getElementById("btn");
  var content = document.getElementById("content");

  // 定义一个函数来创建闭包
  function makeToggleable(element) {
    var isShown = false; // 初始状态为隐藏

    // 定义一个闭包函数来显示或隐藏内容
    function toggleContent() {
      if (!isShown) {
        element.style.display = "block";
        isShown = true;
      } else {
        element.style.display = "none";
        isShown = false;
      }
    }

    // 返回一个可以切换显示/隐藏状态的函数
    return toggleContent;
  }

  // 通过 makeToggleable 函数创建一个切换显示状态的函数
  var toggleContent = makeToggleable(content);

  // 给按钮添加点击事件监听器
  btn.addEventListener("click", toggleContent);
</script>

在这个示例中，我们把生成闭包函数的逻辑封装在了一个名叫 makeToggleable 的函数中。这个函数接受一个要显示/隐藏的 DOM 元素作为参数，并返回一个闭包函数来切换该元素的显示状态。每次调用 makeToggleable 函数都会创建一个新的闭包环境，保护其自己的 isShown 变量，所以可以创建多个切换显示状态的函数，并互不干扰。

总结

通过上述示例，我们可以知道如何使用JavaScript闭包函数来切换内容的显示和隐藏。从这些示例中可以看出，闭包函数能够保护变量不被意外修改，从而实现模块化设计。在实际开发中，我们可以根据需要使用不同的实现方式。