IIFE内部的功能无法识别 [英] function inside of IIFE not recognized

问题描述

我有一个IIFE，我试图将其制作成书签。我希望模态化的小书签会弹出，其中包含一些将调用函数的按钮。但是，当我具有这样的结构时：

 （function（）{
 
 var __myFn = function（str）{//也尝试过函数__myFn（）{..} 
 alert（str）; 
} 
 
 //一些AJAX可以使用`结果的
 
 document.getElementById（ resultDiv）。innerHTML =< span onclick ='__ myFn（ + result.someData +）'> test< / span> 
 
 
}（））; 
  

我得到未被捕获的ReferenceError：__myFn未定义

如何识别此函数？还有另一种方法吗？

解决方案

当您使用 var 关键字时，您将创建一个局部变量，该变量对于由于封闭上下文是一个函数，因此 __ myFn 对于函数本身而言是本地的，在外部是未知的（即，在全局上下文中未知）。 >

如果您想使用里面的东西，您将ave返回对其的引用。您可以为此使用类似模块模式的内容：

  var myModule =（function（）{
 
 var __myFn = function（str）{
 alert（str）; 
} 
 
 return {
 myFn：__myFn 
}; 
 
}）（）; 
  

然后您可以执行以下操作：

  //一些使用`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）; 
 
}）（） ; 
  

I have an IIFE that I am trying to make into a bookmarklet. I would like to have the modal the bookmarklet will pop up have some buttons that will call a function. However, when I have a structure like this:

(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>


}());

I get Uncaught ReferenceError: __myFn is not defined

How can I make this function recognized? Is there another way?

解决方案

When you use the var keyword, you're creating a variable that is local to the scope of the enclosing context. Since the enclosing context is a function, __myFn is local to the function itself and not known outside (i.e., not known in the global context).

If you want to use something that is inside, you would have to return a reference to it. You can use something like the module pattern for this:

var myModule = (function(){

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

   return {
       myFn: __myFn
   };

})();

Then you can do:

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

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

However, I recommend not binding your event handler this way. Use jQuery or use DOM methods (addEventListener) to bind event handlers. This way you could even do it inside the IIFE itself, which means you don't even have to return something from the IIFE. This means your global context is not polluted. Right now, the only reason you have to return something from the IIFE is because you are binding an event-handler inline via HTML.

Here are two examples. The first one assumes that the IIFE returns a reference to __myFn:

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

Here is the second example that does it within the IIFE itself:

(function(){

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

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

})();

这篇关于IIFE内部的功能无法识别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！