夜间模式
模块化
众所周知，js在早期是没有模块化的概念的
原因
多个js文件引入时需要特别注意顺序，否则会导致依赖链对不上，依赖覆盖、数据安全等等问题
NodeJs的出现让js可以实现后端开发
需要规范的管理代码
导入与导出
在Js中模块化的理念是导入（引入）和导出（暴露）
一个js文件有需要导出暴露出去的变量、函数、方法等等可以使用导出
如果需要使用其他js文件的变量、函数、方法等等则导入
提示
在现代前端项目中，有vite这种打包器可以实现JS代码自动转ES5，所以可以优先使用ES6的模块化
CommonJS
导入使用require
导出使用exports
具体使用方法：
javascript
let aJs = require('./a.js')
console.log("a.js:")
console.log(aJs)
let cJs = require('./c.js')
console.log("\nc.js:")
console.log(cJs)1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
javascript
const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}
exports.name = name
exports.age = age
exports.info = info1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
javascript
const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}
/**
* 与之前的区别：
*
*/
//module.exports.name = name
//module.exports.age = age
//module.exports.info = info
module.exports = {
name,
age,
info
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
txt
a.js:
{
name: '小明',
age: 18,
info: {
phone: 13123123123,
address: '北京市海淀区',
friends: [ '小红', '小刚', '小绿' ],
hobbies: { sport: '篮球', music: '音乐', movie: '跑步' }
}
}
c.js:
{
name: '小明',
age: 18,
info: {
phone: 13123123123,
address: '北京市海淀区',
friends: [ '小红', '小刚', '小绿' ],
hobbies: { sport: '篮球', music: '音乐', movie: '跑步' }
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
如果没有导出只有导入时
输出空对象
javascript
let aJs = require('./a.js')
console.log("a.js:")
console.log(aJs)1
2
3
4
2
3
4
javascript
const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
此时输出结果为：{}
注意
如果有多个module.exports或exports.的形式导出
只导出最后一个module.exports的对象
示例
javascript
let aJs = require('./a.js')
console.log("a.js:")
console.log(aJs)1
2
3
4
2
3
4
javascript
const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}
module.exports = {
name,
}
exports.info = info
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
javascript
const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}
module.exports = {
name,
info
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
javascript
const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}
exports.info = info
module.exports.name = name
/**
* a.js:
{
info: {
phone: 13123123123,
address: '北京市海淀区',
friends: [ '小红', '小刚', '小绿' ],
hobbies: { sport: '篮球', music: '音乐', movie: '跑步' }
},
name: '小明'
}
使用exports的时候会保留并添加新的属性，使用module.exports的时候会覆盖之前的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
初始化时
this、module.exports、exports均指向{}
也可以导出函数
解构赋值
javascript
let aJs = require('./a.js')
console.log("a.js:")
console.log(aJs)
aJs.hello()
console.log("----------")
/**
* 解构
*/
let {name, age, info, hello} = aJs
console.log("\n解构:")
console.log(name, age, info, hello)
hello()1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
javascript
const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}
function hello() {
console.log("hello")
}
module.exports = {
name,
age,
info,
hello
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
yacas
a.js:
{
name: '小明',
age: 18,
info: {
phone: 13123123123,
address: '北京市海淀区',
friends: [ '小红', '小刚', '小绿' ],
hobbies: { sport: '篮球', music: '音乐', movie: '跑步' }
},
hello: [Function: hello]
}
hello
----------
解构:
小明 18 {
phone: 13123123123,
address: '北京市海淀区',
friends: [ '小红', '小刚', '小绿' ],
hobbies: { sport: '篮球', music: '音乐', movie: '跑步' }
} [Function: hello]
hello1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
原理
Js模块化的原理是把每一个Js文件当作一个函数，在我们看不见的地方（即Js自动帮我们把一个Js文件转化为Js函数
也是为什么可以直接使用exports、require、module 的原因
javascript
function (exports, require, module, __filename, __dirname) {
const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}
function hello() {
console.log("hello")
}
module.exports = {
name,
age,
info,
hello
}
console.log(arguments.callee.toString())
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
javascript
const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}
function hello() {
console.log("hello")
}
module.exports = {
name,
age,
info,
hello
}
//查看
console.log(arguments.callee.toString())1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
浏览器中
CommonJS默认运行咋爱Node.JS中
浏览器端默认不认识CommonJS
需要用到
官网：Browserify
Github仓库：browserify：浏览器端 require（）
来转化为可以被浏览器所认识的代码
官网中介绍了使用方法，不多赘述。
ES6 模块
JavaScript 6 官方规范
即支持NodeJS、也支持浏览器
浏览器 或 NodeJs 运行需要配置
- 浏览器：
引入的时候修改type为module
<script type="module" src="./b.js"></script>
- NodeJs:
有两种方法
修改
.js文件名为.mjs,意为 module js添加
package.json配置文件，添加配置json{ "type":"module" }1
2
3二选一即可
导出
- 分别导出
- 整体导出
- 默认导出
javascript
//分别导出
export const name = "小明"
const age = 18
const info = {
phone: 13123123123,
address: "北京市海淀区",
friends: ["小红", "小刚", "小绿"],
hobbies: {
sport: "篮球",
music: "音乐",
movie: "跑步"
}
}
const num = [1,2,3]
const hello = () => {
console.log("hello")
}
const sum = (a,b) => {
return a+b
}
//统一导出
export {age,info}
export {sum}
// 默认导出 只能有一个
export default {hello,num}
// 如果只有一个时可以不使用花括号 export default hello1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
选择你需要导出/暴露的代码（变量、函数、对象...)
导入
导入全部(通用)
示例
javascriptimport * as hh from './a.js' //全部导入as后是要起别名 console.log(hh.name,hh.age, hh.info) console.log(hh.default.hello()) console.log(hh.default.num) console.log(hh.sum(1,2)) console.log("-----") console.log(hh)1
2
3
4
5
6
7
8
9javascript//分别导出 export const name = "小明" const age = 18 const info = { phone: 13123123123, address: "北京市海淀区", friends: ["小红", "小刚", "小绿"], hobbies: { sport: "篮球", music: "音乐", movie: "跑步" } } const num = [1,2,3] const hello = () => { console.log("hello") } const sum = (a,b) => { return a+b } //统一导出 export {age,info} export {sum} // 默认导出 只能有一个 export default {hello,num} // 如果只有一个时可以不使用花括号 export default hello1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32yacas小明 18 { phone: 13123123123, address: '北京市海淀区', friends: [ '小红', '小刚', '小绿' ], hobbies: { sport: '篮球', music: '音乐', movie: '跑步' } } hello undefined [ 1, 2, 3 ] 3 ----- [Module: null prototype] { age: 18, default: { hello: [Function: hello], num: [ 1, 2, 3 ] }, info: { phone: 13123123123, address: '北京市海淀区', friends: [ '小红', '小刚', '小绿' ], hobbies: { sport: '篮球', music: '音乐', movie: '跑步' } }, name: '小明', sum: [Function: sum] }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23命名导入（仅支持分别导出、统一导出）
javascriptimport {age as nianling } from './a.js' // 给age取别名 console.log(nianling) import {info} from './a.js' console.log(info)1
2
3
4
5
6
7javascript//分别导出 export const name = "小明" const age = 18 const info = { phone: 13123123123, address: "北京市海淀区", friends: ["小红", "小刚", "小绿"], hobbies: { sport: "篮球", music: "音乐", movie: "跑步" } } const num = [1,2,3] const hello = () => { console.log("hello") } const sum = (a,b) => { return a+b } //统一导出 export {age,info} export {sum}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28yacas18 { phone: 13123123123, address: '北京市海淀区', friends: [ '小红', '小刚', '小绿' ], hobbies: { sport: '篮球', music: '音乐', movie: '跑步' } }1
2
3
4
5
6
7默认导入
示例
javascriptimport xx from './a.js' // 默认导出名称随意取 console.log(xx) xx.hello() console.log(xx.num) const {hello,num} = xx hello() console.log(num)1
2
3
4
5
6
7
8
9
10javascript//分别导出 export const name = "小明" const age = 18 const info = { phone: 13123123123, address: "北京市海淀区", friends: ["小红", "小刚", "小绿"], hobbies: { sport: "篮球", music: "音乐", movie: "跑步" } } const num = [1,2,3] const hello = () => { console.log("hello") } const sum = (a,b) => { return a+b } //统一导出 export {age,info} export {sum} // 默认导出 只能有一个 export default {hello,num} // 如果只有一个时可以不使用花括号 export default hello1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32yacas{ hello: [Function: hello], num: [ 1, 2, 3 ] } hello [ 1, 2, 3 ] hello [ 1, 2, 3 ]1
2
3
4
5命名导入 与 默认导入 混合使用
javascriptimport xx,{sum,info} from './a.js' console.log(xx) console.log(sum(1,2)) console.log(info) const {hello,num} = xx hello() console.log(num)1
2
3
4
5
6
7
8
9javascript//分别导出 export const name = "小明" const age = 18 const info = { phone: 13123123123, address: "北京市海淀区", friends: ["小红", "小刚", "小绿"], hobbies: { sport: "篮球", music: "音乐", movie: "跑步" } } const num = [1,2,3] const hello = () => { console.log("hello") } const sum = (a,b) => { return a+b } //统一导出 export {age,info} export {sum} // 默认导出 只能有一个 export default {hello,num} // 如果只有一个时可以不使用花括号 export default hello1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32yacas{ hello: [Function: hello], num: [ 1, 2, 3 ] } 3 { phone: 13123123123, address: '北京市海淀区', friends: [ '小红', '小刚', '小绿' ], hobbies: { sport: '篮球', music: '音乐', movie: '跑步' } } hello [ 1, 2, 3 ]1
2
3
4
5
6
7
8
9
10动态导入
示例
javascript//动态导入 //在某一个时间端内导入 const btn = document.getElementById("btn") btn.addEventListener("click", async () => { const {hello} = await import("./a.js") //此时的引入类似全部导入 hello() })1
2
3
4
5
6
7
8
9javascript//分别导出 export const name = "小明" const age = 18 const info = { phone: 13123123123, address: "北京市海淀区", friends: ["小红", "小刚", "小绿"], hobbies: { sport: "篮球", music: "音乐", movie: "跑步" } } const num = [1,2,3] const hello = () => { console.log("hello") } const sum = (a,b) => { return a+b } //统一导出 export {age,info} export {sum} // 默认导出 只能有一个 export default {hello,num} // 如果只有一个时可以不使用花括号 export default hello1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32import 不接收数据直接运行
示例
javascript
import './d.js'1
javascript
console.log("hello")1
运行后输出hello
直接执行导入的代码
ES6 和 CommonJS
CommonJS 原理是 函数，被调用后Js文件的数据独立不共用
而ES6 引入的 是 类似 地址 的东西，修改后原来的文件的变量也会修改。
如果不想修改源文件的数值，源文件的数据类型设置const
其他
AMD
CMD