AMD规范说明
AMD全称是：Asynchronous Module Definition(异步模块定义)，github地址
是专门用于浏览器端, 模块的加载是异步的
AMD规范基本语法
定义暴露模块
//定义没有依赖的模块
define(function(){
return 模块
})
//定义有依赖的模块，module1和m1一一对应
define(['module1', 'module2'], function(m1, m2){
return 模块
})
引入使用模块
require(['module1', 'module2'], function(m1, m2){
使用m1/m2
})
未使用AMD规范的模块化
// 没有依赖的模块
(function (window) {
let msg = 'atguigu.com' function getMsg() {
return msg.toUpperCase()
} window.dataService = {getMsg}
})(window)
// 依赖dataService模块，调用dataService的getMsg方法
(function (window, dataService) {
let name = 'Tom' function showMsg() {
alert(dataService.getMsg() + ', ' + name)
} window.alerter = {showMsg}
})(window, dataService)
(function (alerter) {
alerter.showMsg()
})(alerter)
<!DOCTYPE html>
<html>
<head>
<title>Modular Demo 1</title>
</head>
<body>
<div>
<h1>Modular Demo 1: 未使用AMD(require.js)</h1>
</div>
<script type='text/javascript' src='js/modules/dataService.js'></script>
<script type='text/javascript' src='js/modules/alerter.js'></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
AMD规范的实现（浏览器端）
AMD规范需要使用到require.js这个插件，下载require.js, 并引入，将require.js导入项目: js/libs/require.js
创建项目结构
|-js
|-libs
|-require.js
|-modules
|-alerter.js
|-dataService.js
|-main.js
|-index.html
定义require.js的模块代码：dataService.js
define(function () {
let msg = 'dataService.js'
function getMsg() {
return msg.toUpperCase()
}
return {getMsg} //暴露模块中的getMsg方法
})
定义require.js的模块代码：alerter.js
/*
定义有依赖的模块
*/
define(['dataService', 'jquery'], function (dataService, $) {
let name = 'Tom2' function showMsg() {
$('body').css('background', 'gray')
alert(dataService.getMsg() + ', ' + name)
} return {showMsg}
})
应用主(入口)js: main.js
(function () {
//配置
require.config({
//基本路径
baseUrl: 'js/',
//映射: 模块标识名: 路径
paths: {
//自定义模块
'alerter': 'modules/alerter',
'dataService': 'modules/dataService',
//库模块
'jquery': 'libs/jquery-1.10.1', // jquery遵循AMD规范，模块标识名是jquery（小写）
'angular': 'libs/angular'
},
//配置不兼容AMD的模块
shim: {
angular: {
exports: 'angular'
}
}
})
//引入模块使用
require(['alerter', 'angular'], function (alerter, angular) {
alerter.showMsg()
console.log(angular);
})
})()
<!DOCTYPE html>
<html>
<head>
<title>Modular Demo 2</title>
</head>
<body>
<script type="text/javascript" src="js/libs/require.js" data-main="js/main.js"></script>
</body>
</html>