前端模块化雏形

在前端开发中，经常需要多个人一起开发JS文件，当所有JS文件都在全局变量中的时候，会存在问题

// 这是aaa.js
let a=10
console.log(a);

// 这是bbb.js
console.log(a);
let a=20;
// 报错，因为在aaa已经定义过a变量
console.log(a);

上面的bbb.js中定义的a变量会报错，这是由于浏览器在编译时发现全局变量中有一个let定义的a变量，这就为前端开发带来很多不方便，所以提出前端模块化开发

雏形

最初用的闭包函数

// 这是aaa.js
(function(){
let a=10
let b=20
console.log(a);//10
console.log(b);//20
})()

// 这是bbb.js
(function(){
let a=20
console.log(a);//20
console.log(b);//报错（未定义）
})()

但这样会导致代码复用率极低，因为每个闭包函数中的变量只能在函数内部使用，如果想使用变量需要在函数内部将需要使用的数据以对象的形式返回，然后用一个全局变量的对象来接收

// 这是aaa.js
var obj=(function(){//用obj接收返回的数据
let a=10
let b=20
console.log(a);//10
console.log(b);//20
return {a,b};
})()

// 这是bbb.js
(function(){
let a=20
console.log(a);//20
console.log(obj);//{a: 10, b: 20}
})()