将函数包装到匿名函数中后，为什么函数不起作用？

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函数仅存在于function（$）中。 如果要将其添加到公共范围，则最好创建对象原型的功能。

Answer 2

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

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

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

由于在全局范围（在浏览器中为window中未找到changeIt ，因此不会在单击时触发该功能。 实际上，您的控制台应显示类似如下的异常：“未捕获的ReferenceError：未定义changeIt”。

要解决此问题并保持函数结构，请在“ 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>