什么是模块化？

模块化是将代码分割成独立的、可重用的部分（模块），每个模块负责特定的功能。这样做的好处包括：

• 提高可读性：将复杂的代码分解为小块，使其更易于理解。
• 增强可维护性：修改一个模块不会影响其他模块，降低了出错的概率。
• 促进重用性：可以在不同项目中重用相同的模块，减少重复代码。

Export：导出模块

在JavaScript中，使用export关键字可以将模块中的变量、函数或类导出，以便在其他模块中使用。export有两种主要形式：命名导出和默认导出。

1. 命名导出

命名导出允许你导出多个变量或函数。示例如下：

// math.js
export const PI = 3.14;
export function add(x, y) {
    return x + y;
}

在上面的代码中，我们导出了一个常量PI和一个函数add。在其他模块中，可以通过相同的名称导入这些导出：

// app.js
import { PI, add } from './math.js';

console.log(PI); // 3.14
console.log(add(2, 3)); // 5

2. 默认导出

默认导出允许你导出一个单一的值或对象。示例如下：

// calculator.js
export default function multiply(x, y) {
    return x * y;
}

在其他模块中，你可以使用任意名称导入默认导出：

// app.js
import multiply from './calculator.js';

console.log(multiply(2, 3)); // 6

Import：导入模块

使用import关键字可以引入其他模块的导出。根据导出的类型，import的语法也有所不同。

1. 导入命名导出

import { PI, add } from './math.js';

2. 导入默认导出

import multiply from './calculator.js';

3. 导入所有导出

如果你想导入一个模块的所有导出，可以使用* as语法：

import * as math from './math.js';

console.log(math.PI); // 3.14
console.log(math.add(2, 3)); // 5

注意事项：

• 文件扩展名：  在 import 语句中，通常需要指定文件的扩展名（例如 .js）。
• 模块解析：  JavaScript 运行时环境需要能够找到并加载模块。这通常涉及到模块解析算法，它会根据配置的规则查找模块文件。
• ES Modules vs. CommonJS：  import 和 export 是 ES Modules 的语法。CommonJS 使用 require() 和 module.exports。 现代 JavaScript 开发更倾向于使用 ES Modules。

什么是 yield？ yield 关键字只能在生成器函数中使用。生成器函数是一种特殊的函数，使用 function* 声明。当生成器函数执行到 yield 表达式时，它会暂停执行，并将 yield 后

一、错误类型：三大“杀手”与应对策略

1. 语法错误（SyntaxError）

• 特征：代码解析阶段直接报错，如括号缺失、关键字拼写错误。
• 示例：

  console.log("Hello World';  // 缺少闭合引号  
  

• 解决方案：
  • 使用ESLint等工具静态检测。
  • 避免依赖分号自动插入，显式书写分号。

2. 运行时错误（Runtime Error）

• 典型子类：
  • ReferenceError：访问未声明变量（如console.log(undeclaredVar)）。
  • TypeError：对错误类型执行操作（如null.f()）。
  • RangeError：数值越界（如new Array(-1)）。
• 调试技巧：
  • 利用Chrome DevTools的断点调试和调用栈追踪。

3. 逻辑错误（Logical Error）

• 隐蔽性：代码无报错但结果异常，如误用乘法替代加法。
• 防御方案：
  • 编写单元测试覆盖边界条件。
  • 使用console.assert()进行运行时断言。

---

二、核心处理机制：try/catch的“三板斧”

1. 基础结构

try {  
  let num = JSON.parse('{invalid json}'); 
  console.log(num);
} catch (error) {  
  console.error("捕获错误：", error.message);  
} finally {  
  cleanupResources();  // 无论成败都会执行  
}  

2. 自定义错误：精准定位问题

• 抛出语义化错误：

class NetworkError extends Error {  
  constructor(url) {  
    super(`请求 ${url} 失败`);  
    this.code = "NETWORK_FAILURE";  
  }  
}  
throw new NetworkError("https://api.example.com");  

• 优势：通过error.code分类处理不同错误。

3. 性能陷阱

• 避免在循环内滥用try/catch：V8引擎对try块优化较弱，高频调用可能拖慢性能。

// 错误示范：  
for (let i = 0; i < 1e6; i++) {  
  try { /* 可能失败的操作 */ }  
  catch {}  
}  
// 正确做法：将try/catch外移至循环外层  

---

三、异步错误处理：Promise与async/await的“暗礁”

1. Promise未捕获错误

• 典型场景：

  fetchData().then(res => { ... }); // 缺少.catch()  
  

  • 后果：触发Uncaught (in promise) Error，导致全局崩溃。
• 解决方案：
  • 链式处理：.then().catch()。
  • 全局兜底：

    window.addEventListener('unhandledrejection', e => {  
      reportToServer(e.reason);  // 上报至监控系统  
    });  
    

2. async/await的优雅处理

• 结合try/catch：

  async function loadUserData() {  
    try {  
      const data = await fetch('/api/user');  
      if (!data.ok) throw new Error('状态码异常');  
    } catch (error) {  
      showToast(`加载失败：${error.message}`);  
    }  
  }  
  

  • 优势：同步化错误处理逻辑，避免回调地狱。

---