js模块化——AMD与CMD的区别

| |

前言

模块系统

  1. 定义封装的模块
  2. 管理模块之间的依赖关系
  3. 引入模块

AMD 异步模块定义

特点

  • 提前执行依赖模块，预加载
  • 推崇依赖前置

requireJs

  • require.config() 模块加载自定义 require_conf.js
    • 一个文件一个模块
    • 加载规范化模块 define()定义
    • 加载非规范化的模块，如jquery
  • define() 模块定义
    • id 模块标识
    • dependencies模块依赖
    • factory 实例化函数/对象
  • r.js 合并与压缩模块文件
    • build.js 打包配置文件
    • node r.js -o build.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      // 独立模块
      define({
          add: function (x) { return x }
      })
      // 非独立模块
      define(['alpha'], function (alpha) {
          return {
              add: function (x) { return x }
          }
      })
      // 包装模块，暴露api
      define(function(require, exports, module) {
          var base = require('base') // 兼容commonJs写法，但仍然是提前加载
          var export = {
              add: addFun
          }
          function addFun () {}
          return export
      })

r.js配置参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
({
    appDir: './', // 应用程序目录
    baseUrl: './js', // js的相对目录
    dir: './dist', // 输出目录
    modules: [ // 一个包含多个对象的数组，模块
        {
            name: 'main'
        }
    ],
    fileExclusionRegExp: /^(r|build)\.js$/, // 排除规则
    optimizeCss: 'standard',
    removeCombined: true, // 输出目录中删除已合并的文件
    paths: { // 模块的相对目录
        jquery: 'lib/jquery',
        underscore: 'lib/underscore',
        backbone: 'lib/backbone/backbone',
        backboneLocalstorage: 'lib/backbone/backbone.localStorage',
        text: 'lib/require/text'
    },
    shim: { // 非规范定义的模块
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        backboneLocalstorage: {
            deps: ['backbone'],
            exports: 'Store'
        }
    }
})

api)

CMD 公共模块定义

特点

  • 延迟执行依赖模块，按需加载，懒加载
  • 推崇依赖就近
  • 同步加载，文件加载完才能执行操作

seaJs

1
2
3
4
5
6
7
define(function(require, export, module) {
    var a = require('./a')
    // 软依赖
    if (status) {
        var b = require('./b')
    }
})

commonJs

  • 同步加载，文件加载完才能执行操作
  • 服务端模块规范
  • node，webpack通过commonJs规范实现
  • 定义模块
    • require 引入模块
    • exports 导出当前模块属性
    • module 模块
1
2
3
4
5
6
7
8
9
10
11
//file1.js
moudle.exports = {
  a: 1
};

//file2.js
var f1 = require('./file1');
var v = f1.a + 2;
module.exports ={
  v: v
};

UMD 通用模块定义

  • AMD和commonJs的糅合，解决跨平台问题
1
2
3
4
5
6
7
8
9
10
11
(function (window, factory) {
    if (typeof exports === 'object') {
        module.exports = factory(); // 支持node模块则使用commonJs
    } else if (typeof define === 'function' && define.amd) {
        define(factory); // amd 方式加载
    } else { // 都不是，全局定义
        window.eventUtil = factory();
    }
})(this, function () {
    // module ...
});