文章目录
- 模块化编程
- CommonJS
- ES6 模块编程
模块化编程
JavaScript的模块化编程主要是为了解决大型代码项目的复杂性问题,让代码更易于维护和调试。
模块化可以将代码分割成多个独立的部分,每个部分都有其特定的功能,可以单独测试和使用。
CommonJS
CommonJS是Node.js采用的模块化规范,它使用require()来加载模块,使用module.exports来输出模块接口。
案例:编写 functions.js , 该文件有函数,变量, 常量, 对象。要求在 use.js , 可以使用到 function.js 中定义的 函数/变量/常量/对象
//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
}
//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)案例一:使用第一种方式导出模块
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
}
//导入
import { sum, sub, name, PI} from "./function"
//使用
console.log(sub("100", "200"));
console.log(sum(10, 90));
console.log(name)
console.log(PI);
2)案例二:使用第二种方式导出模块
// 直接导出属性
export const sum = function (a, b) {return parseInt(a) + parseInt(b);
}
export let name = "lxg";
//导入
import {sum, name} from "./function"
//使用
console.log(sub("100", "200"));
console.log(name)
3)案例三:使用第三种方式导出模块
默认导出,将所有属性当成一个对象导出
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 你好 牛魔王");}}
}
//导入,m相当于被导出的对象
import m from "./function"
//使用
console.log(m.sub("100", "200"));
console.log(m.name);
console.log(m.monster);