JavaScript模块化
- 一、CommonJS规范
- 1、在node环境下的模块化
- 导入、导出
- 2、浏览器环境下使用模块化
- browserify编译js
- 二、ES6模块化规范
- 1、在浏览器端的定义和使用
- 2、在node环境下简单使用
- 方式一:
- 方式二:
- 3、导出数据
- 4、导入数据
- 5、数据引用问题
一、CommonJS规范
1、在node环境下的模块化
导入、导出
导入:require,例如:const axios = require('axios');
或者解构导入const {axios,postgres:pg}=require('./_axios_postgres.js')
导出:exports,例如:exports.axios = {"axios":axios,"pg":pg}
或者对象整体导出:module.exports = { axios,pg }
2、浏览器环境下使用模块化
默认是不支持require的,所以需要编译一下才能在html中引入模块化js
browserify编译js
二、ES6模块化规范
1、在浏览器端的定义和使用
导出代码
export const my_axios = { "a": 1, b: "2" }
export function getAxios() {return my_axios
}
导入代码
import * as es6 from "./27、es6模块化-导出.js"
console.log("xxx", es6.getAxios());
html测试代码,type="module"
一定要加上
<!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>Document</title>
</head>
<script type="module" src="./27、es6模块化-导入.js"></script>
<body></body>
</html>
控制台打印结果
2、在node环境下简单使用
方式一:
(1)修改上面导入导出文件为mjs文件
(2)执行结果
方式二:
在上面导入导出的js文件下新建package.json,加上内容type如下
{"type": "module"
}
运行结果
3、导出数据
(1)、分别导出。将导出的对象前面分别加上export
export const my_axios = { "a": 1, b: "2" }
export function getAxios() {return my_axios
}
(2)、统一导出。使用export {}
const postgres1 = "pg1"
const postgres2 = "pg2"
export {postgres1,postgres2}
(3)、默认导出。export default {}
const postgres3 = "pg3"
export default { postgres3}
或者
export default postgres3
4、导入数据
(1)、导入全部。
import * as es6 from "./27、es6模块化-导出.js"
(2)、命名导入。只针对分别导出和统一导出
import { my_axios as axios, getAxios } from "./28、es6模块化-导出.js"
(3)、默认导入。只针对默认导出
import xxx(随便起,获取到的是默认导出的所有对象) from "./28、es6模块化-导出.mjs"
(4)、通用导入。混合使用
import xxx(随便起,获取到的是默认导出的所有对象), { my_axios, getAxios } from "./28、es6模块化-导出.mjs"
(5)、动态导入。点击按钮后导入某个js
<body><button id="btn">导入</button>
</body>
<script>const btn = document.getElementById("btn")btn.onclick = async () => {const result = await import("./27、es6模块化-导出.js")console.log("result", result);}
</script>
(6)、import可以不接收任何数据。
比如每次启动项目都要在控制台打印一次当前版本号,
先创建version.js,内容写上console.log("v_1.1.2")
,然后在访问开始页面直接使用import "./version.js"
即可。
5、数据引用问题
思考一:
思考二:相当于复制了一份
思考三: