特点：异步加载规范
语法：
- 定义模块
define(function () {
return module
})
define(['module1', 'module2'], function (module1, module2) {
return module
})
- 导入模块
requireJs(['module1', 'module2'], function (module1, module2) {
// to do something
})
使用的标准库requireJs
示例目录机构如下：
image.png
1、index.html引入模块主文件：
<!DOCTYPE html>
<html>
<head>
<title>AMD模块规范</title>
</head>
<body>
<!-- data-main: 表示指定主模块文件，一定要设置！！！ -->
<script type="text/javascript" src="js/lib/require.js" data-main="js/app.js"></script>
</body>
</html>
2、编写符合规范的自定义模块module1.js和module2.js
// 定义一个没有依赖的模块
define(() => {
const logMessage = () => `这是一个没有依赖的模块`;
return {
logMessage
};
});
// 定义一个有依赖的模块
// requirejs.config中配置的模块名称进行模块引入，模块参数对应数组顺序
define('module2', ['module1'], (module1) => {
const message = '这是一个有依赖的模块';
const showMessage = () => console.log(message, module1.logMessage());
return { showMessage };
});
3、编写模块的主入口文件app.js
// 这个是主模块，其他模块在此导入
// 引入模块前需要进行一些基础配置
requirejs.config({
// baseUrl: 'js/', // 基础路径的配置，指定所有模块的统一路径
paths: {
module1: 'module/module1',
module2: 'module/module2',
/**
说明：
1、paths中key的值代表这个模块，在其他地方使用模块时用这个名字就可以；
2、value代码模块路径，一定要省略后缀.js
*/
jquery: 'lib/jquery-3.6.0',
underscore: 'lib/underscore' // 这里将underscore中amd实现代码注释，使其成为不符合规范的模块
},
shim: {
underscore: {
exports: '_',
// deps: ['jquery']
}
/*
为了解决没有实现amd规范的模块问题。
1、exports的值需要和该模块实际暴露的值类型相同，比如underscore实际暴露的为对象；
2、deps是该模块所需要的依赖。
*/
}
});
// 导入模块
requirejs(['module2', 'jquery', 'underscore'], (module2, $, _) => {
module2.showMessage();
$('body').css('background', 'lightblue');
const result = _.map([1, 2, 3], item => item * 3);
console.log('result: ', result)
});
网友评论