模块化Common JS 和 ES Module
目录
历程
1.几个函数：全局变量的污染，模块间没有联系
2.对象：暴露成员，外部可修改
3.立即执行函数：闭包实现模块私有作用域
common JS
module和Module
过程
模块依赖：深度优先遍历、父 -> 子 -> 父
导入：require
避免重复加载、循环引用：Module缓存
先加入缓存， 后执行模块内容
动态加载：任意位置，按需加载
导出
对象：exports=module.exports
非对象：module.exports
区别
CommonJS
运行时加载
ES Module
编译时加载
模块化规范：一个模块=实现特定功能的一组方法。
全局污染：共享时，同名变量冲突
依赖管理：下层 js 能调用上层 js 的方法，但是上层 js 无法调用下层 js 的方法
历程
1.几个函数：全局变量的污染，模块间没有联系
// 模块A
var ModuleA = {
func1: function() {
// ...
},
func2: function() {
// ...
}
};
// 模块B
var ModuleB = {
func3: function() {
// ...
}
};
2.对象：暴露成员，外部可修改
后面提出了对象，通过将函数作为一个对象的方法来实现，但是这种办法会暴露所 有的所有的模块成员，外部代码可以修改内部属性的值。
3.立即执行函数：闭包实现模块私有作用域
现在最常用的是立即执行函数的写法，通过利用闭包来实现模块私有作用域的建立，同时不会对全局作用域造成污染。
//IIFE（立即调用函数表达式）
//创建一个私有作用域，避免变量之间的冲突。然后，通过返回一个对象或函数来暴露模块的公共部分
// 模块A
var ModuleA = (function() {
var privateVar = "private";
function privateFunc() {
// ...
}
return {
publicVar: "public",
publicFunc: function() {
// ...
}
};
})();
common JS
module和Module
module：在 commonjs 中每一个 js 文件都是一个单独的模块
module 上保存了 exports 等信息之外，还有一个 loaded（bool） 表示该模块是否被加载。
Module ：以 nodejs 为例，整个系统运行之后，会用 Module 缓存每一个module的信息。
过程
//home.js
const sayName = require('./hello.js')
module.exports = function say(){
return {
name:sayName(),
}
}
//编译进行首尾包装
(function(exports,require,module,__filename,__dirname){
const sayName = require('./hello.js')
module.exports = function say(){
return {
name:sayName(),
}
}
})
//包装函数
function wrapper (script) {
return '(function (exports, require, module, __filename, __dirname) {' +
script +
'\n})'
}
//runInThisContext
eavl(包装后的module)(module.exports, require, module, __filename, __dirname)
模块依赖：深度优先遍历、父 -> 子 -> 父
//a.js
const getMes = require('./b')
console.log('我是 a 文件')
exports.say = function(){
const message = getMes()
console.log(message)
}
//b.js
const getMes = require('./a')
console.log('我是 b 文件')
exports.say = function(){
const message = getMes()
console.log(message)
}
//main.js
const a = require('./a')
const b = require('./b')
console.log('node 入口文件')
const say = require('./a')
console.log('我是 b 文件')
console.log('打印 a 模块' , say)
setTimeout(()=>{
console.log('异步打印 a 模块' , say)
},0)
exports.say = function(){
const message = getMes()
console.log(message)
}
导入：require
避免重复加载、循环引用：Module缓存
先加入缓存， 后执行模块内容
加载之后的文件的 module 会被缓存到 Module 上，比如一个模块已经 require 引入了 a 模块，如果另外一个模块再次引用 a ，那么会直接读取缓存值 module ，所以a中的代码只会执行一次
动态加载：任意位置，按需加载
require 本质上就是一个函数，那么函数可以在任意上下文中执行，来自由地加载其他模块的属性方法。
导出
对象：exports=module.exports
当 module.exports 导出的是一个对象时，对象的引用关系是被保留的，这意味着其他模块引入这个对象后，即使该对象后续被修改，其他模块也能看到这些修改。这是因为对象在 JavaScript 中是引用类型，它们的引用关系是保持的。
exports.author = '7'
exports.say = function (){
console.log(666)
}
module.exports ={
author:'7',
say(){
console.log(666)
}
}
非对象：module.exports
在循环引用的时候，就容易造成属性丢失的情况发生
module.exports = a // 导出变量
module.exports = [1,2,3] // 导出数组
module.exports = function(){} //导出方法
区别
CommonJS
运行时加载
在服务器端，同步加载模块的方式是可行的，因为模块通常都在本地。
ES Module
编译时加载
ES模块的结构在编译时就确定下来，模块的依赖关系在代码运行前就已经确定。静态导入导出：方便 tree shaking
「万字进阶」深入浅出 Commonjs 和 Es Module - 掘金