AMD规范说明:
Asynchronous Moudle Definition(异步模块定义)
专门用于浏览器端,模块的加载是异步的
AMD基本语法
* 定义暴露模块:
// 定义没有依赖的模块
define(function(){
return 模块
})
// 定义有依赖的模块
define(['module1','module2'],function(m1,m2){
return 模块
})
* 引入使用模块:
require(['module1','module2'],function(m1,m2){
使用m1/m2
})
AMD实现(浏览器端):
Require.js
我们先不使用AMD规范实现模块化:
先创建一个目录结构,如下所示:
module1.js内容如下:
// 利用立即执行函数定义模块
// 定义一个没有以来的模块
// 不使用AND规范
// 通过window将模块暴露出去
(function(window){
let name = 'I am module1';
function getName(){
return name;
}
window.module1 = {getName}
})(window)
module2.js内容如下:
// 定义一个有依赖的模块 依赖module1
(function(window,module1){
let msg = 'I am module2';
function getMsg(){
console.log(msg , module1.getName())
}
window.module2 = {getMsg}
})(window,module1)
app.js 内容如下:
// 相当于主源文件 引入模块
// module1.js 依赖了 module2.js 主源文件只需要引入module2
(function(module2){
module2.getMsg()
})(module2)
index.html内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No AMD</title>
</head>
<body>
<!--
app.js中引入了module2.js module2.js中引入了module1.js
所以先引入module1.js 在引入module2.js 最后引入app.js
-->
</body>
<script type="text/javascript" src="js/module1.js"></script>
<script type="text/javascript" src="js/module2.js"></script>
<script type="text/javascript" src="app.js"></script>
</html>
结果如下:
没有用AMD规范,index.html就要把每个模块的JS都引入.
下面使用AMD规范实现模块化:
使用RequireJS自定义模块:
创建目录结构如下:
/-js
/-libs // 通常放框架的文件
/-require.js
/-modules
/-module1.js
/-module2.js
/-main.js // 主源文件
/-index.html
下载require.js,官网: https://requirejs.org/
module2.js
// 定义没有依赖的模块
define(function(){
let name = "I am Yoona";
function getName(){
return name ;
}
// 暴露模块
return {getName}
})
module1.js:
// 定义一个有依赖的模块
define(['module2'],function(module2){
let age = 'I am 28';
function getAge(){
console.log(module2.getName(), age )
}
// 暴露模块
return {getAge}
})
main.js
(function(){
// 基本配置 映射模块
requirejs.config({
baseUrl:'js/',// 基本的路径 出发点在根目录下 也可以不写
paths:{ // 配置路径 映射模块 后边不用加 .js requirejs会自动加上
module2:'./modules/module2',
module1:'./modules/module1',
}
})
requirejs(['module1'],function(module1){
module1.getAge();
})
})()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RequireJS</title>
</head>
<body>
</body>
<!-- 先引入require.js 并指定js的主文件的入口 -->
<script data-main="js/main.js" src="js/libs/require.js"></script>
</html>
结果如下:
接下来使用第三方模块:
比如使用JQ,把jquery.js放入libs文件夹里边
在main.js里边引用jquery模块:
(function(){
// 基本配置 映射模块
requirejs.config({
baseUrl:'js/',// 基本的路径 出发点在根目录下
paths:{ // 配置路径 映射模块 后边不用加 .js requirejs会自动加上
module2:'./modules/module2',
module1:'./modules/module1',
jquery:'./libs/jquery-1.11.1'// jquery 必须小写
}
})
requirejs(['module1','jquery'],function(module1,$){
module1.getAge();
$('body').html('Yoona')
})
})()
结果如下所示:
这里需要注意的是,引用jquery模块,映射模块时必须要小写,这是因为jQuery内置支持AMD规范; jquery.js中有想喝么一段代码:
所以注意必须使用小写jquery.
但是,并不是所有的js都内置了AMD规范,比如angular.js
在main.js里面添加angular的配置:
(function(){
// 基本配置 映射模块
requirejs.config({
baseUrl:'js/',// 基本的路径 出发点在根目录下
paths:{ // 配置路径 映射模块 后边不用加 .js requirejs会自动加上
module2:'./modules/module2',
module1:'./modules/module1',
jquery:'./libs/jquery-1.11.1',// jquery 必须小写
angular:'libs/angular'
},
})
requirejs(['module1','jquery','angular'],function(module1,$,angular){
module1.getAge();
$('body').html('Yoona')
console.log(angular)
})
})()
输出angular为undefined,
需要添加配置:
(function(){
// 基本配置 映射模块
requirejs.config({
baseUrl:'js/',// 基本的路径 出发点在根目录下
paths:{ // 配置路径 映射模块 后边不用加 .js requirejs会自动加上
module2:'./modules/module2',
module1:'./modules/module1',
jquery:'./libs/jquery-1.11.1',// jquery 必须小写
angular:'libs/angular'
},
shim:{// 是一个单独的配置
angular:{
// 暴露angular对象
exports:'angular'
}
}
})
requirejs(['module1','jquery','angular'],function(module1,$,angular){
module1.getAge();
$('body').html('Yoona')
console.log(angular)
})
})()
此时就可以输出angular对象.