后端工程师最低限度要了解的内容 - 前端 JS 方法与模块最佳 5

后端工程师最终的“成果”是在浏览器上运行的。
虽然不需要专业的前端知识，但了解最基本的 JavaScript 语法和方法将帮助您：

更容易找到 bug 的根源
与前端同事更好地沟通
可以直接处理一些简单的界面。

本文整理了后端工程师如果能掌握，将绝对有帮助的前端 JavaScript 最佳 5。

1. `fetch` – 在浏览器中进行 HTTP 调用

为什么重要？

后端工程师最熟悉的概念是 HTTP API。
在前端，通常通过fetch 来调用这个 API。
理解请求如何发送，以及如何处理响应/错误后，调试将会变得更加简单。

基本用法

// GET 请求示例
fetch('https://api.example.com/users/1')
  .then((res) => {
    if (!res.ok) throw new Error('HTTP error ' + res.status);
    return res.json(); // JSON 解析
  })
  .then((data) => {
    console.log('user:', data);
  })
  .catch((err) => {
    console.error('fetch error:', err);
  });

POST + JSON 示例

async function createUser() {
  try {
    const res = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'Alice', age: 30 }),
    });

    if (!res.ok) {
      throw new Error('HTTP error ' + res.status);
    }

    const data = await res.json();
    console.log('created:', data);
  } catch (e) {
    console.error(e);
  }
}

要点

res.ok, res.status 等，以区分服务器错误
JSON.stringify, res.json() 的使用模式几乎可以记成模板
如果出现 CORS 错误，建议养成查看浏览器控制台中如何发送 fetch 请求的习惯

2. `Promise` 和 `async/await` – 异步逻辑的基础

为什么重要？

前端大多是异步的。

UI 事件
HTTP 请求
定时器、WebSocket 等

处理这些的核心概念是Promise 和 async/await。
如果在后端使用过异步 I/O，概念是相似的。

Promise 基础

function getUser(id) {
  return fetch(`/api/users/${id}`).then((res) => res.json());
}

getUser(1)
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.error(err);
  });

使用 async/await 使其更易读

async function showUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('HTTP ' + res.status);

    const user = await res.json();
    console.log(user);
  } catch (e) {
    console.error(e);
  }
}

showUser(1);

并行调用 (后端也常用的模式)

async function loadDashboard() {
  const [userRes, statsRes] = await Promise.all([
    fetch('/api/me'),
    fetch('/api/stats'),
  ]);

  const [user, stats] = await Promise.all([
    userRes.json(),
    statsRes.json(),
  ]);

  console.log(user, stats);
}

要点

Promise 基础 API 可以通过 .then().catch() 或者 async/await 中选择一种读得通的方式
同时发送多个请求时要记住 Promise.all 模式

3. 数组方法三重奏: `map`, `filter`, `reduce`

为什么重要？

前端同样会处理数据。

将从服务器接收到的 JSON 列表转换为屏幕使用的数据格式
仅过滤特定条件的数据
计算总和/统计

在这个过程中，我们通常会使用数组方法。这与后端常见的集合处理概念相同。

`map` – 转换数组中的每个元素

const users = [
  { id: 1, name: 'Alice', age: 31 },
  { id: 2, name: 'Bob', age: 27 },
];

const names = users.map((u) => u.name);
// ['Alice', 'Bob']

`filter` – 仅保留符合条件的元素

const adults = users.filter((u) => u.age >= 30);
// [{ id: 1, name: 'Alice', age: 31 }]

`reduce` – 将数组汇总为一个值

const totalAge = users.reduce((sum, u) => sum + u.age, 0);
// 58

链式调用示例

const avgAgeOfAdults = users
  .filter((u) => u.age >= 30)
  .reduce((acc, u, _, arr) => acc + u.age / arr.length, 0);

要点

当看到“只有 for 循环的前端代码”时，可以开始考虑用 map/filter/reduce 进行重构的地方
将后端(Java, Kotlin, Python, Go 等) 的集合库与前端的对应关系进行建立，可以提高理解速度

4. DOM 操作要点: `querySelector`, `addEventListener`, `classList`

为什么重要？

即使使用了框架（如 React、Vue 等），在调试阶段仍然必须直接查看 DOM。
简单的管理页面或公司工具有时是使用原生 JS 编写的。

元素选择 – `querySelector`

<button id="save-btn">保存</button>

const saveBtn = document.querySelector('#save-btn');

直接使用 CSS 选择器语法。

#id
.class
button.primary
div > span 等

事件处理程序 – `addEventListener`

saveBtn.addEventListener('click', () => {
  console.log('保存按钮被点击!');
});

样式/状态切换 – `classList`

<button id="save-btn" class="primary">保存</button>

saveBtn.classList.add('loading');     // 添加类
saveBtn.classList.remove('primary');  // 删除类
saveBtn.classList.toggle('hidden');   // 如果存在则删除，如果不存在则添加

仅了解这些组合，您便可以：

“按钮怎么不能点击？” → 检查实际 DOM 元素是否被正确获取，事件是否被正确绑定
“这个 div 为什么不可见？” → 检查 classList 看看应用了什么状态类

要点

当理解框架内部工作原理时，掌握 DOM API 的基础可以大大降低困惑
重要的是在浏览器控制台中养成直接使用 document.querySelector(...) 的习惯

