avatar

前端模块化

前端模块化

为什么要模块化

随着前端项目越来越大,团队人数越来越多,多人协调开发一个项目成为常态。例如现在小明和小张共同开发一个项目,小明定义一个aaa.js,小张定义了一个bbb.js。

aaa.js

1
2
3
4
5
6
7
8
9
10
11
//小明开发
var name = '小明'
var age = 22

function sum(num1, num2) {
return num1 + num2
}
var flag = true
if (flag) {
console.log(sum(10, 20));
}

此时小明的sum是没有问题的。

bbb.js

1
2
3
//小红
var name = "小红"
var flag = false

此时小明和小红各自用各自的flag你变量没问题。

但是此时小明又创建了一个mmm.js

mmm.js

1
2
3
4
//小明
if(flag){
console.log("flag是true")
}

在index.html页面导入这些js文件

index.html

1
2
3
<script src="aaa.js" ></script>
<script src="bbb.js" ></script>
<script src="ccc.js" ></script>

此时小明知道自己在aaa.js中定义的flag是true,认为打印没有问题,但是不知道小红的bbb.js中也定义了flag为true,所以mmm.js文件并没有打印出“flag是true”。

这就是全局变量同名问题。

导出全局变量模块解决全局变量同名问题

aaa.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//模块对象
var moduleA = (function (param) {
//导出对象
var obj = {}
var name = '小明'
var age = 22

function sum(num1, num2) {
return num1 + num2
}
var flag = true
if (flag) {
console.log(sum(10, 20))
}
obj.flag=false
return obj
})()

mmm.js

1
2
3
4
5
//小明
//使用全局变量moduleA
if(moduleA.flag){
console.log("flag是true")
}

这样直接使用aaa.js导出的moduleA变量获取小明自己定义的flag。

CommonJS的模块化实现

​CommonJS需要nodeJS的依支持。

aaa.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//CommonJS需要nodeJS支持
var name = '小明'
var age = 22

function sum(num1, num2) {
return num1 + num2
}
var flag = true
if (flag) {
console.log(sum(10, 20))
}

// module.exports = {
// flag : flag,
// sum : sum
// }
//导出对象
module.exports = {
flag,
sum
}

使用module.exports = {}导出需要的对象。

mmm.js

1
2
3
4
5
6
7
8
//导入对象,nodejs语法,需要node支持,从aaa.js取出对象
var {flag,sum} = require("./aaa")

console.log(sum(10,20));

if(flag){
console.log("flag is true");
}

使用 var {flag,sum} = require("./aaa")获取已经导出的对象中自己所需要的对象。

ES6的模块化实现

如何实现模块化,在html中需要使用type='module'属性。

1
2
3
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>

此时表示aaa.js是一个单独的模块,此模块是有作用域的。

如果要使用aaa.js内的变量,需要在aaa.js中先导出变量,再在需要使用的地方导出变量。

直接导出

1
export let name = '小明'

使用

1
2
import {name} from './aaa.js'
console.log(name)

./aaa.js表示aaa.js和mmm.js在同级目录。

统一导出

1
2
3
4
5
6
7
8
9
10
11
12
var age = 22
function sum(num1, num2) {
return num1 + num2
}
var flag = true
if (flag) {
console.log(sum(10, 20))
}
//2.最后统一导出
export {
flag,sum,age
}

使用import {name,flag,sum} from './aaa.js'导入多个变量

1
2
3
4
5
6
7
8
9
import {name,flag,sum} from './aaa.js'

console.log(name)

if(flag){
console.log("小明是天才");
}

console.log(sum(20,30));

导出函数/类

在aaa.js中添加

1
2
3
4
5
6
7
8
9
//3.导出函数/类
export function say(value) {
console.log(value);
}
export class Person{
run(){
console.log("奔跑");
}
}

在mmm.js中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
import {name,flag,sum,say,Person} from './aaa.js'

console.log(name)

if(flag){
console.log("小明是天才");
}

console.log(sum(20,30));

say('hello')
const p = new Person();
p.run();

默认导入

导出

1
2
3
export default {
flag,sum,age
}

导入

1
2
3
//4.默认导入 export default
import aaa from './aaa.js'
console.log(aaa.sum(10,110));

注意:使用默认导出会将所有需要导出的变量打包成一个对象,此时导出一个对象,此时我在mmm.js中导入变量时候命名为aaa,如果要调用变量需要使用aaa.变量。

统一全部导入

​ 使用import * as aaa from './aaa.js'统一全部导入

1
2
3
4
// 5.统一全部导入
import * as aaa from './aaa.js'
console.log(aaa.flag);
console.log(aaa.name);
文章作者: Gy
文章链接: http://sgyat.cn/2021/03/18/JavaScript杂记2/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 年轻没有梦
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论