前端模块化-AMD规范与RequireJS

最新推荐文章于 2024-10-06 10:09:03 发布

逍遥的编程笔记

最新推荐文章于 2024-10-06 10:09:03 发布

阅读量727

点赞数 13

分类专栏：前端模块化文章标签：前端模块化打包工具

本文链接：https://blog.youkuaiyun.com/zhuanyemanong/article/details/141004395

版权

AMD 与 RequireJS

CommonJS 规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。由于 Node.js 主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以 CommonJS 规范比较适用。

但是如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，AMD 规范是其中比较成熟的一个。

对应的代码在 _demo/mini-amd-requireJS 目录下

AMD 规范

模块定义

在 AMD 规范中，每个模块都被定义为一个独立的文件，模块可以包含特定功能、代码段或对象。模块的定义使用 define 函数，该函数接受两个参数：模块标识符和一个返回模块内容的函数。

// 定义一个模块
define("myModule", function () {
   
  // 显示地return一个对象
  return {
   
    foo: function () {
   
      console.log("Hello from myModule!");
    },
  };
});

模块的引入

引入模块时使用 require 函数，通过指定模块标识符来加载依赖。当模块被引入时，相应的回调函数将执行，并返回模块的实例或功能。

// 引入模块
require(["myModule"], function (myModule) {
   
  myModule.foo(); // 调用模块中的函数
});

标志符

在 AMD 中，模块的标识符是一个字符串，用于唯一标识一个模块。模块标识符通常是模块的路径，可以包含文件路径或者相对路径。

// 使用标识符引入模块
require(["path/to/myModule"], function (myModule) {
   
  // 模块加载成功后的操作
});

案例实现

一个常规的 requireJS 项目结构如下：

project-directory/
|-- index.html
|-- scripts/
| |-- lib-a.js
| |-- my-script.js

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RequireJS项目展示</title>
    <!-- 引入 RequireJS -->
    <script src="https://requirejs.org/docs/release/2.3

最低0.47元/天解锁文章