js 模块化开发 export default import

为什么要模块化

模块化的目的是为了适应现代软件行业的特点：大型、复杂、多人协作。模块化之后，就可以将项目拆分，自由组合，从而达到解耦和复用。

那什么是模块化呢？对于js而言，一个文件就是一个模块。

export 对外公开暴露接口

export的作用就是对外输出接口，从而让其他人员使用。

// one.js
export let name="jack"
export function test(){return 100}
export class Animal(){}

从上面的one.js可以看到，export 可以多次使用，而且可以输出多种类型的数据：变量、函数、类等。虽然可以在一个文件多次使用export关键字，但是谁会这样做呢？通常聪明人还是批量输出在，一次输出多个接口，做法如下：

// two.js
let name = 'rose'
let run = function(){ return "hello world"}
let person = class{}

// export {} 一次性输出一组定义好在变量
export {name, run, person}

import 导入外部公开在接口

import的作用就是在JS文件中导入其他文件公开的接口（即export关键字处理的对象）。

// 写法一，输入一个接口
import { run } from './two.js'
run() // hello world

// 写法二，输入多个接口
import { name, run } from './two.js'
````
注意：无论是输入一个还是多个接口，import命令后的 {} 必不可少。

## export default 输出一个默认的接口

// centos.js
export default{
name: 'centos'
run: function(){return "cpu100%"}
}

### export 和 export default 用法上的区别

- export在一个js模块中，可以多次出现，但是export default最多只能出现一次

- export输出在接口名是什么，import {} 导入的必须是什么

- export default 输出接口不用指定名称，import 导入时可以自定义输入的接口名，而且不用使用 {} 包裹接口名

### import 导入 export default 的输出接口

import free from './centos.js'
console.log(fress.name) // centos

### export 和 export default 是可以同时使用的
export 和 export default 同时使用是没毛病的，导入在时候，还是用不用{}的问题

// last.js
export var name = "redhat"
export var author = "unknown"

export default{
name: 'centos'
run: function(){return "cpu100%"}
}

// main.js
import free, {name,author} from './last.js'