1、模块化概述
1.1 什么是模块化
将程序文件按照一定规则拆分成多个文件，这种编码方式就是模块化。拆分出来的每个文件就是一个模块。
1.2 模块化解决了什么
1、全局数据污染。 2、依赖混乱。 3、数据的安全问题。
2、模块化规范有哪些
2.1、CommonJS
CommomJS在服务端应用广泛，其诞生主要是为了解决node.js开发中的模块化规范问题。也可以在浏览器端运行，但是需要经过编译（通过browserify编译后，在导入使用）。
2.2、ES6模块化
ES6模块化在浏览器端应用广泛，ECMA官方的模块化规范。
2.3、AMD
2.4、CMD
3、导入和导出
模块化的核心就是：模块之间相互隔离，模块的数据私有，通过导入和导出进行数据和功能的共享。
导出：
模块暴露其内部的变量和函数，让其导入该部分的模块使用。
导入：
模块引用其他模块导出的内容，重用这部分代码和功能。
4、CommonJS的使用
4.1 导出
可以使用①、exports.xxx = xxx ②、module.exports = {...} ③、this.xxx = xxx
const name = 'zhangsan'
const Fn = () => {
console.log(name)
}
//导出方法1
exports.name = name
exports.Fn = Fn
//导出方法 2.1
module.exports = {
name,
Fn
}
//导出方法 2.2
module.exports.name = name
module.exports.Fn = Fn
//方法3
this.name = name
this.Fn = Fn
注意：
1、每个模块内部的this、exports、module.exports 在初始时都指向同一个空对象，该空对象就是当前模块要导出的数据。
2、无论如何修改导出对象，最终导出的都是module.exports的值
3、所以可以使用module.exports = {...} 而不能使用exports = {...}。ps:更不能使用this = {...},会报错 SyntaxError: Invalid left-hand side in assignment
4.2 导入
使用require导入
// 假设 从./test.js 中导出了 module.export = {name:'zhangsan', Fn:()=>{}}
//导入方法1 可以是绝对路径也可以相对路径
const module_1 = require('./test.js')
//导入方法2 可以对导入的数据进行结构或者重命名
const {name:MyName, Fn} = require('./test.js')
4.3扩展
一个js模块在执行时是被包裹在一个内置函数中执行的，所以每个模块都有自己的作用域。通过一下代码可以验证。
console.log('arguments', arguments.callee.toString())
//控制台会输出 以下内容
function (exports, require, module, __filename, __dirname) {
console.log('arguments', arguments.callee.toString())
}
5、ES模块化的使用
5.1 导出数据
ES6模块化提供三种导出方式①、分别导出 ==> export const a = xxx； ②、统一导出 ==>export {a, b, c} ③、默认导出 ==> export deafult xxx (导出方式可以混用,即用默认导出同时也可以使用 分别导出和统一导出)
const name = 'zhangsan'
const testFn = ()=>{}
//分别导出
export const age = 10
export const Fn = ()=>{}
//统一导出 --此处导出的并不是对象，而是类似对象的一种结构
export {
name,
testFn
}
//默认导出
export default {
name,
testFn
}
5.2 导入数据
ES6使用import导入，导入方式有①全部导入； ②默认导入； ③命名导入； ④动态导入
//通用 全部导入
import * as allVal from '.test.js'
//默认导入
import module_2 from './test.js'
//命名导入
import {name, testFn} from './test.js'
//默认导入和命名导入混用 并且给命名导入中的一个数据重命名
import module_2, {name as myName, testFn} from './test.js'
//动态导入
const dt = ()=> import('./test.js')
