commonJS 和 ES Module 区别

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模块是动态引用，只要两个模块之间存在某个引用，代码就可以执行。