AMD模块的使用案例-基于普通htm

zhanle_huang

已于 2024-06-20 16:17:34 修改

阅读量415

点赞数 3

分类专栏：前端 ES6 JavaScript 文章标签： javascript 前端 html5

于 2024-06-20 15:56:44 首次发布

本文链接：https://blog.csdn.net/ta_huang/article/details/139835149

版权

JavaScript 同时被 3 个专栏收录

45 篇文章 1 订阅

订阅专栏

前端

42 篇文章 0 订阅

订阅专栏

ES6

10 篇文章 0 订阅

订阅专栏

AMD模块的使用案例-基于普通html

实现过程
结果

实现过程

AMD 是一种适用于浏览器环境的模块化规范，主要用于异步加载模块。RequireJS 是实现 AMD 的一个流行库。

使用案例：
文件目录：
在这里插入图片描述

index.html，使用<script data-main="scripts/main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>引入 RequireJS 库，data-main 属性是 RequireJS 提供的一种机制，用于指定入口脚本文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script data-main="scripts/main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
    内容
</body>

</html>

模块1：greet.js

define([], function() {
    return {
        greet: function(name) {
            console.log("Hello, " + name + "!")
            return "Hello, " + name + "!";
        }
    };
});

模块2：math.js

define([], function() {
    // 模块代码
    return {
      method: function() {
        console.log('Hello from AMD module!');
      }
    };
  });

引入模块所用主文件：main.js

require(['math', 'greet'], function(math, greet) {
    math.method();
    greet.greet('6666')
    console.log('----', math, greet)
});

结果

在这里插入图片描述

zhanle_huang

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
AMD模块的使用案例-基于普通htm

AMD 是一种适用于浏览器环境的模块化规范，主要用于异步加载模块。RequireJS 是实现 AMD 的一个流行库。引入模块所用主文件：main.js。引入 RequireJS 库。index.html，使用。模块1：greet.js。模块2：math.js。
复制链接

扫一扫

专栏目录