文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js模块化CommonJS、AMD、UMD、CMD和ES6规范是什么

2023-07-06 01:35

关注

这篇“js模块化CommonJS、AMD、UMD、CMD和ES6规范是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js模块化CommonJS、AMD、UMD、CMD和ES6规范是什么”文章吧。

模块化

模块化开发是一种管理方式,一种生产方式,也是一种解决问题的方案。一个模块就是实现某个特定功能的文件,我们可以很方便的使用别人的代码,想要什么模块,就引入那个模块。但是模块开发要遵循一定的规范,后面就出现了我们所熟悉的一系列规范。

1. CommonJS 规范

CommonJS 主要用在 node 开发上,每个文件就是一个模块,每个文件都有自己的一个作用域。通过module.exports 暴露 public 成员。

此外,CommonJS 通过 require 引入模块依赖,require 函数可以引入 node 的内置模块、自定义模块和 npm 等第三方模块。

定义模块:

// 定义模块 math.jsvar basicNum = 0;function add(a, b) {  return a + b;}// 在这里写上需要向外暴露的函数、变量module.exports = {   add: add,  basicNum: basicNum}

加载模块:

// 引入 math.js 模块var math = require('./math');math.add(2, 3); // 5

优点:

缺点:

2. AMD 规范

AMD 是 (Asynchronous Module Definition) 的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

AMD 规范中,我们使用 define 定义模块,使用 require 加载模块,但是不同于 CommonJS,它要求两个参数:

定义模块:

define(id?, dependencies?, factory);

加载模块:

require([module], callback);

第一个参数 module,是一个数组,里面的成员就是要加载的模块;第二个参数 callback,则是加载成功之后的回调函数。如果将前面的 CommonJS 改写成 AMD 形式,就是下面这样:

require(['./math'], function (math) {  math.add(2, 3);});

优点:

缺点:

3. UMD 规范

UMD 是 (Universal Module Definition) 通用模块定义 的缩写。UMDAMDCommonJS 的一个糅合。AMD 是浏览器优先,异步加载;CommonJS 是服务器优先,同步加载。

既然要通用,怎么办呢?那就先判断是否支持 node 的模块,支持就使用 node;再判断是否支持 AMD,支持则使用 AMD 的方式加载。这就是所谓的 UMD

示例:

(function (window, factory) {  if (typeof exports === "object") {    // CommonJS    module.exports = factory();  } else if (typeof define === "function" && define.amd) {    // AMD    define(factory);  } else {    // 浏览器全局定义    window.eventUtil = factory();  }})(this, function () {  // do something});

4. CMD 规范

CMD 是 (Common Module Definition) 公共模块定义 的缩写。CMD 可能是在 CommonJS 之后抽象出来的一套模块化语法定义和使用的标准。

CMD 规范中,一个模块就是一个文件。

定义模块:

define(factory);

define 接收 factory 参数,它可以是一个函数,也可以是一个对象或一个字符串。

加载模块:

我们可以通过 SeaJsuse 方法加载模块:

seajs.use([module], callback);

优点:可以很容易在 node 中运行

缺点:依赖 SPM 打包,模块的加载逻辑偏重

5. ES6 模块化

ES6 模块的设计思想是尽量的 静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJSAMD 模块,都只能在运行时确定这些东西。

ES6 中,我们使用 export 关键字来导出模块,使用 import 关键字来引入模块。

引入模块:

// ES6模块import { stat, exists, readFile } from 'fs';

上面代码实质是从 fs 模块中加载 3 个方法,其他方法不加载。这种加载称为 “编译时加载” 或者 静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。

导出模块:

let firstName = 'Zhou';let lastName = 'ShuYi';let year = 1994;export { firstName, lastName, year };

上面代码在 export 后面,使用大括号指定所要输出的一组变量。export 除了输出变量,还可以输出函数或类。

优点:容易进行静态分析

缺点:原生浏览器端还没有实现该标准

AMD 和 CMD 的区别

对于依赖的模块,AMD 是 提前执行,CMD 是 延迟执行。

AMD 推崇 依赖前置,CMD 推崇 依赖就近。

AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。

ES6 模块与 CommonJS 模块的差异

CommonJS 模块输出的是一个 值的拷贝,ES6 模块输出的是 值的引用。

CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

CommonJS 模块的 require() 是 同步加载 模块,ES6 模块的 import 命令是 异步加载,有一个独立的模块依赖的解析阶段。

以上就是关于“js模块化CommonJS、AMD、UMD、CMD和ES6规范是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