Question

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

在上面的代码中，当我点击超链接时，它显示未定义的testFunction。

如何在不污染全局名称空间的情况下执行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

如果您只是想阻止testFunction（）污染全局命名空间，您可以通过执行以下操作来实现显示模块设计模式的变体来实现此目的：

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

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

我建议使用事件处理程序，因为DOM操作是一项昂贵的操作。但请注意，这不是最佳解决方案，因为内联JavaScript并不好。

如何调用IIFE内部的功能

3 个答案: