语言►JavaScript►模块化方案►AMD

什么是AMD

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/16/%E4%BB%80%E4%B9%88%E6%98%AFAMD/

摘要

本文主要讲述了：

  1. 什么是 AMD
  2. 示例

正文

什么是 AMD

ServerJS 项目通过新增 API，在浏览器端之外（例如服务器端），扩大了 JavaScript 的使用场景。

项目开展得如火如荼之际，开发者自然期望能在浏览器端也享受到项目带来的红利。于是项目组更名为 CommonJS（简称 CJS）。

由于服务器端和浏览器端环境的差异，想要一统两端，必须对现有的模块化方案（即服务器端的模块化方案）做出修改。部分开发者提出了 Modules/AsynchronousDefinition 方案。由于各种原因，众人最终没能达成共识，双方于是分道扬镳。

Modules/AsynchronousDefinition 方案的拥趸另行成立了 AMD（Asynchronous Module Definition）项目组，致力于制定 AMD 规范。

RequireJS 是一个 JavaScript 文件和模块加载器，它实现了 AMD 规范。

示例

此示例可以运行在 RequireJS 上。

learn_amd/index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script data-main="js/main.js" src="js/require.js"></script>
  </body>
</html>

learn_amd/js/main.js

1
2
3
require(['foo'], function (foo) {
  console.log(foo);
});

learn_amd/js/foo.js

1
2
3
4
define({
  color: 'black',
  size: 'unisize',
});

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/16/%E4%BB%80%E4%B9%88%E6%98%AFAMD/

本文对你有帮助？请支持我

支付宝
微信