-
模块通常指的是一个单独的 JavaScript 文件,其中可以包含函数、对象、类或其他可重用的代码
每个模块都有自己的作用域 - 默认情况,外部没法访问这个模块里面的方法或者属性
Node 提供了很多模块 module,采用 CommonJS 模块规范
可以通过 require 或 import 语句来引入其他模块 - 使用哪个就 require 哪个
系统模块直接引入;自定义模块使用相对路径指定
便于:协作、共享、解耦
建议
.集中管理自定义模块,如统一存放在 module 文件夹
.把公共的功能抽离成为一个单独的 .js 文件作为一个模块
区分:系统模块和自定义模块;常见的系统模块有:
. os:operate system
. fs:file system
. path:目录/路径
Vue 项目中推荐使用 ES6 的 export 和 import 语法;更符合现代 JavaScript 的标准,并且有更好的静态分析和树摇优化支持
ESM(ES6 模块系统):基于静态分析的模块系统,语法上更简洁且功能更强大。它支持命名导出、默认导出以及按需导入
CommonJS:基于动态加载的模块系统,主要用于 Node.js 环境中。它通过 require 和 module.exports 来实现模块的导入和导出
- 基本步骤
-
创建模块文件
定制业务逻辑
导出模块:如果要让外部访问,必须在模块里面导出:使用 exports 单独导出或 module.exports 集中导出
引入模块:需要使用文件,使用 require 引入进来
使用模块
- 多个逻辑 - 单独导出
-
模块 oper.js
exports.add = () => {
console.log('hi, add');
}
exports.dec = () => {
console.log('hi, dec');
}
引入并使用
const { add, dec } = require('./oper')
console.log(add(), dec());
- 多个逻辑 - 集中导出
-
模块 oper.js
const add = () => {
console.log('hi, add');
}
const dec = () => {
console.log('hi, dec');
}
// 暴露2个 - 对象方式
module.exports = {
add,
dec
};
引入并使用
const oper = require('./module/oper')
oper.add()
oper.dec()
多个逻辑通常解构引入并使用 - 更加灵活,需要哪个引入哪个
const { add,dec } = require('./module/oper')
add()
dec()
- 单个逻辑
-
模块 admin.js
const admin = {
name: 'glpla',
url: 'https://glpla.github.io',
email: '1942194789@qq.com',
date: '2024-02-28',
version: '1.0.0',
desc: 'for drill'
}
// 暴露1个
module.exports = admin
引入并使用
const admin = require('./module/admin')
console.log('admin:\t', admin);
-
require 引入
exports 导出
module 集中导出
exports==module.exports 为 true,说明是一个方法
定制多个逻辑,解构化引入
引入时,可以省略后缀名.js
引入时,不带路径加载的是系统模块;带了路径则根据路径加载用户自定义模块