浅入ESModule、CommonJs

模块化规范

传统的JavaScript模块这一观念，都是通过script标签引入js文件代码,这样写出来基本需求没有什么问题，随着项目越来越大，我们引入的js文件就会越来越多。js文件的作用域都是顶层作用域，很容易造成变量污染并且不易维护，而且由于文件依赖问题，稍微不注意顺序引入错误，代码全报错风险很大。为了解决以上这些问题JAvaScript社区出现了CommonJs,它是一种模块化规范，包括现在的Node.js里面也借鉴了CommonJS语法，后来又有了ES Module 模块化规范，这两种都是解决了以上问题。什么问题？变量污染、代码维护问题、文件依赖问题、依赖管理混乱问题

CommonJs

CommonJS使用module.exports默认导出变量和函数，可以导出任意类型的值

module.exports = { 
  // 导出对象
  name：'zs',
  age:18,
  gender:'男'
}
  // 单独导出
module.exports.name = 'zs'
module.exports.age = null
module.exports.gender = undefined

由上可知，默认导出只能导出一个值，否则为null和undefined

CommonJS省略关键字module使用exports直接导出变量和函数，可以导出任意类型的值

exports.name = 'zs'
exports.age = 18
exports.name = 'ww'  

如果用exports导出单个值之后，就不能导出一个对象值，这样会修改当前导出的引用，然后之前的导出就会被覆盖，上面这种情况会改变对象的引用值，所以最后导出的只是个对象

CommonJS使用require导入，如果想要单个值，可以通过解构对象来获取

// demo.js
exports.name = 'zs'
exports.age = 18
let data = require("./demo.js")
console.log(data) // {name:'zs',age:24}

ComminJs支持动态导入

let lists = ["./index.js","./demo.js"]
lists.forEach((url) => require(url))
if(list.lenght){require(lists[0])}

CommonJs导入的值可拷贝

ES Module

ES Module使用export default默认导出

export default = { msg:'蛙人' }

ES Module使用export单个导出

export const name = 'zs' // 导出变量
export function fn() {} // 导出具名函数
export const test = () => {} // 导出匿名函数

ES Module使用import导入

// demo.js
export const name = 'zs'
export const age = 18
exprot const gender = '男'
// 导出
import { name } from './demo.js' // 按需导入
import * as all from './demo.js' // 全部导出

ES Module混合导入

import msg,{ name, age } from './demo.js'

该example使用混动导入，import语句必须先是默认导出后面是单个导出，顺序严谨，否则报错

ES Module是静态的

在ES Module语句import只能声明在文件的最顶部，不能动态加载语句，ES Module语句运行在带啊吗编译时

if(true){ import demo from './demo.js' }  // 报错