模块化常用的两种实现方式(CommonJS, ES Module)

模块化的特点：

1.以功能划分为多个文件

2.随意组合，随意拆分，易于理解，易于扩展，易于维护，易于复用

 模块化的语法分为导出和导入两部分

使用 CommonJS 

导出

默认导出

module.exports = { 导出的数据 }
按需导出
module.exports.键 = 导出的数据   可以重新赋值(覆盖)
exports.键 = 导出的数据                不能重新赋值

导入 

默认导入

const 自定义模块名称 = require('指定模块路径或者模块名称')

按需导入 数据名称要和导出的数据名称相同

const { 数据1，数据2}  = require(" 指定模块路径或者模块名称 ")

使用 ES Module

导出：

// 默认导出 只能导出一次
export default 要导出的对象

// 按需导出  可以导出多次 最终导出一个对象  可以先导出再创建
export { 要导出的数据 }

导入

// 默认导入
import 自定义模块名 from '模块名或者路径'

// 按需导入  数据名要和导出的名字相同
import {数据 , 数据 ...} from '模块名或者路径'

// 混合导入
import 模块名,{数据 , 数据 ...} from '模块名或者路径'

 node环境下默认不支持ES Module的语法

解决方法：

1.把文件名改为 .mjs

2.浏览器使用时在html页面引入链接的里面加 type="module"  使用live server插件打开