前端模块化-UMD规范及其实现

于 2024-08-08 00:53:28 发布
阅读量834 收藏 25
点赞数 25
分类专栏： 前端模块化 文章标签： 前端 模块化 UMD
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuanyemanong/article/details/141004428
版权

前言

UMD（Universal Module Definition）是一种通用的模块定义规范，旨在使同一个模块能够在不同的环境中使用，包括浏览器、Node.js 等。它采用一种灵活的方式，既支持类似 CommonJS 的模块加载方式，也支持类似 AMD 的异步加载方式，同时兼容浏览器全局变量的使用。

UMD 模块通常通过一定的判断逻辑来确定当前的模块加载环境，从而决定采用何种加载方式。这种灵活性使得开发者能够编写一次模块代码，然后在不同的环境中使用，无需修改代码。

本节对应的所有 demo 在此处

UMD 模块的基本结构

UMD 模块通常采用一种通用的结构，用于在不同的加载环境中判断和执行。以下是一个简单的 UMD 模块结构示例：

(function (root, factory) {
  if (typeof define === "function" && define.amd) {
    // AMD
    define(["dependency"], factory);
  } else if (typeof define === "function" && define.cmd) {
    // CMD 环境
    define(function (require, exports, module) {
      module.exports = factory(require("dependency"));
    });
  } else if (typeof exports === "object") {
    // Node.js/CommonJS
    module.exports = factory(require("dependency"));
  } else {
    // Browser globals
    root.YourModule = factory(root.Dependency);
  }
})(typeof self !== "undefined" ? self : this, function (Dependency) {
  // 你的模块代码
  return YourModule; // 暴露模块
});

此结构中，通过判断 define、exports 和全局对象，确定当前所处的环境，从而选择合适的加载方式。

React 中的 UMD 模块

React 是一个流行的 JavaScript 库，用于构建用户界面。React 库也支持 UMD 格式，使得它可以在浏览器和 Node.js 等环境中使用。

在浏览器中使用 React 的 UMD 模块的示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Demo template</title>
    <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.22.13/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const { render } = ReactDOM; // ReactDOM的UMD对象
      const { useEffect } = React;
      const { Button } = antd; // antd的UMD对象
      //  App
      function App(props: { name: string }) {
        return (
          <div>
            <h1>Hello, {props.name}!</h1>
            <Button type="primary">click me</Button>
          </div>
        );
      }
      // ----------------------------------------------------
      render(<App name="App" />, document.getElementById("root"));
    </script>
  </body>
</html>

注意上述的代码中使用了 type="text/babel"，这是因为 React 使用了 JSX 语法，需要使用 Babel 进行转换。如果不使用 JSX 语法，可以将 type="text/babel" 去掉。

完整的 demo 请看 👉 在线效果预览, 查看示例代码请点击此处

回到 React， 其 UMD 模块基本结构如下：

(function (global, factory) {
  typeof exports === "object" && typeof module !== "undefined"
    ? factory(exports)
    : typeof define === "function" && define.amd
    ? define(["exports"], factory)
    : ((global = global || self), factory((global.React = {}))); // 我们可以从这里看出，React 的 UMD 模块实际上是将 React 挂载到全局对象上
})(this, function (exports) {
  "use strict";

  // React 导出的代码
  exports.Component = Component;
  exports.createElement = createElement;
  exports.createContext = createContext;

  // ... (其他导出的React功能)
});

手动实现一个 UMD 模块

假设你实现了一个 Hello 模块, 代码如下

function sayHello() {
  console.log("Hello!");
}

第一步，准备一个 factory 函数，用于在不同的环境中执行，代码如下：

function () {
    function sayHello() {
        console.log('Hello!');
    }

    return {
        sayHello: sayHello
    };
}

第二步: 全局兼容

(function (root, factory) {
  console.log("-----global环境--------");
  root.Hello = factory();
})(this, function () {
  function sayHello() {
    console.log("Hello!");
  }
  return {
    sayHello: sayHello,
  };
});

在这一步中，我们简单地将模块挂载到全局对象 this 上。这样，你可以在浏览器环境中通过 YourModule 来访问模块。

执行结果如下：

 -----global 环境--------
 Hello.js:6 Hello!

完整的 demo 请看 👉 在线效果预览, 查看示例代码请点击此处

第三步: CommonJS 兼容

(function (root, factory) {
  if (typeof exports === "object" && typeof module !== "undefined") {
    console.log("-----commonJS环境--------");
    module.exports = factory();
  } else {
    console.log("-----global环境--------");
    root.Hello = factory();
  }
})(this, function () {
  function sayHello() {
    console.log("Hello!");
  }
  return {
    sayHello: sayHello,
  };
});

我们通过判断 module 和 module.exports 的存在，确定当前环境是否支持 CommonJS。如果是 CommonJS 环境，我们将模块导出，否则继续挂载到全局对象。

执行结果如下：

 -----commonJS 环境--------
 Hello!

查看示例代码请点击此处

第四步: AMD

