在将它们包装在匿名函数中之后，为什么函数不起作用？

Question

我被告知要避免公共变量和冲突，最好将整个插件放在匿名函数中。我试图这样做，但功能不再起作用。

这是一个简单的例子：

(function($) {

  function changeIt() {
    $("button").text("off");
  }

}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeIt()">On</button>

该函数由HTML元素运行，但由于它在另一个函数内部，因此该元素无法找到它。

1-如何使其正常工作？

2-确保公共变量被覆盖并假设为私有变量是一种好方法吗？

由于

Answer 1

这与范围有关。 changeIt函数仅存在于函数（$）中。如果你想将它添加到公共范围，最好创建一个对象原型函数。

Answer 2

(function($) {}(jQuery)); - ＆gt;这将创建一个私有范围，基本上您的函数不会在window内定义，但在此私有范围内。

<button onclick="changeIt()">On</button> - ＆gt;这将尝试从changeIt执行window，undefined。

Answer 3

因为该函数不再存在于全局对象中，因此html元素中的onclick事件处理程序无法按名称找到它。

将您的HTML更改为

<button id="mybutton">On</button>

和您的代码

(function($) {

  $("#mybutton").click(function(){
    $("#mybutton").text("off");
  });

}(jQuery));

它将起作用，因为不需要按名称查找处理程序

Answer 4

元素上定义的内联事件只能访问全局范围，因此，当您将该函数移出全局范围并进入匿名函数创建的范围时，内联事件将无法再访问它。

您有两种选择：

停止使用内联事件

(function($) {

  function changeIt() {
    $("button").text("off");
      }
      $("button").click(changeIt);

 }(jQuery));

或全球定义

//(function($) {

  function changeIt() {
    $("button").text("off");
  }

//}(jQuery));

Answer 5

由于在全局范围内找不到changeIt（在浏览器的情况下为window），因此单击时不会触发该功能。实际上，您的控制台应该显示如下异常：“Uncaught ReferenceError：changeIt not defined”。

要解决这个问题并保留你的函数结构，请在“onload”处理程序中设置处理程序：

(function($) {

  $('#myBtn').on('click', function () {
    $("button").text("off");
  });

}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn">On</button>