JSFullStack

Appearance

AMD ​

AMD（Asynchronous Module Definition）是一种异步模块定义规范，它以浏览器为目标执行环境。

AMD 的策略是让模块声明自己的依赖，运行在浏览器中的模块会按需获取依赖，并在依赖加载完成后立即执行依赖的模块。

浏览器环境中define函数可以用来定义模块，RequireJS 的require函数可以用来加载模块。

html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
  </head>
  <body>
    <h1>AMD Demo</h1>
  </body>
  <script>
    // 定义模块 moduleA
    define("moduleA", [], function () {
      const moduleA = {
        doModuleA: function () {
          document.getElementsByTagName("h1")[0].innerText = "Hello from moduleA!";
        },
      };

      return moduleA;
    });

    // 定义模块 moduleB 依赖 moduleA
    define("moduleB", ["moduleA"], function (moduleA) {
      return {
        doModuleB: function () {
          moduleA.doModuleA();
        },
      };
    });

    // 使用 require 引入模块 moduleB
    require(["moduleB"], function (moduleB) {
      moduleB.doModuleB();
    });
  </script>
</html>
html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
  </head>
  <body>
    <h1>AMD Demo</h1>
  </body>
  <script>
    // 定义模块 moduleA
    define("moduleA", function (require, exports, module) {
      exports.doModuleA = function () {
        document.getElementsByTagName("h1")[0].innerText = "Hello from moduleA!";
      };
    });

    // 定义模块 moduleB 依赖 moduleA
    define("moduleB", function (require, exports, module) {
      var moduleA = require("moduleA");
      exports.doModuleB = function () {
        moduleA.doModuleA();
      };
    });

    // 使用 require 引入模块 moduleB
    require(["moduleB"], function (moduleB) {
      moduleB.doModuleB();
    });
  </script>
</html>
html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
  </head>
  <body>
    <h1>AMD Demo</h1>
    <button id="loadModule">Load Module</button>
    <script>
      // 定义模块 moduleA
      define("moduleA", [], function () {
        return {
          showMessage: function () {
            document.getElementsByTagName("h1")[0].innerText = "Hello from moduleA!";
          },
        };
      });

      document.getElementById("loadModule").onclick = function (e) {
        // 判断是不是双击
        if (e.detail === 2) {
          // 使用 require 引入模块 moduleA
          require(["moduleA"], function (moduleA) {
            moduleA.showMessage();
          });
        }
      };
    </script>
  </body>
</html>