什么是模块化？模块化怎么实现？
前言 ： 增加印象，留下脚印 ，忘记还可以翻一翻 奥利给。
1，什么是模块化
公司里一个项目是有很多程序员一起开发的，例如 “多人运动” 这个项目
有程序员a ，程序员b ，程序员c …
程序员a 写了 aaa.js 里面有几千行 几万行代码
程序员b 写了 bbb.js 里面有几千行 几万行代码
程序员c写了 ccc.js 里面有几千行 几万行代码
…
随着前端越来越np，代码量越来越多，那么维护代码就是一件很困难的事情
会出现 全局变量同名问题，a程序员 var flag = ture；b程序员 var flag = false;
b程序员 加班到夜里2点 找自己代码也找不出问题，他不可能看a的代码，那么又是几个晚上，
所以就有了模块化
模块化早期是用闭包体现出来的 使用模块作为出口
a程序员 导出
var moduleA = (function () {// 导出的对象var obj = {}// 小明var name = '小明'var age = 22function sum(num1, num2) {return num1 + num2}var flag = trueif (flag) {console.log(sum(10, 20));}obj.flag = flag;obj.sum = sum;return obj
})()
b程序员导入
;(function () {// 1.想使用flagif (moduleA.flag) {console.log('我是天才, 哈哈哈');}// 2.使用sum函数console.log(moduleA.sum(40, 50));
})()
随着前端的发展，我们定义了很多模块规范
常见的有CommonJS , CMD , AMD , ES6 Modules
2，CommonJS模块化实现（一点了解）
CommonJS导出：
CommonJS导入：
node.js 的 CommonJs
这样你是没有用的需要有人给你解析 ，那么怎么做呢 看一下我另一篇文章
webpack模块化打包工具入门
我们现在去看一下es6模块化实现吧
3，ES6 Modules模块化实现
导入
var name = '小明'
var age = 18
var flag = truefunction 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('在奔跑');}
}
//默认导出 注意 只能写一个 你浏览器也只能一个默认吧 不用我说原因了吧
export default function (argument) {console.log(argument);
}
导出
// 1.导入的{}中定义的变量
import {flag, sum} from "./aaa.js";if (flag) {console.log('小明是天才, 哈哈哈');console.log(sum(20, 30));
}// 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 addr from "./aaa.js";addr('你好啊');// 5.统一全部导入
// import {flag, num, num1, height, Person, mul, sum} from "./aaa.js";import * as aaa from './aaa.js'console.log(aaa.flag);
console.log(aaa.height);
注意
这时候引用就不一样了，上一下 index.html吧
type = “module” 你的浏览器会帮你模块化的
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
这样变量不仅不会重名造成错误，还以复用。
有事联系QQ：1485731520
