AMD的好处

| 【示例】未使用AMD规范```javascript // dataService.js文件 (function (window) { let msg = ‘www.baidu.com’ function getMsg() { return msg.toUpperCase() } window.dataService = {getMsg} })(window)

  1. ```javascript
  2. // alerter.js文件
  3. (function (window, dataService) {
  4.   let name = 'Tom'
  5.   function showMsg() {
  6.     alert(dataService.getMsg() + ', ' + name)
  7.   }
  8.   window.alerter = {showMsg}
  9. })(window, dataService)
// main.js文件
(function (alerter) {
  alerter.showMsg()
})(alerter)

// index.html文件
<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>

最后得到如下结果：
浏览器端实现 - 图1
这种方式缺点很明显：首先会发送多个请求，其次引入的js文件顺序不能搞错，否则会报错！
| | —- |

实现

借助requireJS

一、RequireJS是一个工具库，主要用于客户端的模块管理。它的模块管理遵守AMD规范，RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。
二、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）

步骤

一、下载require.js, 并引入
1、官网: http://www.requirejs.cn/
2、github : https://github.com/requirejs/requirejs
将require.js导入项目: js/libs/require.js
二、创建项目结构

|-js
  |-libs
    |-require.js
  |-modules
    |-alerter.js
    |-dataService.js
  |-main.js
|-index.html

三、定义require.js的模块代码

| 【示例】```javascript // dataService.js文件 // 定义没有依赖的模块 define(function() { let msg = ‘www.baidu.com’ function getMsg() { return msg.toUpperCase() } return { getMsg } // 暴露模块 })

```javascript
//alerter.js文件
// 定义有依赖的模块
define(['dataService'], function(dataService) {
  let name = 'Tom'
  function showMsg() {
    alert(dataService.getMsg() + ', ' + name)
  }
  // 暴露模块
  return { showMsg }
})

// main.js文件
(function() {
  require.config({
    baseUrl: 'js/', //基本路径 出发点在根目录下
    paths: {
      //映射: 模块标识名: 路径
      alerter: './modules/alerter', //此处不能写成alerter.js,会报错
      dataService: './modules/dataService'
    }
  })
  require(['alerter'], function(alerter) {
    alerter.showMsg()
  })
})()

// index.html文件
<!DOCTYPE html>
<html>
  <head>
    <title>Modular Demo</title>
  </head>
  <body>
    <!-- 引入require.js并指定js主文件的入口 -->
    <script data-main="js/main" src="js/libs/require.js"></script>
  </body>
</html>

| | —- |

四、页面引入require.js模块:

| 【示例】在index.html引入```javascript 

 |
| --- |

| 【示例```javascript
// alerter.js文件
define(['dataService', 'jquery'], function(dataService, $) {
  let name = 'Tom'
  function showMsg() {
    alert(dataService.getMsg() + ', ' + name)
  }
  $('body').css('background', 'green')
  // 暴露模块
  return { showMsg }
})

| | —- |

2、在项目中引入第三方库

| 【示例】javascript // main.js文件 (function() { require.config({ baseUrl: 'js/', //基本路径 出发点在根目录下 paths: { //自定义模块 alerter: './modules/alerter', //此处不能写成alerter.js,会报错 dataService: './modules/dataService', // 第三方库模块 jquery: './libs/jquery-1.10.1' //注意：写成jQuery会报错 } }) require(['alerter'], function(alerter) { alerter.showMsg() }) })() | | —- |

上例是在alerter.js文件中引入jQuery第三方库，main.js文件也要有相应的路径配置。