一、為什么使用模塊化
不使用模塊化可能遇到的問題：全局變量同名的問題
A领虹，B在一個(gè)項(xiàng)目組中规哪，A創(chuàng)建了一個(gè)aaa.js文件，并且設(shè)置了一個(gè)var flag = true塌衰；之后诉稍，B創(chuàng)建了bbb.js文件定義了一個(gè)var flag = false；在這之后最疆，A因?yàn)樾枨缶Γ袆?chuàng)建了一個(gè)新的ccc.js文件，并且需要設(shè)置一個(gè)flag時(shí)肚菠，想起自己在aaa.js中設(shè)置了一個(gè)flag舔箭，所以就直接用了，并沒有設(shè)置新的；但是結(jié)果確實(shí)判斷為false层扶，A查看自己的代碼卻找不到問題所在箫章。這是因?yàn)榍岸舜a作用域的問題，ccc.js中判斷使用的是bbb.js中的flag镜会，所以是false檬寂。當(dāng)然，開發(fā)中一般很少遇到這種問題戳表，因?yàn)槎紩?huì)直接重新定義一個(gè)flag桶至。
全局變量同名的問題可以使用匿名函數(shù)（閉包）的方式解決，但是又會(huì)引出新的問題匾旭，那就是代碼的復(fù)用性變差了镣屹。因?yàn)楹瘮?shù)有自己的作用域，所以函數(shù)外無法使用函數(shù)內(nèi)定義的變量价涝，函數(shù)女蜈。這時(shí)就出現(xiàn)了模塊化的雛形來解決這個(gè)問題。
二色瘩、什么是模塊化
綜上伪窖，我們?yōu)榱私鉀Q全局變量重名的問題，使用匿名函數(shù)居兆，從而引發(fā)新的問題覆山，代碼復(fù)用性變差。為了解決這一問題泥栖，模塊化的被提出：在匿名函數(shù)內(nèi)部定義一個(gè)對(duì)對(duì)象簇宽，將各種需要暴露出到外面的屬性和方法添加到對(duì)象中，最后將這個(gè)對(duì)象返回聊倔，使用一個(gè)模塊接受這個(gè)對(duì)象。這就是模塊化生巡。
如下代碼耙蔑，在匿名函數(shù)中返回一個(gè)obj，其中放入我們需要的值孤荣，就可以使用函數(shù)內(nèi)的變量或者函數(shù)了甸陌。這樣就解決了代碼復(fù)用性的問題
aaa.js文件中這樣寫
var moduleA = (function () {
var obj = {};
var name = '小明';
var age = 26;
function sum(num1,num2) {
return num1 + num2
};
var flag = true;
if (flag){
console.log(sum(10, 40));
}
obj.flag = flag;
obj.sum = sum;
return obj;
})();
bbb.js中，可以通過(模塊名.屬性名)的方式獲取需要的值或者函數(shù)
(function () {
if(moduleA.flag) {
console.log('小明是天才');
}
console.log(moduleA.sum(11, 24));
})();
上述就是模塊化最基礎(chǔ)的封裝盐股，模塊的原始雛形钱豁。
現(xiàn)在前端模塊化開發(fā)已經(jīng)有了很多既有的規(guī)范，以及對(duì)應(yīng)的實(shí)現(xiàn)方案疯汁。
常見的模塊化規(guī)范
- CommonJS(Node)
- AMD
- CMD
- ES6的Modules
三牲尺、CommonJS（了解）
模塊化有兩個(gè)核心：導(dǎo)出和導(dǎo)入
CommonJS的導(dǎo)出：
module.exports = {
flag: flag,
sum: sum
}
CommonJS的導(dǎo)入：
var {flag,sum} = require('.../aaa.js')
上面是增強(qiáng)寫法，等同于
var aaa = require('.../aaa.js')
var flag = aaa.flag;
var sum = aaa.sum;
四、ES模塊化的導(dǎo)入（import）和導(dǎo)出(export)（掌握）
ES6中將一個(gè)js文件設(shè)置為一個(gè)模塊：type="module"
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
這樣每個(gè)js文件就是一個(gè)模塊谤碳，互相不干擾溃卡，不會(huì)出現(xiàn)命名重復(fù)問題，但如果一個(gè)模塊需要使用另一個(gè)模塊的數(shù)據(jù)蜒简，就需要導(dǎo)出導(dǎo)入了瘸羡。
export導(dǎo)出的幾種方式
let name = '小明';
let age = 25;
let flag = true;
function sum(num1, num2) {
return num1 + num2
}
if (flag){
console.log(sum(10, 20));
}
//1.第一種導(dǎo)出方式
export {
flag, sum
}
//2.第二種導(dǎo)出方式
export var num1 = 10000;
export var height = 1.88;
//3.導(dǎo)出function/class
export function mul(num1, num2) {
return num1 * num2
}
export class Person{
run() {
console.log('在奔跑');
}
}
//4.export default 注意：在一個(gè)模塊中default只能有一個(gè)
const address = '北京';
export default address;
// export default function (string) {
// console.log(string);
// }
import導(dǎo)入的幾種方式
//1.導(dǎo)入{}中的數(shù)據(jù)
import {flag, sum} from "./aaa.js";
if(flag) {
console.log('小明是天才');
}
//2.對(duì)應(yīng)第二種導(dǎo)出方式
import {num1, height} from "./aaa.js";
console.log(num1);
console.log(height);
//3.導(dǎo)入function/class
import {mul, Person} from "./aaa.js";
console.log(mul(10, 20));
var a = new Person();
a.run();
//4.導(dǎo)入default
import myFuc from "./aaa.js";
console.log(myFuc);
// myFuc('默認(rèn)事件');
//5.全部導(dǎo)入
import * as aaa from "./aaa.js";
console.log(aaa.flag);
console.log(aaa.mul(11, 20));
