文章目录
模块化定义
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。
一个小文件就是一个模块
模块的好处
- 防止命名冲突
- 代码复用
- 高维护性（可以只对一个小的文件做修改）
模块化规范及对应的产品
| 模块化规范 | 产品 |
|---|---|
| CommonJS | NodeJS、Browserify（前端打包工具） |
| AMD | requireJS |
| CMD | seaJS |
ES6模块化的语法
模块功能主要由两个命令构成:export和 import
export命令用于规定模块的对外接口import命令用于输入其他模块提供的功能（导入功能）
eg：
m1.js:
// export将功能暴露出去
export let name = "孙悟空"
export function wuqi (){
console.log('我的武器是金箍棒')
}
html:
注意script设置type="module"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模块化</title>
</head>
<body>
<script type="module">
// 将m1.js中所有暴露的内容全都存在变量m1中
import * as m1 from "./m1.js"
console.log(m1)
</script>
</body>
</html>
输出：
ES6暴露模块export
分别暴露
在要暴露的数据前面添加export，就是上面的例子
统一暴露
暴露也可以写成一行
格式：export{要暴露的变量名}
m2.js:
// export将功能暴露出去
let name = "猪八戒"
function wuqi (){
console.log('我的武器是铁耙子')
}
export{
name,wuqi}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模块化</title>
</head>
<body>
<script type="module">
// 将m1.js中所有暴露的内容全都存在变量m1中
import * as m1 from "./m1.js"
import * as m2 from "./m2.js"
console.log(m2)
</script>
</body>
</html>
默认暴露
格式：
// 默认暴露
export default {
要暴露的数据（对象格式）
}
该种方法的返回值是一个default对象，调用里面属性的时候的时候需要添加.default
eg:
m3.js
// 默认暴露
export default {
name:"猪八戒",
wuqi:function(){
console.log('我的武器是铁耙子')
}
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模块化</title>
</head>
<body>
<script type="module">
// 将m1.js中所有暴露的内容全都存在变量m1中
import * as m1 from "./m1.js"
import * as m2 from "./m2.js"
import * as m3 from "./m3.js"
console.log(m3)
m3.default.wuqi()
</script>
</body>
</html>
ES6暴露引入模块import
通用导入方式
格式：import * as 变量名 from "js文件地址"
就是上面使用的方式，该方式可以应对所有暴露方式
eg：
import * as m1 from "./m1.js"
解构赋值形式
- 应对分别暴露、统一暴露
格式：import {解构赋值的变量名} from "js文件地址"
解构赋值的变量名对应着js暴露出去的变量
//分别暴露
import {
name,wuqi} from "./m1.js"
console.log(name)
console.log(wuqi)
// 统一暴露
import {
name as zhubajie,wuqi as tiepazi} from "./m2.js"
console.log(zhubajie)
console.log(tiepazi)
- 应对默认暴露
import {
default as m3} from "./m3.js"
console.log(m3)
简便形式（只针对默认暴露）
简便形式只针对默认暴露：
格式：import 变量名 from 'js地址'
EG:
import m3 from './m3.js'
console.log(m3)
模块化引入
之前我们模块的引入都是在script中写的，一般情况下我们习惯把所有的模块引入放到一个JS文件中，叫做入口文件，然后html再引入该文件
eg：
app.js
// 入口文件
import * as m1 from "./m1.js"
import * as m2 from "./m2.js"
import * as m3 from "./m3.js"
console.log(m1)
console.log(m2)
console.log(m3)
html引入
（不要忘记type设置成module）
<script src="./app.js" type="module"></script>
输出：
模块代码在项目中的使用
由于兼容性问题我们一般不直接使用src进行引入。
Babel简介
babel是js的一款编译器可以将比较新的js语法转换成ES5语法。
官网：https://babel.docschina.org/
转完之后将代码进行打包，页面在进行引入就可以解决兼容性问题
Babel使用
- 安装以下工具
- babel-cli（babel命令行）
- babel-preset-env（将比较新的js语法转换成ES5语法）
- browserify(webpack)（打包工具）
安装语句：
npm init -yes(初始化)
npm i babel-cli babel-preset-env browserify -D（安装）
- 进行转换
转换命令：
npx babel 要转换的文件目录 -d 要生成的文件目录 --presets=babel-preset-env
eg：
npx babel src/js -d dist/js
- 打包
npx browserify 要打包的文件地址 -o 要生成的文件目录/要生成的文件.js
eg：
npx browserify dist/js/app.js -o dist/bundle.js
html在引入的时候就引入打包好的文件。
ES6模块化引入NPM包
以jquery为例
- 下载juery包:
npm i jquery - 使用juery包:
再js文件中引入：import $from 'jquery';//等价于const $ = require("jquery");
这样再js文件中就可以使用jQuery语法编写语句了。