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

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

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

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

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

calculator.js
define('calculator', ['math'], function(math) {
return {
add: function(left, right) { return math.add(left, right) },
subtract: function(left, right) { return math.subtract(left, right) }
}
})

使用刚才定义的calculator模块

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

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

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

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

还是以声明calculator模块为例

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

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

使用calculator模块

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

commonjs - Node中使用的模块规范

定义math模块

math.js
module.exports = {
add: function(left, right) {
return left + right;
},
subtract: function(left, right) {
return left - right;
}
}

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

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

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

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

(function (root, factory) {
if (typeof exports === 'object' && typeof module === 'object')
// commonjs
module.exports = factory()
else if (typeof define === 'function' && define.amd)
// amd
define([], factory)
else if (typeof exports === 'object')
// commonjs
exports['math'] = factory()
else
// 全局对象, 浏览器中是 window
root['math'] = factory()
})(this, function() {
return { add: function(left, right) { return left + right; } }
})

esm - ES6模块规范

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

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

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. Python selenium 三种等待方式解读

    1. 强制等待第一种也是最简单粗暴的一种办法就是强制等待sleep(xx),强制让闪电侠等xx时间,不管凹凸曼能不能跟上速度,还是已经提前到了,都必须等xx时间.看代码: # -*- coding: ...

  2. spring——整合Mybatis

    一.Mybatis整合spring 步骤: 导入相关jar包 junit mybatis mysql数据库 spring-webmvc aop织入 mybatis-spring spring-jdbc ...

  3. 部署 Nginx +uwsgi+centos7+django+supervisor 项目

    部署CRM项目 前言 使用软件 nginx 使用nginx是为了它的反向代理功能,项目会通过Django+uWSGI+Nginx进行服务器线上部署. uWSGI python web服务器开发使用WS ...

  4. web服务器-nginx负载均衡

    web服务器-nginx负载均衡 一 负载均衡的作用 负载均衡: 分摊到多个操作单元上进行执行,和它的英文名称很匹配.就是我们需要一个调度者,保证所有后端服务器都将性能充分发挥,从而保持服务器集群的整 ...

  5. python+pytest接口自动化(11)-测试函数、测试类/测试方法的封装

    前言 在python+pytest 接口自动化系列中,我们之前的文章基本都没有将代码进行封装,但实际编写自动化测试脚本中,我们都需要将测试代码进行封装,才能被测试框架识别执行. 例如单个接口的请求代码 ...

  6. luoguP6619 [省选联考 2020 A/B 卷]冰火战士(线段树,二分)

    luoguP6619 [省选联考 2020 A/B 卷]冰火战士(线段树,二分) Luogu 题外话1: LN四个人切D1T2却只有三个人切D1T1 很神必 我是傻逼. 题外话2: 1e6的数据直接i ...

  7. SpringCloudAlibaba 微服务讲解(四)Sentinel--服务容错(一)

    4.1 高并发带来的问题 在微服务中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用,但是由于网络原因或者自身的原因,服务并不能保证100%可用,如果单个服务出现问题,调用这个服务就会出现网 ...

  8. 【算法】两个list合并

    转载博客地址 http://blog.sina.com.cn/s/blog_5da93c8f0101fdrp.html 有两个ArrayList,分别为list1和list2,分析这两个list后生成 ...

  9. Java Arrays.asList(0,1,2,3,4,5,6,7,8,9).parallelStream().forEach 进行循环获取HttpServletRequest的为Null的解决方案

    Arrays.asList(0,1,2,3,4,5,6,7,8,9).parallelStream().forEach() parallelStream是并行执行流的每个元素,也就是多线程执行,这样就 ...

  10. 去掉一个Vector集合中重复的元素 ?

    Vector newVector = new Vector(); For (int i=0;i<vector.size();i++) { Object obj = vector.get(i); ...