写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范.

amd - 浏览器中的js模块化解决方案

AMD全称是Async Module Definition异步模块定义

RequireJs是AMD模块规范的一个具体实现.

AMD中定义一个计算器模块calculator, 这个模块依赖另一个名为math的模块

calculator.js
  1. define('calculator', ['math'], function(math) {
  2. return {
  3. add: function(left, right) { return math.add(left, right) },
  4. subtract: function(left, right) { return math.subtract(left, right) }
  5. }
  6. })

使用刚才定义的calculator模块

main.js
  1. require('calculator', function(calculator) {
  2. console.log('1 + 1 = ' + calculator.add(1, 1));
  3. console.log('2 - 2 = ' + calculator.subtract(2, 1));
  4. })

cmd - 类似amd的用于浏览器中的js模块规范

CMD全称是Common Module Definition即通用模块定义,. 像AMDRequireJs关系一样, 与CMD规范绑定的是sea.js

在定义模块方面, CMDAMD一样通过define函数来定义模块; 两者的主要区别在于对依赖的加载上, CMD中不需要在define的参数中直接声明需要用到的模块

还是以声明calculator模块为例

calculator.js
  1. define('calculator', function(require, exports) {
  2. var math = require('math');
  3. exports.add = function(left, right) { return math.add(left, right) };
  4. exports.subtract = function(left, right) { return math.subtract(left, right) };
  5. })

可以看到calculator模块所的依赖的math模块没有在define函数的参数中进行声明, 而是通过require('math')来引入的

使用calculator模块

  1. seajs.use(['calculator'], function(calculator) {
  2. console.log('1 + 1 = ' + calculator.add(1, 1));
  3. console.log('2 - 2 = ' + calculator.subtract(2, 1));
  4. })

commonjs - Node中使用的模块规范

定义math模块

math.js
  1. module.exports = {
  2. add: function(left, right) {
  3. return left + right;
  4. },
  5. subtract: function(left, right) {
  6. return left - right;
  7. }
  8. }

使用刚才定义的math模块, 并再定义一个calculator模块

calculator.js
  1. const math = require('./math.js');
  2. module.exports = {
  3. add: math.add
  4. }

umd - 一种同时兼容amd cmd commonjs规范的规范

amd cmd通常只能在浏览器中使用, commonjs只能在服务端(Node)环境下使用, 这样子搞会导致我们基于其中某一种模块规范写的js模块无法在服务端和浏览器端进行复用. umd解决了这个问题, 它兼容并包, 使得使用此规范写的js模块既可以在浏览器环境下使用, 也可以在Node(服务端)环境中用

  1. (function (root, factory) {
  2. if (typeof exports === 'object' && typeof module === 'object')
  3. // commonjs
  4. module.exports = factory()
  5. else if (typeof define === 'function' && define.amd)
  6. // amd
  7. define([], factory)
  8. else if (typeof exports === 'object')
  9. // commonjs
  10. exports['math'] = factory()
  11. else
  12. // 全局对象, 浏览器中是 window
  13. root['math'] = factory()
  14. })(this, function() {
  15. return { add: function(left, right) { return left + right; } }
  16. })

esm - ES6模块规范

使用import导入模块, 通过export导出模块

math.js
  1. export { add: (left, right) => left + right; }
点击此处查看代码
  1. import { add } from './math.js';
  2. console.log('1 + 1 = ' + add(1, 1));

小结

amd, cmd已经成为了过去式(个人感觉), 现在常用的模块规范一般就是es6模块和commonjs(只用于node)了, node中也已经提供了实验性的es模块支持.

浏览器对es的importexport的支持也已经很不错了(除了IE其他主流浏览器都支持了)

好消息微软将在2022-6-15停止对IE11在win10非长期支持版上的支持

