js-模块化

1、模块化

在前端传统开发模式中，当代码开发复杂度过高时会出现全局变量污染、依赖混乱、可维护性差等问题，为了解决这些问题，就需要模块化的支持

2、CommonJs（CMJ）

1、社区标准，node环境
2、CMJ规范，静态导入
3、所有的js文件均是一个单独的模块
4、所有模块中的全局变量、函数均不会产生污染

// 1.js
function a() {
    console.log('a');
}
module.exports = { a }

// 2.js
function b(){
    console.log('b');
}
module.exports = { b }

// index.js  通过require引入，相当于执行一遍1.js和2.js 
const { a } = require('./1')
const { b } = require('./2')

3、ES Module （ESM）

1、ES6发布的官方标准，浏览器环境和node环境均支持
2、支持静态和动态两种导入方式
3、导出全部可看做一个对象，将所有的导出成员均作为对象属性，default导出相对于增加一个导出对象属性为default，default只能导出一次

// 1.js
export const k = 1				 // 可以看做导出对象为 { k, b, default:c }
export function b() {}              
const c = () => {}
export default c

// index.js  静态引入 必须在文件顶部引入
import c, { b } from './1';    // c为引入默认

// index.js
import * as obj from './1'   // 将引入对象给别名为obj


// 1.js
export function getMath(){}

// index.js  动态引入 引入整体返回一个promise
async function run(){
	const { getMath } = await import('./1.js')
	getMath()
}