首页 > 其他分享 >JS模块化系统

JS模块化系统

时间:2024-02-19 10:25:17浏览次数:31  
标签:exports 模块化 系统 AMD module JS UMD 模块 加载

随着 JavaScript 开发变得越来越广泛,命名空间和依赖关系变得越来越难以处理。人们已经开发出不同的解决方案以模块系统的形式来解决这个问题。

CommonJS(CJS)

CommonJS 是一种同步加载模块的规范,主要用于服务器端的 Node.js 环境。

// 模块导出
module.exports = {
  // 模块内容
};

// 模块导入
const module = require('module');

top:CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。

AMD(Asynchronous Module Definition)

AMD 是一种_异步_加载模块的规范,主要用于浏览器端的 JavaScript 开发。它允许模块在加载完成后立即执行,而不会阻塞页面加载。

// 模块定义
define(['dependency1', 'dependency2'], function (dependency1, dependency2) {
  // 模块内容
  return {
    // 模块导出内容
  };
});

// 模块加载
require(['module'], function (module) {
  // 模块加载完成后执行的逻辑
});

UMD(Universal Module Definition)

UMD 是一种通用的模块定义格式,旨在兼容 CommonJSAMD 以及全局变量导出的方式。

实现原理为:先判断是否支持node.js的模块,存在就使用node.js;再判断是否支持AMDdefine是否存在),存在则使用*
*AMD的方式加载。这就是所谓的UMD**。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['exports', 'module'], factory);
  } else if (typeof exports === 'object' && typeof module === 'object') {
    // CommonJS
    factory(exports, module);
  } else {
    // 浏览器环境下暴露到全局变量
    factory((root.myModule = {}), root.myModule);
  }
})(this, function (exports, module) {
  // 模块内容
});

UMD 实质上创建了一种使用两者之一的方法,同时还支持全局变量定义。因此,UMD 模块能够在客户端和服务器上工作。

ESM(ES Module)

ESMECMAScript 官方提供的模块标准,支持异步加载,具有静态导入和导出,使得代码更具可靠性和可预测性。

// 模块导出
export const module = {
  // 模块内容
};

// 模块导入
import {module} from 'module';

概括

不同的模块规范各有优劣,选择合适的规范取决于项目的需求和目标平台。

  • CJS 为同步加载,主要用于服务器端编程,因为在服务器端加载速度不太重要,而且同步加载更容易理解和管理。
  • AMD 为异步加载,适用于浏览器环境中的异步模块加载,尤其是在 Web 应用中采用模块化开发时使用。
  • UMD 为通用形,通常用作 ESM 不起作用时的后备方案,适用于同时在浏览器和 Node.js 环境中使用的代码,使得代码具有更大的通用性。
  • ESM 适用于现代浏览器以及支持 ES6 模块的 Node.js 版本,使得代码更具可维护性和可移植性。

标签:exports,模块化,系统,AMD,module,JS,UMD,模块,加载
From: https://www.cnblogs.com/gssg/p/18020501

相关文章

  • 导弹防御系统
    这道题目还是看yxc的题解这种划分序列的题目都可以像这种(也就是catstransport这道题目的思想)考虑序列去思考这也启发我们,还可以用贪心去剪枝,又多了一条剪枝的方法(其实就是排除等效冗余,这也告诉我们排除等效冗余可以从贪心的角度想)然后\(up\)和\(down\)数组单调可以用数学归纳......
  • Unity红点系统的架构与设计
    在游戏开发中,红点系统是一种常见的功能,用于提示玩家有未读消息或待处理任务。在Unity引擎中,我们可以使用脚本来实现红点系统,下面我将介绍一种基于Unity的红点系统的架构与设计,并给出对应的代码实现。红点系统的代码实现首先,我们需要创建一个红点管理器的脚本RedDotManager.cs,......
  • 为什么在js中需要添加addEventListener()?
    为什么在js中需要添加addEventListener()?1.What?addEventListener(监听器)---EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素Element、Document和Window,也可以是......
  • 【60行代码解决】2024年最新版python爬虫有道翻译js逆向
    一、表单参数sign加密sign:c0f36866a9c650144ed5bac4eba532a7这种32位一般是MD5加密1.搜索sign:2.点击去分别在每个**sign:某某某**处打上断点结果在这个断点断住了3.原代码constu="fanyideskweb",d="webfanyi"functionj(e){returnc.a.createHash......
  • 二机制安装Kubernetes 1.29 高可用集群(1)--系统初始配置
    软件环境描述说明:OS:openEuler22.03LTSSP3kubernetes:1.29.2etcd:3.5.12calico:3.27.0cri-docker:0.3.10cfssl/cfssljson/cfssl-certinfo:1.64haproxy:2.2.6keepalived:2.2.4网段规划:物理主机:192.168.83.0/24      ServiceIP:10.66.0.0/16   PodIP:172.31.0.0......
  • 第一章 系统方法 笔记
    首先,系统方法是一种研究复杂系统的整体性、互动性和演化性的方法论,它强调从整体上把握事物的发展规律,而非仅仅关注局部或个别现象。这一观点挑战了我过去分析问题时的简化思维,使我意识到需要更加注重事物之间的相互关联和影响。接着,书中详细阐述了系统方法的基本原则和步骤。这些......
  • 《系统科学方法》第二章观后感
    系统科学方法概论的第二章“系统工程方法”深刻地阐述了系统工程在各个领域中的重要性以及其应用范围。通过深入学习这一章内容,我对系统工程方法有了更深入的理解和认识。在读后感中,我想分享一些我个人的体会和感悟。首先,在阅读这一章节时,我感受到了系统工程方法的综合性和系统性......
  • JS实现一个布隆过滤器
    之前专门聊过令牌桶算法,而类似的方案还有布隆过滤器。它一般用于高效地查找一个元素是否在一个集合中。用js实现如下所示:classBloomFilter{constructor(size,hashFunctions){this.size=size;this.bitArray=newArray(size).fill(0);thi......
  • linux系统查看磁盘分区的文件系统类型
    df-T只可以查看已经挂载的分区和文件系统类型。[root@192~]#df-Tfdisk-l可以显示出所有挂载和未挂载的分区,但不显示文件系统类型。parted-l可以查看未挂载的文件系统类型,以及哪些分区尚未格式化。lsblk-f也可以查看未挂载的文件系统类型。最为直观file-s/......
  • 抖音评论自动回复接入智能客服系统
    当有用户在抖音视频评论区发送评论后抖音会把评论内容发送给我们系统的接口我们系统拿到评论,进行关键词匹配,进行AI知识库匹配,得到回复内容我们系统调用抖音回复评论接口,将内容回复给评论者......