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>

但是,我建议不要以这种方式绑定您的事件处理程序.使用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);

})();