Как вызвать функцию внутри IIFE

Question

<a onclick="testFunction(); return false;">Click me</a> 
<script type="text/script"> 
    (function(){ 
     var testFunction = function(){ 
      console.log('From test function'); 
     }; 
    })(); 
</script> 

В приведенном выше коде, когда я нажимаю на гиперссылку, он показывает testFunction не определен.

Как выполнить тестовую функцию без загрязнения глобального пространства имен?

Answer 1

Вот почему вы не используете встроенную обработку событий. Определите метод обработчика событий внутри вашего IIFE, в противном случае область не может достигать и testFunction не определена.

<a id="clickMeInstead">Click me</a> 
<script type="text/script"> 
    (function(){ 
     var testFunction = function(){ 
      console.log('From test function'); 
     }; 
     var link = document.getElementById("clickMeInstead"); 
     link.addEventListener("click", function() { 
      //run code here 
     }); 
    })(); 
</script> 

Answer 2

Использование addEventListener вместо встроенных событий

var link = document.getElementsByTagName("a")[0]; 
link.addEventListener("click", function() { 
    console.log('From test function'); 
}); 

Answer 3

Если вы просто хотите, чтобы предотвратить функции теста() загрязнять глобальное пространство имен, вы можете сделать изменение откровенного шаблона дизайна модуля для достижения этой цели пути делая следующее:

<a onclick="coverModule(); return false;">Click me</a> 

<script> 
     function coverModule() { 
      return (function testFunction() { 
        alert('From test function'); 
      })(); 
     } 
</script> 

Я бы рекомендовал это с использованием обработчиков событий, поскольку манипуляция DOM является дорогостоящей операцией. Но учтите, что это не оптимальное решение, поскольку встроенный JavaScript не очень приятный.