模块化规范

传统开发模式的主要问题

• 命名冲突

• 文件依赖

  通过模块化解决上述问题

• 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间互相隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块

• 模块化开发的好处：方便代码的重用，从而提高开发效率，并且方便后期维护

  浏览器端模块化规范

• AMD —— Require.js

• CMD —— Sea.js

  服务器端模块化规范

• common.js

  大一统的模块化规范

• ES6模块化规范

  • 每个js文件都是一个独立的模块
  • 导入成员用import关键字
  • 暴露模块成员用export关键字

ES6模块化基本语法

注意：每个模块中，只允许使用唯一的一次export default，否则就会报错

1、默认导出与默认导入

• 默认导出语法 export default ```javascript //m1.js

let a = 10 let b = 20 function show(){}

export default{ a, show //只把a和show暴露出去了，外界是访问不到b的 }

- 默认导入语法** import 接收名称 from '模块标识符'**
```javascript
import m1 from './m1.js'
//这就把m1中暴露出来的成员引进来了
//访问m1中的成员
console.log(m1.a)

2、按需导出与按需导入

一个文件中既有默认导出，又有按需导出，这个是不会冲突的
导入的时候，默认导入中只有默认导出的成员，不会包含按需导出的成员，
在一个模块中，可以用多次按需导出
按需导入的时候可以写别名

• 按需导出

  //m1.js
  export let s1 = 'aaa'
  export let s2 = 'ccc'
  export function say = function(){}

• 按需导入 ```javascript import { s1 , s2 , say} from ‘模块标识符’ //花括号中的名字不能乱写，必须和导出中的名字是一一对应的关系 console.log(s1) console.log(s2) console.log(say)

//默认导入与按需导入同时使用 import m1,{s1 , s2 , say} from ‘./m1.js’ //按需导入的别名 import m1,{s1 , s2 as ss2 , say} from ‘./m1.js’ console.log(ss2) //这个时候s2是访问不到的

<a name="eGUyR"></a>
#### 3、直接导入并执行模块代码
> 有时候，我们只想单纯的执行某个模块中的代码，并不需要得到模块中向外暴露的成员
> 此时，可以直接导入并执行模块代码
```javascript
//m2.js
for(let i=0;i<3;i++){
    console.log(i)
}
//直接导入并执行模块代码
import './m2.js'
//这种形式表示，我只是想执行m2中的代码，并不需要接收m2向外暴露的成员，当然 m2也没有向外暴露成员