03 AMD规范的基础使用详解
AMD模块规范
1.1 AMD规范说明
AMD规范专门用来实现浏览器端的模块化，并且模块的加载是异步的；引入一个第三方的require.js脚本用来解析AMD规范编写的模块
1.2 基本语法
使用define用来暴露模块，使用require用来引入模块；require()异步加载模块，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题
1.21暴露模块
（1）使用define(function(){})函数定义模块；并且向外暴露
// 定义一个没有依赖模块的data.js模块
define(function(){
let name = '过青年';
function getName(){
return name;
}
console.log("我是data里的name:",name);
// 暴露模块，推荐暴露对象，因为对象是用来存储数据的
return {name,getName};
});
（2）使用define(['module','module2'],function(){})定义有依赖的模块，注意，数组里面的模块名只是一个代号，不一定要写模块名；不过推荐使用模块名作为代号，这样别人一看就知道引入了哪个模块，不用加后缀
// 定义一个有依赖模块的server.js模块
// 将依赖模块作为实参传递进去
define(['data'],function(data){
let age = 20;
function showName(){
return data.name;
}
console.log("我是在server里面输出的data.name:",data.name);
return {age,showName};
});
1.22引入模块
在主模块app.js中引入其他模块，使用require函数；需要使用require.config配置其他模块的路径
我们的路径是这样的
// app.js
(function(){
require.config({
// 基本路径
baseUrl:'./js/',
paths:{
data:'./module/data',
server:'./module/server'
}
});
require(['server'],function(server){
//会将模块当作参数传进来
console.log("我是在app.js里输出的server.age:",server.age);
console.log("我是在app.js里输出的data.name:",server.showName());
});
})()
-
我们从HTML开始解析页面
-
HTML页面引入的
require.js根据data-main属性发现主模块是js目录下的app.js -
于是进入
app.js页面进行解析；解析app.js页面，发现引入了一个叫server的模块，那么这个模块在哪里呢？通过app.js页面中的配置函数require.config()发现server这个模块在./js/module/server.js（我们写路径的时候不能加上后缀，因为解析时默认会添加后缀） -
于是找到了这个模块，进入这个
server模块，结果发现这个server模块又引入了一个叫data的模块，于是又通过app.js的配置函数找，发现data模块在./js/module/server.js中，于是加载这个模块 -
模块全部加载完成
1.23在HTML页面上使用模块化
AMD规范本来就是用来实现浏览器端的模块化的；而require.js脚本就是这个规范的一种实现
script脚本中的data-main属性值代表主模块，从主模块进入模块内部，依次加载其他模块的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AMD规范实现</title>
</head>
<body>
<script src="./js/libs/require.min.js" data-main="./js/app.js"></script>
<!--
控制台输出结果：
我是data里的name: 过青年
我是在server里面输出的data.name: 过青年
我是在app.js里输出的server.age: 20
我是在app.js里输出的data.name: 过青年
-->
</body>
</html>
总结
- 使用AMD规范需要引入
require.js——第三方编写的脚本 - 根据
data-main确认主模块 - 根据主模块中的
require.config({ })函数确定各模块的位置 require.config({ })中各个模块的路径不能加后缀.js- 加载模块时里面的内容会运行
