將函數包裝到匿名函數中后，為什么函數不起作用？

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>