AMD和CMD

发表于 | 分类于 |

#AMD CMD，CommonJs和ES6的区别

  • AMD
    AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范
    由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出requireJS主要解决两个问题:

    1. 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
    2. js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
      看一个使用requireJS的例子： 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      //定义模块MyModule
      define(['dependency'], function(){
          var name = 'Byron';
          function printName(){
              console.log(name);
          }

          return {
              printName: printName
          };
      });

      // 加载模块
      require(['myModule'], function (my){
      　 my.printName();
      });

    语法：

    requireJS定义了一个函数 define，它是全局变量，用来定义模块
    define(id?, dependencies?, factory);
    id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
    dependencies：是一个当前模块依赖的模块名称数组
    factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值
    在页面上使用require函数加载模块

require([dependencies], function(){});
require()函数接受两个参数
第一个参数是一个数组，表示所依赖的模块
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

  • CMD(Common Module Definition)
    淘宝团队提供，就近依赖，同步概念即用即加载模块 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 定义模块  myModule.js
    define(function(require, exports, module) {
      var $ = require('jquery.js')
      $('div').addClass('active');
    });

    // 加载模块
    seajs.use(['myModule.js'], function(my){

    });

  • CommonJs规范，module.exprts
    与nodeJs采用的规范一致
    话不多说，上代码：

    1
    2
    3
    4
    5
    6
    7
    exports.area=function(r){
      return Math.PI*r*r;
    }

    exports.circumference=function(r){
      return 2*Math.PI*r;
    }

  • ES6特性 export/import
    成对出现，有导出才有导入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    //lib.js
    //导出常量
    export const sqrt = Math.sqrt;
    //导出函数
    export function square(x) {
        return x * x;
    }
    //导出函数
    export function diag(x, y) {
        return sqrt(square(x) + square(y));
    }

    //main.js
    import { square, diag } from './lib';
    console.log(square(11)); // 121
    console.log(diag(4, 3)); // 5
分享