JS模块化规范——AMD相关笔记

AMD

AMD规范时间早于CommonJS浏览器端实现

一、没有模块化规范时

1. 创建项目结构

|-js
  |-alerter.js
  |-dataService.js 
|-test1.html
|-app.js

2. 定义模块代码

• dataService.js

// 定义一个没有依赖的模块
(function (window) {
  let name = 'dataService.js'

  function getName() {
    return name
  }
  window.dataService = {getName}
})(window)

• alert.js

// 定义一个有依赖的模块
(function (window, dataService) {
  let msg = 'alerter.js'

  function showMsg() {
    console.log(msg,dataService.getName())
  }
  window.alerter = {
    showMsg
  }
})(window, dataService)

• app.js

(function(alerter) {
  alerter.showMsg()
})(alerter)

• tets1.html页面引用

  <script src="./js/dataService.js"></script>
  <script src="./js/dataService.js"></script>
  <script src="./app.js"></script>

二、规范

2.1 说明

• Asynchronous Module Definition( 异步模块定义)

• https://github.com/amdjs/amdjs-api/wiki/AMD

• 它是一个在浏览器端模块化开发的规范。它不是javascript原生支持，所以使用AMD规范进行页面开发需要用到对应的库，也就是RequireJS，AMD其实是RequireJS在推广的过程中对模块定义的范围化的产出。

• 它的实现方案是：先定义所有依赖，然后在加载完成后的回调函数中执行。

• 专门用于浏览器端, 模块的加载是异步的

2.2 基本语法

• 定义暴露模块

//定义没有依赖的模块
define(function(){
	return 模块
})

//定义有依赖的模块
define(['module1', 'module2'], function(m1, m2){   // 显式声明依赖注入
	return 模块
})

• 引入使用模块

require(['module1', 'module2'], function(m1, m2){
	使用m1/m2
})

三、自定义模块实现（require.js）

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

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

• dataService.js

  // 定义没有依赖的模块
  
  define(function () {
    let name = 'dataService.js'
    function getName() {
      return name
    }
  
    // 暴露模块
    return {getName}
  })
  

• alerter.js

  // 定义有依赖的模块
  define(['dataService'], function(dataService) {
    let msg = 'alerter.js'
    function showMsg() {
      console.log(msg, dataService.getName())
    }
  
    // 暴露模块
    return {showMsg}
  })
  

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

(function () {

requirejs.config({
  baseUrl: 'js/',  // 基本的路径 这表示出发点在根目录下 如果不用则从当前目录出发
  paths: {  // 配置路径
    dataService: './modules/dataService',  // 不要加.js  默认会自己加上
    alerter: './modules/alerter'
  }
});

requirejs(['alerter'], function(alerter) {
  alerter.showMsg()
})
})()

5. 页面使用模块:

  <!--引入require.js并指定js主文件的入口-->
  <script data-main="js/main" src="js/libs/require.js"></script>

四、第三方基于require.js的框架模块实现（jQuery）

• 将jquery的库文件导入到项目:

  • js/libs/jquery-1.10.1.js

  • 在main.js中配置jquery路径（jQuery源码中支持AMD规范，它自己定义了一个模块，该模块名字叫jquery，所有注意jQuery遇到AMD规范时名字必须小写）

    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)

   并不是所有的第三方库都支持AMD规范，例如Angular.js

   要用的话需要单独配置，向外暴露

   • 将angular.js导入项目
   • js/libs/angular.js

• 在main.js中配置

  paths: { // 配置路径
        angular: './libs/angular'
      },
      shim: {
        angular: {
          exports: 'angular'
        }
      }