持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情
前言
目前模块化是前端开发的一种非常重要的开发范式
CommonJS规范
node.js 中所提出的标准
- 一个文件就是一个模块
- 每个模块都有单独的作用域
- 通过module.exports导出成员
- 通过require函数载入模块
- 同步模式加载模块
AMD规范
专为浏览器而设计的异步模块规范（Asynchronous Module Definition）
require.js就实现了这个规范
很多第三方库都实现了这个规范，但它使用起来相对复杂，模块js文件请求频繁，大量的define、require的代码，同期淘宝出了一个 sea.js + CMD规范，后来被require.js也兼容了
ES Module规范
目前前端浏览器最主流的一套模块化规范
基本特性：
- 自动采用严格模式，忽略“use strict”
- 每个ES module都是运行在私有的作用域中
- ESM 是通过CORS的返式请求外部JS模块的
- ESM 的script标签会延迟执行脚本（页面渲染完才执行）
导入导出：
- export / import，导出的是引用，不是复制，并且在模块外部是只读，不可修改
- 注意 import 不是解构导出对象
- 重命名：export { name as fooName, }
- 提取所有导出成员：impot * as mod from './module.js'
- Import 不能引入变量，也不能放入if else或函数中，只能放在页面最顶层
- 动态加载模块：import('./module.js').then(module => console.log(module))
- 组合散落的组件：export {Foo, Bar, default as Button} from './module.js'
ES Modules 与 CommonJS：
- ES Modules 中可以导入CommonJS模块
- CommonJS 中不能导入 ES Modules 模块
- CommonJS 始终只会导出一个默认成员
稍等
整理不易，如果有帮到你，给个赞吧！👍
往期精彩文章
🌟ECMAScript新特性汇总，面试别在答错
🌟Promise 面试常考手写方法汇总
🌟Promise 常见误区
🌟js 柯里化艺术
🌟简述BFC是什么，以及在工作中的应用场景
