commonJS 和 ES Module 区别
一、commonJS:
1、是什么?
是作用于服务端应用程序,让js拥有模块化功能的一种语法规范,执行方式是同步且运行时加载。
2、如何使用?
- module.exports导出:定义一个匿名对象,将需要导出的成员赋值到这个匿名对象上,然后再赋值到module.exports 导出。
- exports 导出:exports在每个模块中扮演着一个对象,如同每次在模块中默认执行了let exports = module.exports,那么exports如何使用导出功能呢,只要在exports对象上声明一个要导出去的属性名,将要导出的值赋值进去。
- require 导入:导入得到是一个对象,对象里面是导出模块所导出的成员,也可以同结构的方式按需导入。
3、有哪些特征?
- 对于基本数据类型来说属于复制,即会被模块缓存。同时,在另一个模块中也可以对该模块输出的变量进行重新赋值。
- 对于复杂数据类型,属于浅拷贝。由于两个模块引用的对象指向同一个内存空间,因此对该模块的值进行修改时会影响另一个模块。
- 使用require命令加载某个模块时,就会运行整个模块的代码。
- 当使用require命令加载同一个模块时,就不会再执行该模块,而是取到缓存之中的值。也就是说,commonJs模块无论加载多少次,都只会在第一次加载时运行一次。后面再加载,就返回第一次运行的结果,除非手动清除缓存。
- 循环加载时,属于加载时执行。即脚本代码在require的时候,就会全部执行。一旦出现某个模块被"循环加载",就只输出已经执行的部分,还未执行的部分不会输出。
二、 ES6模块化:
1、是什么?
ES6模块化和commonJS模块化一样,都是具有将JS模块化功能的语法规范。不过只能用于识别ES6语法的浏览器环境。ES6模块由两个命令构成:export和import。export是向外提供输出对外接口,import是使用其他模块向内提供输入接口。
2、如何使用?
- export:使用export 导出想要导出的值,可以是对象,变量,函数
声明 的同时 且导出
export const num = 10
将要导出的值赋值给对象的方式导出
const name = 'ch'
const age = 20
const fn = () => {
console.log('hello'+ch)
}
export {name, age, fn}
- import
格式: import 以结构的额方式使用大括号包起来,里面填写按需导入的成员,必须和必须和对应模块导出的成员名一致,如果需要更改成员名,需要使用as关键词, from 对接的模块路径
import {name, age, fn} from './es6.js'
如果需要把一整个模块的所有对象都导入成一个对象 使用 as 关键词,自定义一个对象名
inport * as home from './home'
3、有哪些特征?
- ES6中的值属于动态只读引用。
- 对于只读来说,即不允许修改引入的变量值,import的变量是只读的,不论是基本数据类型还是复杂数据类型。当模块遇到import命令时,就会生成一个只读引用。在脚本真正被执行时,再根据只读引用,到被引用的模块里面去取值。
- 对于动态来说,原始模块中的值发生变化,import加载的值也会发生变化,不论是基本数据类型还是复杂数据类型。
- 循环加载时,ES6模块是动态引用,只要两个模块之间存在某个引用,代码就可以执行。