🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏
@[toc]
1. 为什么要模块化
随着前端项目越来越大，团队人数越来越多，多人协调开发一个项目成为常态。例如现在小明和小张共同开发一个项目，小明定义一个aaa.js，小张定义了一个bbb.js。
aaa.js
//小明开发
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
//小红
var name = "小红"
var flag = false
此时小明和小红各自用各自的flag你变量没问题。
但是此时小明又创建了一个mmm.js
//小明
if(flag){
console.log("flag是true")
}
在index.html页面导入这些js文件
<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”。
这就是全局变量同名问题。
2. 使用导出全局变量模块解决全局变量同名问题
aaa.js
//模块对象
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
//小明
//使用全局变量moduleA
if(moduleA.flag){
console.log("flag是true")
}
这样直接使用aaa.js导出的moduleA变量获取小明自己定义的flag。
3. CommonJS的模块化实现
CommonJS需要nodeJS的依支持。
aaa.js
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
//导入对象,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")获取已经导出的对象中自己所需要的对象。
4. ES6的模块化实现
如何实现模块化，在html中需要使用type='module'属性。
<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中先导出变量，再在需要使用的地方导出变量。
4.1 直接导出
export let name = '小明'
使用
import {
name} from './aaa.js'
console.log(name)
./aaa.js表示aaa.js和mmm.js在同级目录。
如图打印结果。
4.2 统一导出
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'导入多个变量
import {
name,flag,sum} from './aaa.js'
console.log(name)
if(flag){
console.log("小明是天才");
}
console.log(sum(20,30));
使用{}将需要的变量放置进去
4.3 导出函数/类
在aaa.js中添加
//3.导出函数/类
export function say(value) {
console.log(value);
}
export class Person{
run(){
console.log("奔跑");
}
}
在mmm.js中添加
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();
如图
4.4 默认导入 export default
导出
export default {
flag,sum,age
}
导入
//4.默认导入 export default
import aaa from './aaa.js'
console.log(aaa.sum(10,110));
注意：使用默认导出会将所有需要导出的变量打包成一个对象，此时导出一个对象，此时我在
mmm.js中导入变量时候命名为aaa，如果要调用变量需要使用aaa.变量。
4.5 统一全部导入
使用
import * as aaa from './aaa.js'统一全部导入
// 5.统一全部导入
import * as aaa from './aaa.js'
console.log(aaa.flag);
console.log(aaa.name);
Hi👋,这里是瑞雨溪一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我,我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉
