5. AMD-RequireJS模块化

require.js

	AMD用于浏览器端比CommonJs的浏览器实现出现的早；CommonJs一开始主要是服务器端；

1. 下载require.js, 并引入

      官网: http://www.requirejs.cn/
      github : https://github.com/requirejs/requirejs
      将require.js导入项目: js/libs/require.js 
   

2. 创建项目结构

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

4. 定义require.js的模块代码

• dataService.js

  // 定义没有依赖的模块
  define(function () {
    let msg = 'atguigu.com'
  
    function getMsg() {
      return msg.toUpperCase()
    }
  
    return {getMsg}
  })
  

• alerter.js

  // 定义一个依赖  dataService.js 的模块
  //  参数dataService, $一一对应模块 'dataService', 'jquery'
  define(['dataService', 'jquery'], function (dataService, $) {
    let name = 'Tom2'
  
    function showMsg() {
      $('body').css('background', 'gray')
      alert(dataService.getMsg() + ', ' + name)
    }
  
    return {showMsg}
  })
  

5. 应用主(入口)js: main.js

(function () {
  //配置
  requirejs.config({
    //基本路径
    baseUrl: "js/",
    //模块标识名与模块路径映射
    paths: {
      "alerter": "modules/alerter",
      "dataService": "modules/dataService",      
    }
  })
  
  //引入使用模块
  requirejs( ['alerter'], function(alerter) {
    alerter.showMsg()
  })
})()

6. 页面使用模块:

---

6. 使用第三方基于require.js的框架(jquery)

• 将jquery的库文件导入到项目:
  • js/libs/jquery-1.10.1.js
• 在main.js中配置jquery路径

  paths: {
            'jquery': 'libs/jquery-1.10.1'
        }
  

• 在alerter.js中使用jquery

  define(['dataService', 'jquery'], function (dataService, $) {
      var name = 'xfzhang'
      function showMsg() {
          $('body').css({background : 'red'})
          alert(name + ' '+dataService.getMsg())
      }
      return {showMsg}
  })
  

---

7. 使用第三方不基于require.js的框架(angular)
   • 将angular.js导入项目
   • js/libs/angular.js

• 在main.js中配置

  (function () {
    require.config({
      //基本路径
      baseUrl: "js/",
      //模块标识名与模块路径映射
      paths: {
        //第三方库
        'jquery' : './libs/jquery-1.10.1',
        'angular' : './libs/angular',
        //自定义模块
        "alerter": "./modules/alerter",
        "dataService": "./modules/dataService"
      },
      /*
       配置不兼容AMD的模块
       exports : 指定与相对应的模块名对应的模块对象
       */
      shim: {
        'angular' : {
          exports : 'angular'
        }
      }
    })
    //引入使用模块
    require( ['alerter', 'angular'], function(alerter, angular) {
      alerter.showMsg()
      console.log(angular);
    })
  })()