定义了两个自调用匿名函数导致错误

Question

我有两个自调用函数，但出现错误

Uncaught TypeError: undefined is not a function

代码：

(function(){  //a.min.js
    console.log('main')
})()

(function(){ //b.min.js
    console.log('two')
})()

感谢大家提供的解决方案，但我想知道如果通过 gulp

等自动化工具完成连接和缩小，如何解决这个问题

Answer 1

你忘了分号

(function(){
    console.log('main')
})();

(function(){
    console.log('two')
})();

这使得第一个 IIFE 被解释为未关闭，而第二个代码块会产生错误，因为它被解释为第一个 IIFE 的参数。

Answer 2

问题是这被解释为

(expression)(args to call function with)(args to call function)(args to call function)

而你真正想要的是

(expression)(args to call function with)(expression)(args to call function)

唯一的方法是用分号打断预期

(expression)(args to call function with);(expression)(args to call function)

或者，您可以使用不太标准的 !

!function(){
 console.log('main')
}()

!function(){
 console.log('two')
}()

Answer 3

不用分号解决这个问题的一种方法是将每个 IIFE 包装在一个块中：

{(function(){
    console.log('main')
})()}

{(function(){
    console.log('two')
})()}

或者，也许更简单，将两者结合起来：

(function(){
    console.log('main')
    console.log('two')
})()

最后一个选择是将所有 IIFE 放入一个数组中，然后按顺序调用它们：

[
    function(){
        console.log('main')
    },

    function(){
        console.log('two')
    }
].forEach(function (fn) { fn() })

如果您需要很多这些，最后一个可能会很好，但同样，如果可能，最好结合使用。

Two self invoking anonymous functions defined causing error