5. ES Modules – `import` / `export` 基础

为什么重要？

现在前端 JavaScript 默认使用ES Module(ESM)。

代码按文件单元进行分离
仅导入必要的内容使用
即使不使用 Webpack/Babel/打包工具，浏览器也可以直接理解 ESM

由于后端(Node.js)中 ESM 的使用也在增加，因此整理好后将对两个领域都有帮助。

模块导出 – `export`

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

export const PI = 3.14;

// 默认 (default) 导出 – 代表模块的值/函数
export default function mul(a, b) {
  return a * b;
}

模块导入 – `import`

// main.js
import mul, { add, PI } from './mathUtils.js';

console.log(add(1, 2)); // 3
console.log(mul(3, 4)); // 12
console.log(PI);        // 3.14

{ add, PI } : 命名导出
mul : 默认导出

在浏览器中使用模块 script 的示例

<script type="module" src="/static/js/main.js"></script>

这样声明后，可以在 main.js 中使用 import / export 语法。

要点

前端/后端共通的“模块化”概念是相同的
如果了解 import 路径规则 (./, ../, 绝对路径, 打包工具的别名等)，在阅读前端构建设置时也会更容易理解

后端工程师编写 js 代码的场景

总结 - “会前端的后端”的最低要求

总结来说，后端工程师要理解前端 JS，最低限度需要掌握的内容包括：

fetch – 在浏览器中进行 HTTP 调用及 JSON 处理
Promise / async/await – 理解异步逻辑结构
数组方法(map, filter, reduce) – 数据转换/过滤/聚合
DOM 基础(querySelector, addEventListener, classList) – 选择界面元素、事件、状态切换
ES Modules(import / export) – 理解模块化代码结构

熟悉这五个内容后：

可以参加前端代码的审查
可以直接实现/修改一些简单的页面
可以在前后端同时跟踪 API 集成问题。

之后可以根据需要扩展范围，如React/Vue 等框架，以及
构建/打包工具（Webpack, Vite, SWC 等）。

后端工程师最低限度要了解的内容 - 前端 JS 方法与模块最佳 5

1. `fetch` – 在浏览器中进行 HTTP 调用

为什么重要？

基本用法

POST + JSON 示例

2. `Promise` 和 `async/await` – 异步逻辑的基础

为什么重要？

Promise 基础

使用 async/await 使其更易读

并行调用 (后端也常用的模式)

3. 数组方法三重奏: `map`, `filter`, `reduce`

为什么重要？

`map` – 转换数组中的每个元素

`filter` – 仅保留符合条件的元素

`reduce` – 将数组汇总为一个值

链式调用示例

4. DOM 操作要点: `querySelector`, `addEventListener`, `classList`

为什么重要？

元素选择 – `querySelector`

事件处理程序 – `addEventListener`

样式/状态切换 – `classList`

5. ES Modules – `import` / `export` 基础

为什么重要？

模块导出 – `export`

模块导入 – `import`

在浏览器中使用模块 script 的示例

总结 - “会前端的后端”的最低要求

类似的帖子

MAME RUN!! 制作背后的技术 - 技术篇

图片优化的隐藏英雄：`width`、`height` 属性与核心网页指标改善策略

如何判断JavaScript中的浏览器宽度，以及在三星浏览器中经历的奇怪体验

JavaScript、Python 字典与 C++ 的 std::map

留下评论

添加新评论

1. fetch – 在浏览器中进行 HTTP 调用

为什么重要？

基本用法

POST + JSON 示例

2. Promise 和 async/await – 异步逻辑的基础

为什么重要？

Promise 基础

使用 async/await 使其更易读

并行调用 (后端也常用的模式)

3. 数组方法三重奏: map, filter, reduce

为什么重要？

map – 转换数组中的每个元素

filter – 仅保留符合条件的元素

reduce – 将数组汇总为一个值

链式调用示例

4. DOM 操作要点: querySelector, addEventListener, classList

为什么重要？

元素选择 – querySelector

事件处理程序 – addEventListener

样式/状态切换 – classList

5. ES Modules – import / export 基础

为什么重要？

模块导出 – export

模块导入 – import

在浏览器中使用模块 script 的示例

总结 - “会前端的后端”的最低要求

类似的帖子

MAME RUN!! 制作背后的技术 - 技术篇

图片优化的隐藏英雄：`width`、`height` 属性与核心网页指标改善策略

如何判断JavaScript中的浏览器宽度，以及在三星浏览器中经历的奇怪体验

JavaScript、Python 字典与 C++ 的 std::map

留下评论

添加新评论

1. `fetch` – 在浏览器中进行 HTTP 调用

2. `Promise` 和 `async/await` – 异步逻辑的基础

3. 数组方法三重奏: `map`, `filter`, `reduce`

`map` – 转换数组中的每个元素

`filter` – 仅保留符合条件的元素

`reduce` – 将数组汇总为一个值

4. DOM 操作要点: `querySelector`, `addEventListener`, `classList`

元素选择 – `querySelector`

事件处理程序 – `addEventListener`

样式/状态切换 – `classList`

5. ES Modules – `import` / `export` 基础

模块导出 – `export`

模块导入 – `import`