模块化开发
一、为什么要模块化
假设一个公司几个人同时去开发一个项目，那么就会存在一个弊端 —— 会出现变量同名的情况（这样就会导致程序内部出现问题）
代码演示
//主页代码，用来汇总各个开发人员的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//假设这是==小红==开发的代码
<script src="aaa.js"></script>
//假设这是==小强==开发的代码
<script src="bbb.js"></script>
/假设/这是==小红==开发的代码
<script src="mmm.js"></script>
</body>
</html>
//小红开发的代码 aaa.js
var name = '小红'
var flag = true
function(num1,num2){
if(flag){
return num1+num2;
}
}
//小强开发的代码 bbb.js
var name = '小强'
//此处的代码的变量名命名与小红的变量命名重名了
var flag = false
//小红开发的代码 mmm.js
var name = '小红'
if(flag){
console.log('小红是天才');
}
结果就导致小红的代码出现了问题，本来自己定义过一个变量 flag ，但是却无法打印 ‘小红是天才’ 等几个字样
这样就出现了变量重名的问题，为了解决这个问题，就是用到了模块化
二、解决方案
方案一：使用匿名函数的方式
代码演示
//主页代码，用来汇总各个开发人员的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//假设这是==小红==开发的代码
<script src="aaa.js"></script>
//假设这是==小强==开发的代码
<script src="bbb.js"></script>
/假设/这是==小红==开发的代码
<script src="mmm.js"></script>
</body>
</html>
//小红开发的代码 aaa.js
(function(){
var name = '小红'
var flag = true
function(num1,num2){
if(flag){
return num1+num2;
}
}
})()
//小强开发的代码 bbb.js
(function(){
var name = '小强'
//此处的代码的变量名命名与小红的变量命名重名了
var flag = false
})()
//小红开发的代码 mmm.js
(function(){
var name = '小红'
if(flag){
console.log('小红是天才');
}
})()
这样看似解决了问题，但是大大降低了代码的复用性，使得自己在一个 js 里边的定义的变量，不能在其他 js 文件里边进行使用了
方案二：使用对象进行导出
代码演示
//主页代码，用来汇总各个开发人员的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//假设这是==小红==开发的代码
<script src="aaa.js"></script>
//假设这是==小强==开发的代码
<script src="bbb.js"></script>
/假设/这是==小红==开发的代码
<script src="mmm.js"></script>
</body>
</html>
//小红开发的代码 aaa.js
var modelA = (function(){
//定义一个对象用来进行保存数据
var obj = {}
var name = '小红'
var flag = true
function(num1,num2){
if(flag){
return num1+num2;
}
}
//给对象进行赋值
obj.flag = flag;
obj.name = name;
return obj;
})()
//小强开发的代码 bbb.js
var modelB = (function(){
var name = '小强'
//定义一个对象用来进行保存数据
var obj = {}
//此处的代码的变量名命名与小红的变量命名重名了
var flag = false
obj.name = name;
return obj;
})()
//小红开发的代码 mmm.js
var modelC = (function(){
//定义一个对象用来进行保存数据
var obj = {}
var name = '小红'
if(modelA.flag){
console.log('小红是天才');
}
obj.name = name;
return obj;
})()
三、常见模块化的规范
现在市面上已经有模块化的工具了，就不需要我们自己来定义了，我们直接拿过来使用即可，常见的模块化工具如下：
CommonJS、AMD、CMD，也有 ES6 的Modules
这里我们只介绍两个工具
1. CommonJS
2.ES6 模块化的导出和导入
2.1导出
2.2.1 用于导出变量
2.2.2 用于导出函数或类
2.2.3 export default 的用法
2.2导入
代码演示
//HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
</body>
</html>
//导出代码
//小明开发的文件
var name = '小明'
var age = 18
var flag = true
function sum(num1,num2){
return num1+num2
}
if(flag){
console.log(sum(20, 30));
}
//模块化导出
//1.导出方式一（定义完变量和方法最后一起导出）
export {
flag,
sum,
}
//2.导出方式二(在定义变量的时候直接导出)
export var num1 = 1000;
export var height = 1.88
//3.导出方式三（导出函数/类）
export function mul(num1,num2) {
return num1*num2;
}
export class Person {
run(){
console.log('在奔跑');
}
}
//4.导出方式四（export default）（默认导出方式，导出的时候不需要起名字 当使用者导入该文件时需要自己来进行命名且不加 {} ）
//默认方式导出函数
export default function () {//函数不需要起名字
console.log('在大叫');
}
//导入代码
//小明开发的文件
//模块化导入
//1.导入{}中定义的变量
import {flag,sum} from "./aaa.js";
if(flag){
console.log('小明是天才');
}
console.log(sum(100, 200));
//2.直接导入export定义的变量
import {num1,height} from "./aaa.js";
console.log(num1);
console.log(height);
//3.导入 export 的 function/class
import {mul,Person} from "./aaa.js";
console.log(mul(30, 50));
const p =new Person()
p.run()
//4.导入 export default 中的内容
import shout from "./aaa.js"
shout()
//5.统一全部导入
import * as aaa from "./aaa.js" //aaa为导入的对象所起的别名 使用起属性和方法时 格式：（aaa.属性/方法）的形式
console.log(aaa.flag);
console.log(aaa.height);
1004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
