模块化

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

模块化的好处

模块化的优势有以下几点：
1) 防止命名冲突
2) 代码复用
3) 高维护性

模块化规范产品

ES6 之前的模块化规范有：
1) CommonJS => NodeJS、Browserify
2) AMD => requireJS
3) CMD => seaJS

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。
export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能

调试实践

1. 安装工具 npm i babel-cli babel-preset-env browserify(webpack) -D
2. 编译 npx babel src/js -d dist/js —presets=babel-preset-env

3. 打包 npx browserify dist/js/app.js -o dist/bundle.js

   import & export

   import

4. import * as xx from

5. import {xx,xx} from
6. import {default as xx}
7. import xx from

export

1. export xx
2. export {xx,xx}
3. export default {xx:xx} ```javascript //———————m1.js import * as m1 from “./src/js/m1.js”; //引入 m1.js 模块内容 import {school, teach} from “./src/js/m1.js”; //解构赋值形式

//分别暴露 export let school = ‘尚硅谷’;

export function teach() { console.log(“我们可以教给你开发技能”); } //———————-m2.js

import * as m2 from “./src/js/m2.js”; import {school as guigu, findJob} from “./src/js/m2.js”; //统一暴露 let school = ‘尚硅谷’;

function findJob(){ console.log(“我们可以帮助你找工作!!”); } export {school, findJob};

//———————-m3.js import * as m3 from “./src/js/m3.js”; import {default as m3} from “./src/js/m3.js”; console.log(m3.school) import m3c from “./src/js/m3.js”;//简便形式 针对默认暴露 console.log(m3c.school);

//默认暴露 export default { school: ‘ATGUIGU’, change: function(){ console.log(“我们可以改变你!!”); } }

<a name="QF0me"></a>
# ES11 - 动态import
```javascript
//不使用动态时直接导入
// import * as m1 from "./hello.js";
//获取元素
const btn = document.getElementById('btn');
btn.onclick = function(){
    import('./hello.js').then(module => {
        module.hello();//调用hello.js中hello方法
    });
}