有人可以解释Javascript经典模块模式以及我们为什么要使用它？ [重复]

Question

这个问题在这里已有答案：

• What is the (function() { } )() construct in JavaScript? 23回答
• What is the purpose of a self executing function in javascript? 16个答案
• What is this JavaScript pattern called and why is it used? 6个答案

我遇到了这个代码，我不明白发生了什么，然后我删除了IIFE括号，console.log不再工作，有人可以解释发生了什么，它被称为经典模块模式。我们为什么要使用它？

var foo = (function(){
  var publicAPI = {
    bar: function(){
      publicAPI.baz()
    },
    baz: function(){
      console.log('baz')
    }
  }
  return publicAPI
})()

foo.baz()
foo.bar()

删除IIFE括号，console.log不再起作用。

var foo = function(){
  var publicAPI = {
    bar: function(){
      publicAPI.baz()
    },
    baz: function(){
      console.log('baz')
    }
  }
  return publicAPI
})

非常感谢你提前。

Answer 1

鉴于：

foo = function () {}

foo就是那个功能。

鉴于：

foo = function () {}();

foo是该函数的返回值。

---

如果你不调用该函数，那么foo会得到一个不同的值。

Answer 2

在IIFE中，您在第一对括号(function(){...})()中执行匿名函数，该函数返回一个在其中包含bar和baz方法的对象。

所以在执行IIFE之后，foo引用了publicAPI对象，你称之为bar和baz方法。

如果删除括号，它只会变成一个函数语句，它不执行该函数或返回publicAPI对象。所以foo会引用函数对象，直到你执行它为止foo.bar()或foo.baz()将无法使用。

//foo is just referring to the function object if you don't execute it
var foo = function(){
  var publicAPI = {
    bar: function(){
      publicAPI.baz()
    },
    baz: function(){
      console.log('baz')
    }
  }
  return publicAPI
}
//Execute foo to get the returned publicAPI object
foo().bar();
foo().baz();

因此，使用括号包围函数定义会将其转换为表达式，并且可以调用表达式。

(function{...}) --> Expression

您可以调用此表达式并将返回的值分配给变量（在您的情况下，它是foo）。

var foo = (function{...})() --> Executed the function expression, foo contains the result of the invokation