在 JavaScript 库(jQuery、MathJax、标记的 Markdown 渲染库等)中，我经常看到各种模式:
模式#1
index.html
...
<script src="mylibrary.js"></script>
</body>
</html>
mylibrary.js
var mylibrary = (function() {
...
var myVar = ...
...
})();
模式#2
index.html
<html>
<head>
...
<script src="mylibrary.js"></script>
</head>
<body>
...
</body>
</html>
相同的 mylibrary.js
<小时/>模式#3
index.html
<html>
<head>
...
<script src="mylibrary.js"></script>
</head>
<body>
...
<script>
mylibrary.run(); // explicitly needs to be run
</script>
</body>
</html>
相同的 mylibrary.js
问题:
var mylibrary = (function() { ... })();技巧的目的是什么？模式 #1 和 #2 之间有区别吗？ (我会说不)
有什么理由更喜欢#3而不是#2吗？
看来两者都可能很有趣。 MathJax 的示例:模式#2 是有道理的(它会自动解析 DOM 并渲染数学公式)，这是他们选择的(参见 this example )。模式 #3，需要一个操作来实际运行渲染也是有意义的。
最佳答案
这样做的目的是创建一个模块化的 IIFE (立即调用函数表达式)。这对于避免污染/将变量分配给全局命名空间很有用，并有助于防止与应用程序中可能出现的其他外部插件/依赖项发生冲突。
是的。在第一个中，您的脚本加载到头部，而您的脚本在 #2 中的正文关闭之前加载。建议在关闭正文之前加载脚本，这样您的页面在加载 javascript 文件时就不会挂起。
选择#3 而不是#2。至于为什么，请引用第1点。
更新
下面是一个示例，说明如果您只是在全局命名空间内分配一个变量，情况会是什么样子。
var exampleGlobal = "I'm an example global variable";
function one() {
exampleGlobal = 1;
}
....
function two() {
exampleGlobal.charAt(0);
}
one(); // Changes the exampleGlobal to a Number
two(); // Tries to use a string-based instance method but throws an error since exampleGlobal is now a number
在这里，我们看到 exampleGlobal 已公开并且可供该脚本中的所有函数使用。在这种情况下，很容易犯错误并在脚本中的任何位置更改此变量的值/用途。这就是 IIFE 发挥作用的地方:
var exampleModule = (function() {
var privatized = "I'm only accessible within this module";
return {
privatized: privatized
}
}());
在上面我们只创建了一个全局变量，它充当一个模块并封装仅与其相关的值/函数。尝试在全局范围内实现私有(private)化。您会发现它返回未定义，因为它在全局范围内不可用，除非您显式调用该模块及其返回值:
var exampleModule = (function() {...}());
console.log(privatized); // undefined
console.log(exampleModule.privatized); // returns: "I'm only accessible within this module"
IIFE 的另一个优点是您可以安全地避免应用程序中可能发生的命名冲突。例如，jQuery 和 Mootools 共享 $ 字符来调用各自的函数调用。如果您想安全地使用 jQuery，而不与 Mootools 发生任何冲突，您可以将 $ 对象作为参数传递到 IIFE 中，然后 IIFE 会将其屏蔽在全局范围之外。
(function($) { // Here this is just the parameter we'd like to refer jQuery as
$('div');
}(jQuery)); // You pass in the actual jQuery object here which is when/where the function is immediately invoked.
关于javascript - JavaScript 库的代码模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40962914/