模块化开发一之ES6的模块化
javascript 原始功能
- 在网页开发早起，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等。那个时候代码还很少的。
- 那个时候的代码是怎么写的呢？ 直接将代码写在script标签中
- 随着ajax 异步请求额出现，慢慢形成了前后端分离：
- 客户端需要完成的事情越来越多，代码量也与日俱增
- 为了应对代码量的剧增，我们通常会见代码组织在多个js文件中，进行维护
- 但是这种维护方式，依然不能避免一些灾难性问题
- 比如说：全局 变量的同名的问题
- 虽然匿名闭包函数解决了变量名冲突的问题，到时同事带来了函数不可复用的问题。
- 比如说：全局 变量的同名的问题
//匿名闭包函数
(function(){
var flag = true
})
- 模块化思维解决冲突：
- 在匿名函数中定义一个对象
- 给对象添加各种需要暴露到外部的属性和方法(不需要暴露的直接定义即可)
- 最后将这个对象返回，并且在外部使用MoudleA 接收。
- 上述方法：是实现模块化雏形：
- 常规的模块化规范：
- CommonJS
- AMD
- CMD
- 也有ES6的Modules
- 模块化有两个核心：
- 导入模块
- 导出模块
CommonJS导入和导出
- 导出模块中的属性或方法
flag = true
module.exports = {
flag:flag,
test(a,b){
return a+b
},
demo(a,b){
return a*b
}
}
- 导入模块中的属性或方法
// commonjs 模块
let { test，demo，flag} = require('moduleA')
// 等同于
let _mA = require('moduleA')
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;
ES6的模块化实现（重点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script>
</script>
</body>
</html>
Aaa.js
var name='qzk';
var age = 18;
var flag = true;
function sum(a,b) {
return a+b
}
// 导出变量
export {
flag,name,age,sum
}
// 导出变量方式二
export var test1 = 'hahah';
// 直接导出函数
export function mul(num1,num2) {
return num1+num2
}
// 直接导出类
export class Person {
run(){
console.log('在running');
}
}
// 使用default 默认导出
// 在某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，erqie可以让使用者自己命名 可以使用default
const address = 'shanghai';
export default address
Bbb.js
import {name,flag,age,sum} from "./aaa.js";
if (flag){
console.log("小明是天才");
console.log(sum(10, 20));
}
// 直接导入 export 定义的变量
import {test1} from "./aaa.js";
console.log(test1);
// 导入export 定义的函数
import {mul,Person} from "./aaa.js";
console.log(mul(10, 100));
const p = new Person();
p.run();
// 导入 默认变量或方法：此时可以自己命名这个变量或方法
import addr from "./aaa";
console.log(addr);
// 统一对某个js中的变量全部导出
import * as aaa from "./aaa.js"
console.log(aaa.mul(10, 20));