js模块化规范—AMD规范

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>