编程语言
首页 > 编程语言> > JS 模块化 - 03 AMD 规范与 Require JS

JS 模块化 - 03 AMD 规范与 Require JS

作者:互联网

1 AMD 规范介绍

AMD 规范,全称 Asynchronous Module Definition,异步模块定义,模块之间的依赖可以被异步加载。

AMD 规范由 Common JS 规范演进而来,前文介绍 Common JS 规范时说过,浏览器端无法直接使用 Common JS,需要使用 browserify 编译后才能运行。而 AMD 规范规范则专注于浏览器端。

1.1 定义模块

AMD 规范定义模块使用 define 函数,函数声明如下:

define(id?, dependencies?, factory)

参数含义:

- id:非必填,模块的名字。如果没有传该参数,模块的名字默认为模块加载器请求的指定脚本的名字
- dependencies:非必填,数组,定义的这个模块所需要依赖的模块的数组。如果定义的这个模块不依赖于其他模块,则不需要传递该参数。
- factory:必填,工厂方法。如果为对象,则表示这个模块输出的值;如果为函数,则是这个模块要干的事。

如果传递了 dependenciesdependencies 中依赖的每项模块会在当前模块的 factory 之前执行。

1.2 加载模块

与 Common JS 规范类似,加载模块使用 require 函数,但 AMD 规范中该函数有两个参数,语法格式如下:

require([module], callback)

参数含义:

- module:数组,要加载的模块数组。
- callback:模块加载成功之后要干的事。

2 Require JS

require.js 是符合 AMD 规范的 JS 库,使用 require.js 可以实现 AMD 规范,进行模块的定义和加载。

2.1 使用准备

首先下载 require.js 文件。require.js 可以从 github 下载。(不知道是不是网络原因,官网我打不开)

在项目中创建 lib 目录,将 require.js 文件复制到 lib 目录中。

2.2 初始化目录

在 lib 同级目录创建目录 modules,在 modules 目录中分别创建 module1.js 和 module2.js 代表两个模块。

同时下载 moment.js 文件,将其复制到 lib 目录中。

在 lib 同级目录创建入口 HTML 和 JS 文件,名字分别为:index.html 和 index.js.

此时目录结构为:

|- 03_AMD/
	|- lib/
		|- require.js
		|- moment.js
	|- modules/
		|- module1.js
		|- module2.js
	|- index.html
	|- index.js

在 index.html 文件中通过 script 标签引入 require.js 文件,同时指定 data-main 属性:

<script src="./lib/require.js" data-main="./index.js"></script>

data-main 属性指定了在加载完 require.js 属性后,执行的入口文件,该文件也称为 主模块 。咱们的主模块为 index.html 同级路径下的 index.js 。

2.3 路径配置

在入口 JS 文件 index.js 中对模块进行配置:

requirejs.config({
  baseUrl: './',
  paths: {
    m1: './modules/module1',
    m2: './modules/module2',
    moment: './lib/moment'
  },
  shim: {
    moment: {
      exports: 'moment'
    },
  }
})
  1. baseUrl 属性:指定了基本路径,后面模块路径配置都是相对于这个基本路径。
  2. paths 属性:配置各个模块的名称及对应文件路径(省略 .js 后缀)。上面分别给 module1.jsmodule2.jsmoment.js 三个模块命名为 m1, m2, moment。名字可以取其他名字,但路径要正确。
  3. shim 属性:当使用其他不符合 AMD 规范的模块时,可以使用该属性导出模块。(这里选择的 moment.js 是兼容 AMD 规范的库,无须配置到 shim 属性中,此处仅为了简单演示)

2.4 定义模块

前面创建了两个自定义模块,现在分别编写这两个模块。

module1.js 中定义一个简单的加法运算:

define(function () {
  console.log('in module1.')

  function sum(num1, num2) {
    console.log('module1 sum function.', num1, num2)
    return num1 + num2
  }

  return {
    sum
  }
})

module2.js 定义一个 calculate 函数,在该函数中需要调用 moment.js 中的格式化函数、 module1.js 中的 sum 函数,也就是说该模块(m2)依赖于 moment 模块 和 m1 模块:

define(['m1', 'moment'], function (m1, moment) {

  console.log('in module2.')

  function calculate (n1, n2) {
    console.log('begin calc: ', moment().format('YYYY MMM Do h:mm:ss a'))
    return m1.sum(n1, n2)
  }

  return {
    calculate
  }
})

2.5 使用模块

前面在主模块 index.js 中定义了模块的路径,现在继续在该文件中通过 require 函数使用其他模块:

// ...

require(['m2'], function (m2) {
  const result = m2.calculate(10, 20)
  console.log(result)
})
JAVASCRIPT 复制 全屏

主模块中加载 m2 模块(module2.js),并调用 m2 模块中的 calculate 函数。

2.6 运行

在浏览器中运行 index.html,浏览器控制台输出如下:

image-20220921224121047

主模块(index.js)依赖于 m2 模块(module2.js),m2 模块又依赖于 m1 模块(module1.js),故 require.js 会首先加载 module1.js,输出 in module1.,然后加载 module2.js, 输出 in module2.

m1m2moment 三个模块都加载完毕后,才会执行主模块中的 factory 工厂函数。

标签:AMD,Module,数组,modules,目录,模块,浏览器
来源: