JavaScript文件引入、CommonJs和Es Module

JavaScript文件引入

　　早期通过script标签引入js文件，但当项目越来越庞大时，随着引入js文件的增加，会出现以下问题：

• js文件作用域都是顶层，将造成变量污染
• js文件变多，项目变得不好维护
• js文件依赖问题，引入顺序错，代码全报错

 

为了解决上述问题，出现了CommonJs和Es Module

• 解决变量污染问题，每一个文件都是独立的作用域，所以不存在变量污染
• 解决代码维护问题，一个文件里代码非常清晰
• 解决文件依赖问题，一个文件里可以清楚看到依赖了那些其他文件

CommonJs

　　CommonJs使用module.exports导出变量及函数，可以导出任意类型的值；也可省略module关键字，直接写exports导出。支持混合导出。

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

// commonjs.js
module.exports = {
    name: 'ame',
    age: 24,
    sex: 'male'
}

exports.name = 'maybe'

// getdata.js
let {name, age, sex} = require('./commonjs.js')
console.log(name);

　　不管是CommonJs还是Es Module都不会重复导入，即只要该文件内加载过一次这个文件了，再次导入一次是不会生效的

　　CommonJs支持动态导入，即只有执行到require时才执行文件导入

　　CommonJs导入的是值的拷贝，所以可以修改拷贝值，但这样可能会引起变量污染

 

Es Module

　　Es Module导出分为两种：单个导出(export)和默认导出(export default)，支持混合导出，如果文件中有混合导入，则必须先导入默认导出的，再导入单个导入的值

　　Es Module使用import进行导入，如果要单个导入则必须使用{}

　　export导出的是值的引用，并且内部有映射关系，而且导入的值不能进行修改即为只读状态

　　Es Module的import只能声明在文件的最顶部，不能动态加载语句

　　

export const name = "ame"
export const age = 24

export default {
    fn() {}，
}

import { name, age } from './index.js'
console.log(name, age) // "ame" 24

// 如果里面全是单个导出，我们就想全部直接导入则可以这样写
import * as all from './index.js'
console.log(all) // {name: "ame", age: 24}