gpt4 book ai didi

javascript - JavaScript 库的代码模式

转载 作者:行者123 更新时间:2023-12-02 13:51:55 26 4
gpt4 key购买 nike

在 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

问题:

  1. var mylibrary = (function() { ... })(); 技巧的目的是什么?

  2. 模式 #1 和 #2 之间有区别吗? (我会说不)

  3. 有什么理由更喜欢#3而不是#2吗?
    看来两者都可能很有趣。 MathJax 的示例:模式#2 是有道理的(它会自动解析 DOM 并渲染数学公式),这是他们选择的(参见 this example )。模式 #3,需要一个操作来实际运行渲染也是有意义的。

最佳答案

  1. 这样做的目的是创建一个模块化的 IIFE (立即调用函数表达式)。这对于避免污染/将变量分配给全局命名空间很有用,并有助于防止与应用程序中可能出现的其他外部插件/依赖项发生冲突。

  2. 是的。在第一个中,您的脚本加载到头部,而您的脚本在 #2 中的正文关闭之前加载。建议在关闭正文之前加载脚本,这样您的页面在加载 javascript 文件时就不会挂起。

  3. 选择#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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com