50 个 JavaScript ES6 模块助你轻松掌握面试热点

2023-02-27 13:03:09

在前端技术领域内，JavaScript ES6 模块成为了不可或缺的知识点。通过理解和掌握这些模块，开发者能够更加高效地编写代码，并且在面试中表现出色。本文将介绍50个常用的ES6模块及相关概念，旨在帮助读者轻松应对面试挑战。

1. 基础语法

导入（import）与导出（export）

基础用法：

// 文件：mathUtils.js
export function add(a, b) {
    return a + b;
}

// 使用模块的文件
import {add} from './mathUtils.js';
console.log(add(10, 5)); // 输出结果为 15

命名空间导出：

// 文件：utilFunctions.js
export function formatNumber(number) {
    return number.toLocaleString();
}

export function formatDate(date) {
    return date.toISOString().split('T')[0];
}
// 使用模块的文件
import * as util from './utilFunctions.js';
console.log(util.formatDate(new Date()));

2. 动态导入

动态导入允许在运行时请求特定模块，这有助于提高应用程序性能。

const loadModule = async (moduleName) => {
    const module = await import(`./${moduleName}.js`);
    return module;
};
loadModule('mathUtils').then((module) => console.log(module.add(3, 4))); // 输出结果为7

3. 模块捆绑工具

为了在浏览器环境中使用ES6模块，需借助Babel或Webpack等工具进行编译和打包。这些工具能将现代JavaScript转换成兼容所有主流浏览器的代码。

配置 Babel：

// .babelrc 文件内容
{
    "presets": ["@babel/preset-env"]
}

配置 Webpack：

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

4. 常见陷阱与解决方案

循环依赖问题

当模块相互导入时，容易导致循环引用。解决此问题的方法包括使用解耦技术或重构代码结构。

示例：

// a.js
import { doSomething } from './b';
export function init() {
    doSomething();
}

// b.js
import { init } from './a'; // 导致循环依赖
export function doSomething() {}

解决方案

重构代码，避免直接在模块导入时执行函数或操作。

// a.js
import { doSomething } from './b';
const moduleA = () => ({
    init: () => {
        doSomething();
    }
});
export default moduleA;

// b.js
import moduleA from './a'; // 正确导入，避免循环依赖
export function doSomething() {}