模块化编程

JavaScript的模块化编程主要是为了解决大型代码项目的复杂性问题，让代码更易于维护和调试。

模块化可以将代码分割成多个独立的部分，每个部分都有其特定的功能，可以单独测试和使用。

CommonJS

CommonJS是Node.js采用的模块化规范，它使用require()来加载模块，使用module.exports来输出模块接口。

案例：编写 functions.js , 该文件有函数,变量, 常量, 对象。要求在 use.js , 可以使用到 function.js 中定义的 函数/变量/常量/对象

javascript">//function.js
//定义对象,变量，常量, 函数
const sum = function (a, b) {return parseInt(a) + parseInt(b);
}
const sub = function (a, b) {return parseInt(a) - parseInt(b);
}
let name = "lxg";
const PI = 3.14;
const monster = {name: "牛魔王", age: 500, hi() {console.log("hi 你好 牛魔王");}
}
//导出
/*
1. module.exports 导出模块
2. 把你需要导出的数据, 写入到 {}中即可
3. 可以全部导出，也可以部分导出
4. 理解：相当于把我们导出的数据，当做一个对象
5. 如果属性名和函数/变量/对象..名字相同，可以简写
6. 有些前端， 简写 module.exports={} 成 exports={}
*/
exports = {sum, sub, name, PI
}

javascript">//use.js
//导入
//1. 在 es5 中, 我们通过 require 就包 对应.js 中的数据/对象，引入
//2. 我们使用的时候，通过 m.属性 就可以使用
//3. 如果我们导入时，不需要所有的，可以导入部分数据
const m = require("./function.js");
const {sub} = require("./function.js");//使用
console.log(m.sub("100","200"));
console.log(m.sum(10,90));
console.log(m.name)
console.log(m.PI);
console.log(sub(19,8));

ES6 模块编程

ES6三种导出模块方式：

• export {名称/对象/函数/变量/常量}
• export 定义 =
• export default {}

导入模块方式：

• import {} from “xx.js”
• import 名称 form “xx.js”

1）案例一：使用第一种方式导出模块

javascript">const sum = function (a, b) {return parseInt(a) + parseInt(b);
}
const sub = function (a, b) {return parseInt(a) - parseInt(b);
}
let name = "lxg";
const PI = 3.14;
const monster = {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}
}// 第一种方式导出
exports = {sum, sub, name, PI
}

javascript">//导入
import { sum, sub, name, PI} from "./function"
//使用
console.log(sub("100", "200"));
console.log(sum(10, 90));
console.log(name)
console.log(PI);

2）案例二：使用第二种方式导出模块

javascript">// 直接导出属性
export const sum = function (a, b) {return parseInt(a) + parseInt(b);
}
export let name = "lxg";

javascript">//导入
import {sum,  name} from "./function"
//使用
console.log(sub("100", "200"));
console.log(name)

3）案例三：使用第三种方式导出模块

javascript">默认导出，将所有属性当成一个对象导出
export default {sum (a, b) {return parseInt(a) + parseInt(b);},sub (a, b) {return parseInt(a) - parseInt(b);},name : "lxg",PI : 3.14,monster : {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}}
}

javascript">//导入,m相当于被导出的对象
import m from "./function"
//使用
console.log(m.sub("100", "200"));
console.log(m.name);
console.log(m.monster);