模块

@Module

模块通常指的是一个单独的 JavaScript 文件，其中可以包含函数、对象、类或其他可重用的代码

每个模块都有自己的作用域 - 默认情况，外部没法访问这个模块里面的方法或者属性

Node 提供了很多模块 module，采用 CommonJS 模块规范

可以通过 require 或 import 语句来引入其他模块 - 使用哪个就 require 哪个

系统模块直接引入；自定义模块使用相对路径指定

便于：协作、共享、解耦

建议

.集中管理自定义模块，如统一存放在 module 文件夹

.把公共的功能抽离成为一个单独的 .js 文件作为一个模块

区分：系统模块和自定义模块；常见的系统模块有：

. os：operate system

. fs：file system

. path：目录/路径

Vue 项目中推荐使用 ES6 的 export 和 import 语法 - ESM；更符合现代 JavaScript 的标准，并且有更好的静态分析和树摇优化支持

ESM（ES6 模块系统）：基于静态分析的模块系统，语法上更简洁且功能更强大。它支持命名导出、默认导出以及按需导入

CommonJS：基于动态加载的模块系统，主要用于 Node.js 环境中。它通过 require 和 module.exports 来实现模块的导入和导出
基本步骤: 创建模块文件

定制业务逻辑

导出模块：如果要让外部访问，必须在模块里面导出：使用 exports 单独导出或 module.exports 集中导出

引入模块：需要使用文件，使用 require 引入进来

使用模块

Node.js

模块 oper.js

多个逻辑 - 单独导出

exports.add = () => {
  console.log('hi, add');
}
exports.dec = () => {
  console.log('hi, dec');
}

等同于

module.exports = {
  add: () => {
    console.log('hi, add');
  },
  dec: () => {
    console.log('hi, dec');
  }
};

引入并使用

const { add, dec } = require('./oper')
console.log(add(), dec());

多个逻辑 - 集中导出

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

引入时，不带路径加载的是系统模块；带了路径则根据路径加载用户自定义模块

Vue.js

一般导出

以 oper.js 为例

一个文件可以有一个或多个逻辑

1. 导出

1.1 单独导出；在每个变量、函数或类的定义前加上 export 关键字

export const inc = () => {
  console.log('hi, inc');
};

export const dec = () => {
  console.log('hi, dec');
};

1.2 集中导出；先逐一声明，在末尾统一导出

const inc = () => {
  console.log('hi, inc');
};

const dec = () => {
  console.log('hi, dec');
};

export { inc, dec };

2. 引用

import { inc, dec } from '@/assets/utils/test';

按需引用

import { inc } from '@/assets/utils/test';

默认导出

以 inc.js 为例

一个文件只能有一个逻辑

1. 导出 - 不需要指定类型和名字

export default () => {
  console.log("hi, inc");
};

2. 引入 - 必须指定模块名

import inc from '@/assets/utils/inc';

甚至可以修改模块名 - 不建议

import add from '@/assets/utils/inc';