JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6
前言:模块化开发需求
在JS早期,使用script标签引入JS,会造成以下问题:
- 加载的时候阻塞网页渲染,引入JS越多,阻塞时间越长。
- 容易污染全局变量。
- js文件存在依赖关系,加载必须有顺序。项目较大时,依赖会错综复杂。
- 引入的JS文件过多,不美观,且不易于管理。
一、CommonJS规范
CommonJS Modules/1.0规范,服务器端规范。
Node.js推广使用。该规范的核心是:允许模块使用require方法来同步加载所依赖的其他模块,然后通过exports或module.exports导出需要暴露的接口。
特点:
一个模块是一个文件
使用module.exports或exports导出模块
// module.js
exports.add = (a, b) => a+b module.exports = {
add: (a, b) => a + b
}
使用require加载模块
a. require命令第一次加载模块时,执行整个脚本,在内存中生成对象
b. 多次执行require命令再次加载该模块时,不会再执行该脚本,直接从缓存中取值
c. CommonJS加载模块是同步加载模块
Tips:
为什么CommonJS规范不适合作为浏览器的规范
由于CommonJS是同步加模块,在服务端加载模块时都是从本地硬盘中加载,读取速度很快。但是在浏览器端加载模块时,需要请求服务器端,涉及网速、代理的问题,一旦等待时间过长,浏览器会处于“假死”状态。
二、ADM规范
AMD(Asynchronous Module Definition)异步模块定义,客户端规范。
采用异步方式加载模块,模块加载不影响它后面语句的代执行。
AMD是require.js在推广使用过程中对模块定义规范化的产物。
在使用时,需引入require.js
特点
使用define()定义模块
/**
* @param id 模块名称,如果为空,模块的名字默认为模块加载器请求的指定脚本名
* @param dependencies 模块依赖
* @param factory 工场函数,模块初始化执行的函数或对象
*/
define(id? dependencies? factory)
使用require加载模块
require([module], callback)
AMD是依赖前置模块
三、CMD规范
CMD(Common Module Definition)通用模块定义,异步加载模块。
CMD是sea.js在推广过程中对模块定义的规范化产物。
在使用时,需引入sea.js
特点:
使用define()定义模块,使用require()加载模块
define(function (require, exports, module) {
let a = require('a')
let b = require('b')
exports.eat = a.eat
exports.run = b.run
})
CMD模块加载是推崇就近依赖的,需要到某个模块时再进行require加载
使用seajs.use加载使用模块
seajs.use(id, callback?)
四、UMD规范
UMD(Universal Module Definition)通用模块定义,为了兼容AMD、CMD和无模块化开发规范
/**
* UMD-Universal Module Definition 通用模块定义
* */
(function (root, factory) {
// 判断是否是AMD/CMD
if (typeof define === 'function') {
define([], factory)
} else if (typeof exports === 'object') {
// Node CommonJS规范
module.exports = factory()
} else {
// 浏览器环境
root.someAttr = factory
}
})(this, function () {
let add = function (a, b) {
return a + b
}
return {
add,
module: 'UMD'
}
})
五、ES6模块
ES6通过imort和export实现模块的输入与输出,import命令用于输入其他模块提供的功能,export命令用于规定模块对外的接口。
特点:
使用export导出模块
// test.js
export let module = 'ES6 Module'
export let hello = function () {}
let demo = function () {}
// 默认导出
export default demo
使用import导入模块
// 导入默认模块
import demo from './test.js' // 导入指定模块
import { hello, module } from './test' // 导入指定模块,并重命名
import { hello as hi, module } from './test.js' // 导入全部模块,并重命名
import * as test from './test.js'
后记
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏
、转发
、点击右下角按钮在看
,推荐给更多小伙伴呦,欢迎多多留言交流...
胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。
胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!
长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!
JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6的更多相关文章
- JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别
目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)
原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...
- CommonJS/AMD/CMD/UMD
为什么会有这几种模式? 起源:Javascript模块化 模块化就是把复杂问题分解成不同模块,这样可维护性高,从而达到高复用,低耦合. 1.Commonjs CommonJS是服务器端模块的规范,No ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结
一.CommonJS 主要是用于服务器端的规范,比如目前的nodeJS. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函 ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结(转)
根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...
- 关于 CommonJS AMD CMD UMD
1. CommonJS CommonJS 原来叫 ServerJS, 是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用requi ...
- CommonJS/AMD/CMD/UMD概念初探
1.CommonJS是一种规范,NodeJS是这种规范的实现. 1.1.CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作. 参考: http://www.commonjs.org ...
- CommonJS, AMD, CMD是什么及区别--简单易懂有实例
CommonJS, AMD, CMD都是JS模块化的规范. CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现. AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模 ...
随机推荐
- [置顶]
利用Python 提醒实验室同学值日(自动发送邮件)
前言: 在实验室里一直存在着一个问题,就是老是有人忘记提醒下一个人值日,然后值日就被迫中断了.毕竟良好的 卫生环境需要大家一起来维护的!没办法只能想出一些小对策了. 解决思路: 首先,我 ...
- CSS 加载动画
CSS加载动画 实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
- prometheus服务发现机制
一. Prometheus与服务发现 1.1 目前支持的服务发现方式 二. 案例 2.1 基于文件的服务发现 2.2 基于Consul的服务发现 三.本地测试 3.1 基于文件的服务发现 1.测试环境 ...
- jdk1.5之后,classpath不需要再配置
1.5之后更智能了. 设置了classpath之后,当前目录失效(在classpath中没找到就报错,不会再在当前目录继续找),所以要把当前目录添加到classpath,永久环境变量添加 .,临时环境 ...
- 大型Java进阶专题(二) 软件架构设计原则(上)
前言 今天开始我们专题的第一课了,也是我开始进阶学习的第一天,我们先从经典设计思想开始,看看大牛市如何写代码的,提升技术审美.提高核心竞争力.本章节参考资料书籍<Spring 5核心原理&g ...
- 使用AQS自定义重入锁
一.创建MyLock import java.util.concurrent.TimeUnit; import java.util.concurrent.locks.AbstractQueuedSyn ...
- Feign 客户端的使用 二
一.Feign的使用(客户端调用 json/xml格式的接口) 1.服务端接口编写 <parent> <groupId>org.springframework.boot< ...
- 第三章、vue基础精讲
3.1VUE实例 组件:全局组件,局部组件,vue的每个组件也是一个实例,有自己的实例属性和实例方法. 在console中调试vue,vm为vue的实例,凡是以$开头的都是vue的实例属性或者vue的 ...
- web测试喜事连连--草稿箱功能
“草稿箱”功能很常见吧,编辑内容后,不想发布的话,就先存为草稿.啥时候想公开了,发布即可. 今天发生个啥事呢,让作为Tester的我,哭笑不得. 开发部经理老F,反馈一个客户需求,发到群里让大家讨论. ...
- Python基础类型(1)
整数 整数在Python中的关键字用int来表示; 整型在计算机中运于计算和比较 在32位机器上int的范围是: -2**31-2**31-1,即-2147483648-2147483647 在64 ...