(function (root, factory) {
  if (typeof exports === "object" && typeof module !== "undefined") {
    console.log("-----commonJS环境, 如nodeJS--------");
    module.exports = factory();
  } else if (typeof define === "function" && define.cmd) {
    console.log("-----CMD环境, 如seaJS--------");
    define([], factory);
  } else if (typeof define === "function" && define.amd) {
    console.log("-----AMD环境, 如requireJS--------");
    define([], factory);
  } else {
    console.log("-----global环境--------");
    root.Hello = factory();
  }
})(this, function () {
  function sayHello() {
    console.log("Hello!");
  }
  return {
    sayHello: sayHello,
  };
});

在这一步中，我们通过判断 define 函数的存在，确定当前环境是否支持 AMD。如果是 AMD 环境，我们通过 define 函数来定义模块，否则继续挂载到全局对象。

输出结果如下:

 -----AMD 环境, 如 requireJS--------
 hello.js:17 Hello!

完整的 demo 请看 👉 在线效果预览, 查看示例代码请点击此处

第五步： CMD 支持

(function (root, factory) {
  if (typeof exports === "object" && typeof module !== "undefined") {
    console.log("-----commonJS环境, 如nodeJS--------");
    module.exports = factory();
  } else if (typeof define === "function" && define.cmd) {
    console.log("-----CMD环境, 如seaJS--------");
    define([], factory);
  } else if (typeof define === "function" && define.amd) {
    console.log("-----AMD环境, 如requireJS--------");
    define([], factory);
  } else {
    console.log("-----global环境--------");
    root.Hello = factory();
  }
})(this, function () {
  function sayHello() {
    console.log("Hello!");
  }
  return {
    sayHello: sayHello,
  };
});

输出结果如下：

 -----CMD 环境, 如 seaJS--------
 Hello.js:17 Hello!

完整的 demo 请看 👉 在线效果预览, 查看示例代码请点击此处

本文首发于个人 Github前端开发笔记，由于笔者能力有限，文章难免有疏漏之处，欢迎指正

