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>