ES6模块化

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
好处：

• 防止命名冲突
• 代码复用
• 高维护性

ES6的模块化
模块功能主要由两个命令构成：export 和 import
export(出口) --- 暴露
import(进口) --- 引入

export暴露

1.分别暴露
定义对象前加上export

export let name = 'Tom'
export function play(){
  console.log("玩")
}

2.统一暴露
先定义完所有数据，再统一暴露

let name = 'Tom'
function play(){
  console.log("玩")
}

export {name,play}

3.默认暴露
将所有数据都写在 default 这个对象中

export default{
  name: 'Tom',
  play: function(){
    console.log("玩")
  }
}

import引入
1.通用引入
三种暴露方式均可引入

import * as m from 'url'

  // *: 代表引入该模块中所有暴露的数据
  // as(起一个别名)
  // as 后紧跟的 m 就是别名,m 就代表引入的这个模块。
  // url: 引入模块的地址

// 如果引入的模块 是 默认暴露的
m.default.xxx
// 那么 m 里会有一个default对象，这个对象里面保存默认暴露的所有数据

2.解构赋值形式
三种暴露方式均可引入

import {name, play} from 'url'

  // name 和 play 是某个模块中事先定义并暴露的数据
  // {name, play} 表示引入该模块中暴露的 name 和 play，并用同名的变量保存
  // name = name   play = play

// 因为会用同名变量保存引入的参数，所以很可能导致命名冲突
import {name as n, play} from 'url'

  // 可以用 as 取别名，这样 n 就代表 name
  // 这时会用 变量n 保存 name

// 如果引入的模块 是 默认暴露的
import {default as m} from 'url'
// m 里封装了所有暴露的数据

3.简便形式
只适用于默认暴露的模块

import m from 'url'

// url为默认暴露的模块，如果不是会报错
// m 里封装了所有暴露的数据

Script标签
用到了模块化import 和 export 的 js 文件要是引入到 html 页面中的话 必须给script加上 type = "module" 这个属性
<script type="module" src="url..."></script>

引入NPM包
ES6:import 变量名 from ('包名') ==> const 变量名 = require('包名')