逍遥的编程笔记
关注
  • 25
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开源库-assetgraph-esprima.zip
10-05
2. **代码转换**：利用AssetGraph，开发者可以自动化地转换代码，如将ES6模块转换为CommonJS或UMD格式，以便于在不同的环境中运行。 3. **模块管理和优化**：AssetGraph可以帮助管理项目的模块依赖，优化加载顺序，...
js中的模块化——commonjs,AMD,CMD,UMD,ES6
weixin_34043301的博客
11-30 132
前言 历史上，js没有模块化的概念，不能把一个大工程分解成很多小模块。这对于多人开发大型，复杂的项目形成了巨大的障碍，明显降低了开发效率，java，Python有import，甚至连css都有@import,但是令人费解的是js居然没有这方面的支持。es6出现之后才解决了这个问题，在这之前，各大社区也都出现了很多解决方法，比较出色的被大家...
推荐使用UMD：通用模块定义库
最新发布
gitblog_00003的博客
06-14 276
推荐使用UMD：通用模块定义库 umdUniversal Module Definition for use in automated build systems项目地址:https://gitcode.com/gh_mirrors/umd/umd 在现代Web开发中，模块化已经成为不可或缺的一部分。UMD（Universal Module Definition）正是一个旨在解决跨平台兼容问题的...
模块化之CJS, AMD, UMD 和 ESM
qubes的专栏
11-07 439
[toc]]
umd 和cjs是什么
weixin_45681365的博客
04-01 869
UMD是更通用的模块定义方式，能兼容多种环境和模块系统（包括CommonJS和AMD），因此适用于同时需要在多种环境下运行的JavaScript库或应用。CommonJS主要用于服务器端或构建能够预编译（打包）为浏览器友好格式的应用程序和库，它是Node.js的标准模块系统。在小程序开发中，选择哪种模块化标准主要取决于你的开发需求、目标平台和所使用的工具链。例如，如果你开发的小程序或库需要同时支持Node.js环境和客户端环境，则可能会选择UMD作为较为通用的方案。
什么是UMD
_
01-17 6652
UMD 叫做通用模块定义规范（Universal Module Definition）。也是随着大前端的趋势所诞生，它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行。未来同一个 JavaScript 包运行在浏览器端、服务区端甚至是 APP 端都只需要遵守同一个写法就行了。 它没有自己专有的规范，是集结了 CommonJs、CMD、AMD 的规范于一身，我们看看它的具体实现： (function (root, factory) { if
JavaScript 模块(commonJS,AMD,UMD,ES6模块)
m0_61773971的博客
05-24 938
异步模块定义AMD的模块定义系统则以浏览器为目标执行环境,这需要考虑网络延迟问题.AMD的核心是使用函数包装模块定义参数一为模块名,参数二为依赖的模块(注意require,exports),参数三为模块内容.name='wta'})console.log('是commonjs模块规范，nodejs环境')console.log('是AMD模块规范，如require.js')console.log('是CMD模块规范，如sea.js')})} else {
可能是最详细的UMD模块入门指南
2401_84097393的博客
04-16 723
而不同的模块规范，关于模块导出这部分的定义是完全不一样的。因此，我们需要一种过渡机制。首先，我们需要一个factory，也就是工厂函数，它只负责返回你需要导出的内容（对象，函数，变量等）。我们从导出一个简单的对象开始。return {name: ‘我是一个umd模块’
JS & Node 模块化解释：AMD、UMD、CommonJS、 ESM
cookcyq__的博客
07-08 2344
AMD就是为了解决命名污染而研发的，同时还支持按需加载，是第一个引入模块化开发的规范插件，要想使用AMD语法得借助一款插件RequireJS。注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS，后面会讲。CommonJS也常被称为CJS，与ADMI一样属于模块化语法，不过它是用来兼容后端Nodejs语言，庆幸的是，CJS在 Node.js 中已内置，开箱即用，无需引入插件。UMD是AMDCommonJS。
javascrip中UMD规范
全栈科学家的博客
12-07 480
javascrip中UMD规范
JavaScript模块化编程七日
08-12
通过这七天的学习，你将全面掌握JavaScript模块化的各个方面，从而能够构建更高效、更可维护的前端应用。无论你是初学者还是经验丰富的开发者，这个系列都将帮助你提升在模块化编程领域的专业能力。
前端架构体系技术.pdf
12-17
前端架构体系技术涉及众多知识点，包括但不限于框架与组件设计、响应式布局、模块化、虚拟DOM、同构JavaScript以及构建工具。以下是对这些关键领域的详细解释： 1. **框架与组件**：Bootstrap等UI框架提供了预设的...
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
08-30
在这些模块加载系统之上，还有一种名为UMD（Universal Module Definition）的模式，它兼容AMD、CMD以及非模块化环境，如全局变量。 然而，真正的突破发生在ES6（也称为ES2015），它引入了原生的模块语法，使用`...
FE-Task-EG
03-27
- **JavaScript模块化**：了解CommonJS、ES6模块和UMD规范。 - **Webpack配置**：如何配置Webpack以满足项目需求，包括入口、输出、加载器和插件等设置。 - **代码分割和懒加载**：提升应用性能的策略，延迟非关键...
全面理解JS模块的标准（AMD、CMD、COMMON.JS 、 UMD、ESM）
qq_30436011的博客
09-23 4444
require.js是AMD模块规范的一个具体实现核心是通过define方法对无序的代码进行有序的模块化定义，通过require方法实现代码的模块化加载});control.js/*** 登录状态检测*/};/*** 模块调用及配置*/{// 登录页});};// 注册页});};};{// 详情页});};};};});sea.js是CMD模块规范的一个具体实现在定义模块方面, CMD和AMD一样通过define函数来定义模块;
可能是最详细的UMD模块入门指南，前端开发就业前景
2401_84098018的博客
04-05 1093
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！
前端模块化——彻底搞懂AMD、CMD、UMD、ESM和CommonJS
zzy7075的专栏
02-04 1117
UMD是AMD和CommonJS的一个糅合。AMD是浏览器优先，异步加载；CommonJS是服务器优先，同步加载。既然要通用，怎么办呢？那就先判断是否支持node.js的模块，存在就使用node.js；再判断是否支持AMD（define是否存在），存在则使用AMD的方式加载。这就是所谓的UMD。
javascipt模块化CMD AMD UMD
05-10
JavaScript模块化指的是将代码分割成可重用的、独立的模块，以便提高代码的可维护性、可重用性和可扩展性。模块化在前端开发中扮演着非常重要的角色。 CMD和AMD是两种常用的JavaScript模块化规范，它们都允许模块化编程，但它们的实现方式略有不同。 1. CMD(Common Module Definition) CMD是一种JavaScript模块化规范，它是由阿里前端开发玉伯提出的。CMD规范的实现工具有Sea.js、RequireJS等。CMD规范的特点是延迟执行，即模块在require时才会执行，不会立即执行。其语法如下： ```javascript define(function(require, exports, module) { // 模块代码 }); ``` 2. AMD(Asynchronous Module Definition) AMD也是一种JavaScript模块化规范，它是由Dojo的前端开发者提出的。AMD规范的实现工具有RequireJS等。AMD规范的特点是提前执行，即模块在define时就会执行，而不是等到require时才执行。其语法如下： ```javascript define(['module1', 'module2'], function(module1, module2) { // 模块代码 }); ``` 3. UMD(Universal Module Definition) UMD是一种通用模块定义规范，它可以在AMD和CommonJS规范之间进行切换，适用于多种JavaScript环境。其语法如下： ```javascript (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object' && typeof module === 'object') { // CommonJS module.exports = factory(require('jquery')); } else { // Browser globals root.returnExports = factory(root.jQuery); } }(this, function ($) { // 模块代码 })); ``` 以上三种模块化规范都有其各自的优缺点，选择适合自己的规范进行开发即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值