一些有助于使代码更简洁的提示。-js教程-PHP中文网

Some tips to help make the code cleaner.

我将采纳 Robert C. Martin（Bob 叔叔）所著的 《清洁编码器：专业程序员行为准则》 中的原则。本书强调与编写干净、可维护的代码以及成为一名高效的软件工程师相一致的专业精神、纪律和实践。以下是专为掌握 2025 前端开发而量身定制的修订版综合指南，其中包含 The Clean Coder 的教导：

1.专业精神：遵守纪律编码

The Clean Coder 的本质围绕着专业精神，这直接适用于您作为前端开发人员的编码方式。

1.1。对您的代码负责

拥有代码：对错误、错误和错过的需求承担责任。如果出现问题，请及时修复并从中吸取教训。
要求清晰：如果需求或设计不清楚，请不要继续假设。相反，与利益相关者合作以确保一致性。

1.2。编写让您感到自豪的代码

树立工匠精神。您交付的代码应该反映您的最大努力，平衡性能、可读性和可维护性。

2.代码可读性：像写作一样编写代码

Bob 叔叔强调了这个原则：“你的代码就是你的手艺。”代码应该编写成让其他人（以及未来的你）可以轻松阅读和理解它。

2.1。简单胜过聪明

避免编写过于聪明或神秘的代码。简单、清晰、枯燥的代码往往比让队友感到困惑的“聪明”代码更好。

代替：

const d = (x) => x % 2 ? 'odd' : 'even'; // Confusing intent

登录后复制

这样做：

const getOddOrEven = (number) => number % 2 === 0 ? 'even' : 'odd';

登录后复制

2.2。命名很重要

变量和函数名称应清楚地描述其用途。
对函数使用动词（fetchMovies、calculateTotal），对变量使用名词（userList、movieDetails）。

2.3。保持方法和函数较小

函数应该做好一件事并且做好一件事。 Bob 叔叔建议尽可能将函数限制为 5-10 行代码。

不好：

function renderMovieCard(movie) {
  // fetch data, format, render JSX in one place
}

登录后复制

好：

将其分解为多个函数，例如 fetchMovieDetails、formatMovieData 和 renderMovieCard。

3.关注点分离（单一责任原则）

每一段代码都应该有一个明确的目的。

3.1。组件、逻辑和样式

组件：仅处理渲染/UI。
逻辑：将可重用逻辑封装在自定义挂钩或实用程序中。
样式： 将样式抽象为 CSS 模块、实用优先 CSS（例如 Tailwind）或样式组件。

3.2。示例：完全分离的组件

不好（紧密耦合的逻辑、样式和渲染）：

const d = (x) => x % 2 ? 'odd' : 'even'; // Confusing intent

登录后复制

4.沟通：编写自文档代码

受到The Clean Coder的启发，目标是需要最少外部文档的代码。

4.1。代码应该讲一个故事

每一行代码都应该逻辑流畅，就像读书一样。例如：

将条件抽象为明确命名的变量。
用命名常量替换“幻数”。

之前（很难理解）：

const getOddOrEven = (number) => number % 2 === 0 ? 'even' : 'odd';

登录后复制

之后（可读意图）：

function renderMovieCard(movie) {
  // fetch data, format, render JSX in one place
}

登录后复制

5.测试：您的安全网

测试是The Clean Coder的主要焦点，强调专业人员总是测试他们的工作。

5.1。测试覆盖率

至少争取：

80% 单元测试覆盖率。
通过集成测试或E2E测试来测试关键用户旅程。

5.2。编写有意义的测试

好的测试描述行为和需求，而不是实现细节。

示例测试：

function MovieCard({ movie }) {
  const isBlockbuster = movie.revenue > 1000000;
  return (
    <div>



<p>Good (Separation of concerns):<br>
</p>

<pre class="brush:php;toolbar:false">// hooks/useIsBlockbuster.js
export const useIsBlockbuster = (revenue) => revenue > 1000000;

// components/MovieCard.js
import { useIsBlockbuster } from '../hooks/useIsBlockbuster';
import styles from './MovieCard.module.css';

function MovieCard({ movie }) {
  const isBlockbuster = useIsBlockbuster(movie.revenue);
  return <div className={isBlockbuster ? styles.blockbuster : styles.movie}>{movie.title}</div>;
}

登录后复制