AMD：javascript上下文的目的是啥？

Posted 2023-02-22

【中文标题】AMD：javascript上下文的目的是啥？

【英文标题】：AMD: what is the purpose in javascript context?AMD：javascript上下文的目的是什么？

【发布时间】：2012-04-26 23:15:57

【问题描述】：

关于 AMD（异步模块定义）我读到这样的阶段：

AMD 格式源于想要一种比 今天的“写一堆带有隐式依赖的脚本标签 您必须手动订购”以及易于使用的东西 直接在浏览器中。

javascript 上下文的目的是什么？你能举个例子吗？赞成和控制使用 AMD？

【参考方案1】：

早在 JavaScript 获得原生模块系统之前，将脚本放到页面上的唯一方法是 <script> 元素。这些按顺序执行，按照它们在 html 中出现的顺序。这意味着如果你的脚本依赖于 jQuery，那么 jQuery 的 <script> 必须在你的脚本的 <script> 之前。否则，它会爆炸。

将应用程序逻辑拆分为多个文件的情况并不少见，尤其是随着应用程序的增长。但是使用这种手动排序脚本的系统很快就会变成一场噩梦。您的脚本具有隐式依赖关系，其管理在其他地方定义。这就是 AMD 的用武之地。

AMD 是一个模块规范，而 RequireJS 是这样一个系统的实现。简而言之，它是您代码的包装器，它 1) 在调用之前保持脚本惰性，2) 允许您的脚本显式定义其依赖项，以及 3) 允许模块系统计算出哪些依赖项以什么顺序执行。

这是一个粗略的例子：

// your-app.js
define(['jquery', 'underscore'], function($, _)
  // Your script sits in this "wrapper" function.
  // RequireJS now knows app.js needs jquery and underscore.
  // It loads and executes them first before your script.
)

// jquery.js
define('jquery', [], function()
  // jQuery stuff
  return jQuery
)

// underscore.js
define('underscore', [], function()
  // underscore stuff
  return underscore
)

// Then on your HTML, load up your app.
<script data-main="path/to/app.js" src="path/to/require.js"></script>

【讨论】：

in require(['jQuery','underscore'],function($,_) -- 仅按该顺序加载 jQuery 和下划线。假设下划线中的函数正在使用jQuery，它会正常工作吗？

@AnkurMarwaha 在这种情况下，下划线 depends 取决于 jQuery。 Underscore 必须将 jQuery 定义为其依赖项，以便 jQuery 首先加载。应该担心的不是您的代码。此外，该数组中的依赖项不会按该顺序加载或执行。

【参考方案2】：

相互依赖的 Javascript 库通常要求以特定顺序加载它们。例如，包含 jQuery 库的 script 标签必须位于包含 jQuery UI 库的 script 标签之前。

如果库使用 AMD，则可以按任何顺序包含它们。 AMD 库会负责以正确的顺序初始化库，因为您可以指定哪个库依赖于哪个库。

（有点讽刺的是，包含 AMD 库的脚本标签当然必须位于包含任何使用 AMD 的库的代码之前...）