个人中心
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
文章推荐： Javascript - 在函数完成后执行文档调用
文章推荐： xamarin - 在 VS2015 中，如何创建使用 .net 标准的 Xamarin xaml 表单项目？
文章推荐： vba - 选择其他工作表或工作簿时尝试使用 ThisWorkbook 设置范围值时出现问题
文章推荐： javascript - 通过 echo PHP 查找 deezer API 图稿
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com