javascript - 无法识别 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 是函数本身的局部变量，在外部是未知的(即，在全局上下文中是未知的)。

如果你想使用里面的东西，你必须返回对它的引用。您可以为此使用类似模块模式的东西:

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>

但是，我建议不要以这种方式绑定(bind)您的事件处理程序。使用 jQuery 或使用 DOM 方法 ( addEventListener ) 来绑定(bind)事件处理程序。这样你甚至可以在 IIFE 内部完成它，这意味着你甚至不必从 IIFE 返回一些东西。这意味着您的全局上下文没有受到污染。现在，您必须从 IIFE 返回一些东西的唯一原因是您正在通过 HTML 内联绑定(bind)事件处理程序。

这里有两个例子。第一个假设 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);

})();