IIFE內部的功能無法識別

Question

我有一個IIFE，嘗試將其制作為書簽。 我希望模態化的小書簽會彈出，其中包含一些將調用函數的按鈕。 但是，當我有這樣的結構時：

(function(){

   var __myFn = function(str){ //also have tried function __myFn(){..}
      alert(str);
   }

   //some AJAX that builds HTML with the `result`s

   document.getElementById("resultDiv").innerHTML = "<span onclick='__myFn(" + result.someData+ ")'>test</span>


}());

我收到Uncaught ReferenceError: __myFn is not defined

如何使該功能得到認可？ 還有另一種方法嗎？

Answer 1

當使用var關鍵字時，您正在創建一個變量，該變量對於封閉上下文的作用域是局部的。 由於封閉上下文是一個函數，因此__myFn對於函數本身__myFn是本地的，並且在外部未知（即，在全局上下文中未知）。

如果要使用其中的某些內容，則必須返回對其的引用。 您可以為此使用類似模塊模式的內容：

var myModule = (function(){

   var __myFn = function(str) { 
      alert(str);
   }

   return {
       myFn: __myFn
   };

})();

然后，您可以執行以下操作：

//some AJAX that builds HTML with the `result`s

document.getElementById("resultDiv").innerHTML = "<span onclick='myModule.myFn(" + result.someData+ ")'>test</span>

但是，我建議不要以這種方式綁定事件處理程序。 使用jQuery或使用DOM方法（ addEventListener ）綁定事件處理程序。 這樣，您甚至可以在IIFE內部進行操作，這意味着您甚至不必從IIFE返回任何內容。 這意味着您的全局環境沒有受到污染。 現在，您必須從IIFE返回某些信息的唯一原因是因為您要通過HTML內聯綁定事件處理程序。

這是兩個例子。 第一種假定IIFE返回到參考__myFn ：

var resultDiv = document.getElementById("resultDiv");
resultDiv.addEventListener("click", myModule.myFn, false);

這是在IIFE內部執行此操作的第二個示例：

(function(){

   var __myFn = function(str) { 
      alert(str);
   }

   var resultDiv = document.getElementById("resultDiv");
   resultDiv.addEventListener("click", __myFn, false);

})();

Answer 2

由於我不明白的原因，我發現刪除聲明中的“ var”使其生效。

示例1（失敗）：

(function() {

    var counter = 0;
    var init = function() { console.log("init called"); }
})();

init(); // regardless of whether I named the function or not, this fails.

但是：示例2（有效）：

(function() {
    var counter = 0;
    init = function() { console.log("init called"); }
})();

init(); // this calls the function just fine.

注意，您可以通過這種方式在iife中添加任意數量的函數。