普歌-es6模块化

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

一.模块化的优点

1. 防止命名冲突
2. 代码复用
3. 高维护性

二.模块化规范产品

ES6 之前的模块化规范有：

1. CommonJS => NodeJS、Browserify
2. AMD => requireJS
3. CMD => seaJS

三.ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。

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

四.暴露方式

1. 默认暴露

export default{
   school:'MINI',
   change:function(){
      console.log('改变世界');
   }
}

2. 分别暴露

export let school = 'MINI';
export function teach(){
   console.log('开发技能');
}

3. 统一暴露

let school = 'MINI',
function findJob(){
    console.log('找工作')
};
export {school,findJob};

五.页面引入方式

方式一（直接在HTML页面写）

注意：在HTML页面中，使用script标签后边必须加上type = “module”，给js标签声明为模块化

1. 通用的导入方式

<script type="module">
import * as m1 from './js/m1.js'
import * as m2 from './js/m2.js'
import * as m3 from './js/m3.js'
</script>

2. 解构赋值形式

<script type="module">
import {school,teach} fom './js/m1.js'
import {school as g,findJob} from './js/m2.js'
import {default as m} from './js/m3.js'
</script>

3. 简便形式 针对默认暴露

<script type="module">
import m1 from './js/m1.js'
</script>

其他暴露不能这样引入，否则报错

方式二（在单独的js文件里写，然后在html里引入一定要写type =“module”）

import *as m1 from './m1.js'
import *as m2 from './m2.js'
import *as m3 from './m3.js'