语言►JavaScript►模块化方案►UMD

什么是UMD

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/17/%E4%BB%80%E4%B9%88%E6%98%AFUMD/

摘要

本文主要讲述了：

  1. 什么是 UMD
  2. 示例

正文

什么是 UMD

由于各种模块化方案互不兼容，在封装一个模块时，开发者不得不编写多遍，这非常繁琐。

开发者期望大一统。期望一次编写，到处运行。

于是 UMD 应运而生。

UMD 的全称为 Universal Module Definition（通用模块定义）。

示例

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
(function (root, factory) {
  // root为全局对象，在浏览器中是window，在nodejs中是global
  if (typeof module === 'object' && module.exports) {
    // CommonJS
    // hello为示例依赖
    var hello = require('hello');
    module.exports = factory(hello);
  } else if (typeof define === 'function' && define.amd) {
    // AMD
    // 定义模块
    // hello为示例依赖
    define(['hello'], factory);
  } else if (typeof define === 'function' && define.cmd) {
    // CMD
    // 定义模块
    define(function (require, exports, module) {
      // hello为示例依赖
      var hello = require('hello');
      module.exports = factory(hello);
    });
  } else {
    // 没有模块规范，挂载在全局对象上
    // hello为示例依赖
    var hello = { name: 'hello' };
    root.foo = factory(hello);
  }
})(this, function (hello) {
  // UMD模块，作为参数factory传递给上面的立即执行函数
  // hello为示例依赖
  console.log(hello);
  return {
    name: 'jsweibo',
  };
});

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/17/%E4%BB%80%E4%B9%88%E6%98%AFUMD/

本文对你有帮助？请支持我

支付宝
微信