js模块系统 - amd|cmd|commonjs|esm|umd的更多相关文章

  1. JS模块之AMD, CMD, CommonJS、UMD和ES6模块

    CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...

  2. FW: AMD, CMD, CommonJS和UMD

    javascript 我是豆腐不是渣 4月5日发布 推荐 2 推荐 收藏 32 收藏,486 浏览 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载ech ...

  3. AMD, CMD, CommonJS和UMD

    我的Github(https://github.com/tonyzheng1990/tonyzheng1990.github.io/issues),欢迎star 今天由于项目中引入的echarts的文 ...

  4. AMD,CMD.CommonJs和UMD还有es6的模块化对比

    CommonJS CommonJS是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行, ...

  5. js模块化开发 AMD CMD Commonjs

    在es6全面实行开来之前  js实现模块开发方案有: 1.AMD 异步模块开发定义  依赖前置,requireJs应用了这一规范 require([module], callback); 加载完后回调 ...

  6. AMD/CMD/CommonJs到底是什么?它们有什么区别?

    知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.   知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏 ...

  7. 兼容多种模块规范(AMD,CMD,Node)的代码

    在JavaScript模块化开发中,为了让同一个模块可以运行在前后端,以及兼容多种模块规范(AMD,CMD,Node),类库开发者需要将类库代码包装在一个闭包内. AMD规范 AMD,即“异步模块定义 ...

  8. 10、Node.js模块系统

    ##################################################################################介绍Node.js模块系统为了让No ...

  9. module(JS模块系统)

    JS - module(模块系统) 重新学习ES6 倒数第一章 module 什么是module? 百度的解释 之前接触过AngularJS,现在看Dojo,都有对模块的使用.在dojo官网看到这段文 ...

随机推荐

  1. 《手把手教你》系列基础篇(七十八)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 中篇(详解教程)

    1.简介 上一篇讲解了依赖测试的各种方法,今天继续讲解依赖测试的方法,这一篇主要是讲解和分享通过xml文件配置组名依赖方法( 主要是测试组的用法).废话不说,直接上干货. 2.实例 测试组:一个组可包 ...

  2. 所有整数型包装类对象值的比较,使用equals方法进行比较

    一.整数型包装类对象值的比较,使用equals方法进行比较 题眼:整型包装类.值的比较 注:== :对于基本类型,比较的是值:对于引用类型,比较的是地址值. // 组一Integer i1=new I ...

  3. JAVA 线上问题排查方法

    CPU 磁盘 内存 GC问题 网络 线上故障主要会包括cpu.磁盘.内存以及网络问题,而大多数故障可能会包含不止一个层面的问题,所以进行排查时候尽量四个方面依次排查一遍. 同时例如jstack.jma ...

  4. Windows 7/8 64位系统 不能注册32位dll 文件的解决方案

    这几天碰到一个问题,运行一个易语言开发的软件出现以下错误.我的系统是 Windows7 64 位 专业版.在系统盘 windows/system32  下查找 dm.dll.但是没有这个文件.于是我到 ...

  5. 什么是ORM思想?常用的基于ORM的框架有哪些?各有什么特点?

    ORM的全称是Object-Relational Mapping,即对象关系映射.ORM思想的提出来源于对象与关系之间相悖的特性.我们很难通过对象的继承与聚合关系来描述数据表中一对一.一对多以及多对多 ...

  6. Mybatis框架基础入门(三)--Mapper动态代理方式开发

    使用MyBatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper动态代理开发方法. 原始Dao开发方法需要程序员编写Dao接口和Dao实现类,此方式开发Dao,存在以下问题: Dao方 ...

  7. MySQL_fetch_array 和 MySQL_fetch_object 的区别是什么?

    以下是 MySQL_fetch_array 和 MySQL_fetch_object 的区别: MySQL_fetch_array() – 将结果行作为关联数组或来自数据库的常规数组返回. MySQL ...

  8. spring-boot关于spring全注解IOC

    什么是IOC容器: Spring IoC 容器是一个管理Bean 的容器,在S pring 的定义中,它要求所有的IoC 容器都需要实现接口BeanFactory ,它是一个顶级容器接口 IoC 是一 ...

  9. Django中间件 (middleware)

    中间件是处理django的请求和响应的框架级别的钩子,本质是一个类(直白一点中间件是帮助我们在视图函数执行之前和执行之后都可以做一些额外的操作) 由于其影响的是全局,所以需要谨慎使用,使用不当会影响性 ...

  10. java中的VO、PO、BO、DAO、POJO

     针对java工程里的各种带O的对象,进行分析,了解各自的作用. PO: persistent object,持久对象.与数据库里表字段一一对应.PO是一些属性,以及set和get方法组成.一般情况下 ...