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未定义

如何让这个功能被识别？还有别的办法吗？

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);

})();