模块化
- 模块化是指将一个打的程序文件，拆分成许多小的文件，然后将小文件组合起来。
- 模块化的好处：防止命名冲突、代码复用、高维护性
ES6 模块化语法
模块功能主要由两个命令构成：export 和 import
- export 命令用于规定模块的对外接口
- import 命令用于输入其他模块提供的功能
模块化暴露方式
一、分别暴露：在每一句前都加上 export
在 js 文件夹下 创建 Demo.js 文件
export let school = '北京大学' export function teach(){ console.log('教给你知识!') }
在外层文件夹创建 Demo.html 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模块化</title> </head> <body> <script type="module"> // 引入 Demo.js 模块内容 import * as Demo from "./js/Demo.js" console.log(Demo) </script> </body> </html>
二、统一暴露：export {a, b}
Demo.js
let school = '清华大学' function findJob(){ console.log('帮助你找到工作!!') } export{school,findJob}
Demo.html
<script type="module"> // 引入 Demo.js 模块内容 import * as Demo from "./js/Demo.js" console.log(Demo) </script>
默认暴露：export default {}
Demo.js
export default { school: '理工大学', change: function(){ console.log("好好学习-天天向上") } }
Demo.html
<script type="module"> // 引入 Demo.js 模块内容 import * as Demo from "./js/Demo.js" console.log(Demo) Demo.default.change() //好好学习-天天向上 </script>
模块化引入方式
1.通用导入方式（如上）：import * as Demo from "./js/Demo.js"
2.解构赋值方式：import {school, teach} from "./js/Demo.js"
Demo.js文件
export let school = '北京大学' export function teach(){ console.log('教给你知识!') }
Demo.html文件
<script type="module"> // 引入 Demo.js 模块内容 import {school, teach} from "./js/Demo.js" console.log(school) console.log(teach) </script>
如果有重名（比如 school 重名了），则可以用 as 修改
import {school as university, teach} from "./js/Demo.js" console.log(university)
默认暴露 export default {} 时，用解构赋值的形式为：
import {default as school} from "./js/Demo.js"
3.简便形式（针对默认暴露）
import Demo from "./js/Demo.js"
4.把两个 Demo 写入一个 JS 文件中
Demo.js
export let school = '北京大学' export function teach(){ console.log('教给你知识!') }
Demo2.js
export let school = '清华大学' export function give(){ console.log('教给你技能!') }
app.js
// 入口文件 // 模块引入 import * as Demo from "./Demo.js" import * as Demo2 from "./Demo2.js" console.log(Demo) console.log(Demo2)
Demo.html
<script src="./js/app.js" type="module"> </script>
babel 对 ES6 模块化代码转换
由于部分浏览器不支持 ES6 语法，可以使用 babel 把 ES6 语法转换为 ES5 的语法，这样不支持 ES6 语法的浏览器也可以运行了。
1.安装工具 babel-cli、babel-preset-env、browserify
进行初始化：npm init --yes
下载文件：npm i babel-cli babel-preset-env browserify -D
2.通过npx babel js -d dist/js 做一个转换
转换的结果存放到dist文件下：npx babel js -d dist/js --presets=babel-preset-env
3.打包 npx browserify dist/js/app.js -o dist/bundle.js
详情视频参照：babel转换ES6模块化代码
