面试题：JavaScript 类与对象模块设计中的模块封装与依赖管理

使用 ES6 模块系统实现模块封装与依赖管理

模块封装：
- 在 ES6 中，每个 JavaScript 文件就是一个模块。可以使用 export 关键字将类、函数或变量暴露出去。例如，对于 ClassA 和 ClassB，在各自的文件中定义并导出：
```
// ClassB.js
class ClassB {
    constructor() {
        // 初始化逻辑
    }
}
export default ClassB;
```
```
// ClassA.js
import ClassB from './ClassB.js';
class ClassA {
    constructor() {
        this.classB = new ClassB();
    }
}
export default ClassA;
```
- 这样每个类都封装在自己的模块中，通过 import 和 export 控制对外暴露的接口，实现了模块的封装。
依赖管理：
- 使用 import 语句引入依赖。如上述 ClassA 引入 ClassB，import 语句会在模块加载时解析依赖关系，确保依赖的模块先被加载和执行。
- 模块加载遵循单例模式，即同一个模块无论被引入多少次，在内存中只有一份实例。这有助于避免重复加载和执行，保证依赖关系的一致性。

避免循环依赖问题

理解循环依赖：循环依赖是指模块 A 依赖模块 B，而模块 B 又依赖模块 A。在 ES6 模块系统中，这种情况会导致加载异常。
解决方法：
- 重构代码：分析循环依赖的原因，通过调整代码结构，将相互依赖的部分提取到一个独立的模块中。例如，如果 ClassA 和 ClassB 相互依赖某个共享逻辑，可以将这个逻辑提取到 Shared.js 模块中，然后 ClassA 和 ClassB 都依赖 Shared.js。
- 延迟引入：在 ES6 模块中，可以使用动态 import()。例如，在 ClassA 中如果某个方法才需要 ClassB，可以这样写：
```
class ClassA {
    async someMethod() {
        const ClassB = await import('./ClassB.js');
        const instance = new ClassB();
        // 使用 instance 的逻辑
    }
}
```
这样在模块加载时不会立即引入 ClassB，从而避免循环依赖。

Webpack 配置优化模块加载和打包

安装 Webpack 和相关插件：
- 首先确保项目中安装了 webpack、webpack - cli，如果使用 ES6 模块，还需要 babel - loader 等相关工具来处理 ES6 代码转换为 ES5 代码以兼容更多浏览器。
```
npm install webpack webpack - cli babel - loader @babel/core @babel/preset - env --save - dev
```

基本 Webpack 配置：

在项目根目录创建 webpack.config.js 文件。

const path = require('path');
module.exports = {
    entry: './src/index.js',// 项目入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel - loader',
                    options: {
                        presets: ['@babel/preset - env']
                    }
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

entry：指定项目的入口文件，Webpack 会从这里开始构建依赖图。
output：指定打包输出的路径和文件名。
module.rules：配置如何处理不同类型的文件，这里使用 babel - loader 处理 JavaScript 文件。
optimization.splitChunks：配置代码分割，将第三方库等公共代码提取出来，避免重复打包，优化加载性能。

其他优化：
- 使用 source - maps：在 webpack.config.js 中添加 devtool: 'eval - source - map'（开发环境）或 devtool:'source - map'（生产环境），方便调试代码。
- 压缩代码：在生产环境中，Webpack 会默认压缩代码。也可以通过配置 terser - webpack - plugin 等插件进一步优化压缩效果。例如：
```
const TerserPlugin = require('terser - webpack - plugin');
module.exports = {
    // 其他配置...
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true,
                terserOptions: {
                    ecma: 6
                }
            })
        ]
    }
};
```
这样可以并行压缩代码，提高压缩效率。

星途面试题库

面试题：JavaScript 类与对象模块设计中的模块封装与依赖管理

知识考点

面试题答案

使用 ES6 模块系统实现模块封装与依赖管理

避免循环依赖问题

Webpack 配置优化模块加载和打包