JavaScript 模块化

模块化的优势
1.防止命名冲突每个es模块都有独立的私有作用域
2.代码复用
3.高维护性

CommonJS 服务于服务器 => NodeJS、Browserify
ES6模块化服务于服务器和浏览器

ES6的模块化

依赖模块需要编译打包处理，比如ES6->ES5

ES6模块化的设计思想使尽量静态化，使得编译时就能确定模块的依赖关系，以及输入输出的变量。

模块功能主要由两个命令构成

export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能

ES Module 模块说明

我们只需要给script标签加上一个属性type=module，那么该script就是一个es模块
每个es模块都有独立的私有作用域

<script type="module" scr="请求的模块路径必须是支持跨域的">
 const a = '111'
 console.log(a)
</script>

<script type="module">
 const a = '222'
 console.log(a)
</script>
/*
输出111
输出222
*/

es模块是通过跨域的方式请求外部js模块，所以请求的该js模块必须是支持跨域的

<script type="module" scr="请求的模块路径必须是支持跨域的"></script>

es模块的script脚本会相对与普通的script脚本会延迟执行

<script type="module">
  console.log('我是ESM script')
</script>
<script>
  console.log('我是普通script')
</script>
/*
输出我是普通script
我是ESM script
*/

export命令与

一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。
如果想获取可以使用export命令。

分别暴露和统一暴露使等价的，优先考虑统一暴露，可以很清楚输出了哪些变量

//分别暴露
export let name = "ranan";
export let fun = function(){};
//统一暴露
let name = "ranan";
let fun = function(){};
export {name,fun}; //注意{}不是对象的意思是特定的语法

//默认暴露 这里的{}，是一个对象
export default {
   name : "ranan" ,
   fun : function(){}
}

export不支持直接导出变量和值,下面是错误的

const name = 'aaa'
export name // 导出变量
export 'aaa' // 导出值

import命令

//通用引入 将所有输出的变量放在m1对象中，采用m1.xx的方式使用
import * as m1 from  './xxx'
/*
统一暴露或分别暴露,这里的{}也是特定语法
并且{ }内的变量名称需要和export导出的变量名称相同
*/
import {name,fun} from './xxx'
//默认暴露的写法，必须要写别名,因为default是关键字
import {default as data} from "path" 
//简便形式 针对默认暴露
import data from "path"
console.log(data) //输出{name : "ranan" ,fun : functio(){}}