02.模块化相关规范
1.模块化概述
传统开发模式的主要问题
- 命名冲突：指的是多个js文件之间如果存在重名的变量，则会发生变量覆盖问题；
- 文件依赖：指的是js文件之间无法实现相互的引用
通过模块化解决上述问题
- 模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成
员，也可以依赖别的模块 - 模块化开发的好处:方便代码的重用，从而提升开发效率，并且方便后期的维护
2.浏览器端模块化规范（已过时，不推荐使用，推荐使用ES6模块化规范）
- AMD
Require.js(http://www.requirejs.cn/) - CMD
Sea.js(https://seajs.github.io/seajs/docs/)
3.服务器端模块化规范
- CommonJS
①模块分为单文件模块与包
②模块成员导出: module.exports 和exports
③模块成员导入: require ('模块标识符')
4.大一统的模块化规范-ES6模块化
在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD、 CMD、 CommonJs 等模块化规范。
但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如:
- AMD和CMD适用于浏览器端的Javascript 模块化
- CommonJs适用于服务器端的Javascript 模块化
因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。
ES6模块化规范中定义:
- 每个js文件都是一个独立的模块
- 导入模块成员使用 import 关键字
- 暴露模块成员使用 export 关键字
4.1 Node.js 中通过babel体验ES6模块化
（1）安装babel相关的依赖包
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
（2）安装额外的第三方插件
npm install --save @babel/polyfill
（3）项目跟目录创建文件babel.config.js
（4）babel.config.js文件内容如下代码
//presets：语法转换的数组，提供在转换期间可能会用到的语法转换插件
const presets=[
["@babel/env",{
//转换完毕之后的代码至少要支持以下浏览器
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
];
//向外暴露，供babel来进行使用
module.exports={presets};
（5）通过npx babel-node index.js执行代码
5 ES6模块化的基本语法
5.1 默认导出与默认导入
- 默认导出语法 export default 默认导出的成员
- 默认导入语法 import 接收名称 from '模块标识符'
（1）默认导出
//当前文件模块为m1.js
//定义私有成员a和c
let a=10
let c=20
//外界访问不到变量d，因为它没有被暴露出去
let d=30
function show(){}
//将本模块中的私有成员暴露出去，供其它模块使用
export default{
a,
c,
show
}
（2）默认导入
//导入模块成员
import m1 from './m1.js'
console.log(m1)
//打印输出的结果为：
//{a:10,c:20,show:[Fuction:show]}
5.2 按需导出与按需导入
- 按需导出语法 export let s1 =10
- 按需导入语法 import {s1} from '模块标识符'
（1）按需导出
//当前文件模块为ml.js
//向外按需导出变量s1
export let s1 = 'aaa'
//向外按需导出变量s2
export let s2 = 'ccc'
//向外按需导出方法say
export function say = function() {}
（2）按需导入，可以通过as关键字来取别名
//导入模块成员
import { s1,s2 as ss2,say } from './m1.js'
console.1og(s1)//打印输出aaa
console.log(ss2) //打印输出ccc
console.log(say) //打印输出[Function: say]
5.3 直接导入并执行模块代码
有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。
//直接导入并执行模块代码
import './m2.js'
//当前文件模块为m2.js
//在当前模块中执行一个for循环操作
for(let i=0;i<3; i++) {
console.log(i)
