如何在 IIFE 内部调用函数

Question

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

In the above code, when I click on the hyperlink it is showing testFunction not defined.

How do I execute the testFunction without polluting the global name space?

Answer 1

This is why you don't use inline event handling. Define an event handler method inside your IIFE, otherwise the scope is not able to reach and testFunction is undefined.

<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

Use addEventListener instead of inline events

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

Answer 3

If you just want to prevent testFunction() to pollute the global namespace, you can do a variation of the revealing module design pattern to achieve this by doing the following:

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

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

I'd recommend this over using event handlers since DOM manipulation is an expensive operation. But please note that this also cannot be considered an optimal solution since inline JavaScript isn't nice. It's all about the trade-off you're willing to make.