JavaScript 代码风格实战:从《不好的风格》练习看如何识别并修复代码风格问题

发布时间:2026/10/6 7:43:42

JavaScript 代码风格实战:从《不好的风格》练习看如何识别并修复代码风格问题 文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载本文基于 zh.javascript.info现代 JavaScript 教程代码质量章节中的实战练习展开。该练习给出了一段“风格很差但功能正确”的pow幂函数代码要求读者逐行找出风格问题并修复。读完本文你将能系统地识别函数签名空格、花括号位置、运算符两侧空格、分号缺失、超长行、多变量声明等常见风格缺陷并掌握一套可直接套用的修复方法文中还会结合 代码风格主文 的规则体系与 ESLint 等自动检查工具帮助你建立可落地的代码风格习惯。练习背景它在教程中的位置与考察目标这段练习位于教程的 1-js/03-code-quality/02-coding-style 目录下是“代码风格”一章的第一个任务题目本身存放在 task.md参考答案存放在 solution.md。该章的核心主张非常明确“我们的代码必须尽可能的清晰和易读”良好的代码风格是一项“编程艺术”——以正确且易于他人阅读的方式完成复杂任务。练习的目的正是把这一抽象原则落到具体代码上题目给出的代码在语法上完全合法、能正确计算x的n次幂但充斥着大量风格缺陷。学习者需要像“审稿人”一样逐行挑出问题并给出修复版本。原始代码一段“能跑但难看”的 pow 函数练习给出的原始代码如下这就是 task.md 中待修复的版本function pow(x,n) { let result1; for(let i0;in;i) {result*x;} return result; } let xprompt(x?,), nprompt(n?,) if (n0) { alert(Power ${n} is not supported, please enter an integer number greater than zero); } else { alert(pow(x,n)) }功能上它完成了三件事定义pow(x, n)幂函数通过两次prompt获取x与n当n 0时提示不支持否则弹出计算结果。但这段代码在可读性上有大量问题接下来我们对照 solution.md 中逐条标注的注释逐一剖析。逐条剖析代码中的每一处风格缺陷下面是在原始代码上标注出的全部问题。为了方便对照先看带注释的完整版本function pow(x,n) // - 参数之间没有空格 { // - 花括号独占了一行 let result1; // - 号两边没有空格 for(let i0;in;i) {result*x;} // - 没有空格 // { ... } 里面的内容应该在新的一行上 return result; } let xprompt(x?,), nprompt(n?,) // -- 从技术的角度来看是可以的 // 但是拆分成 2 行会更好并且这里也缺了空格和分号 ; if (n0) // - (n 0) 里面没有空格并且应该在本行上面加一个空行 { // - 花括号独占了一行 // 下面的一行代码太长了可以将其拆分成 2 行以提高可读性 alert(Power ${n} is not supported, please enter an integer number greater than zero); } else // - 可以像 } else { 这样写在一行上 { alert(pow(x,n)) // 缺失了空格和分号 ; }缺陷一函数签名中参数之间没有空格function pow(x,n)中x与n之间缺少空格。教程的 代码风格主文 将“空格”视为代码风格的基础语法要素并提供了完整的风格备忘图见下图其中明确要求函数名与左括号之间、括号与参数之间都要有空格参数之间也要有空格。修复方式function pow(x, n)。缺陷二花括号独占一行原始代码把左花括号{放在了单独一行function pow(x,n) {主文在“花括号”一节中明确指出在大多数 JavaScript 项目中花括号采用“Egyptian” 风格即 KR 风格—— 左花括号与相应的关键词位于同一行末尾而不是另起一行且左括号前应有一个空格if (condition) { // do this // ...and that }因此{应紧跟函数签名function pow(x, n) {。类似的错误在后面的if (n0)与else块中重复出现属于同一类问题。缺陷三赋值运算符两侧没有空格let result1;中两侧没有空格。主文要求“运算符周围要有空格”这是提高可读性的基础规则。修复为let result 1;。缺陷四for 循环整体压缩在一行、缺少空格、代码块未换行for(let i0;in;i) {result*x;}同时违反了几条规则for关键字与左括号之间没有空格主文要求for、if、while等关键词后留空格循环头部i0、in、i内部以及分号后缺少空格循环体{result*x;}被压在同一行。主文明确指出{ ... }里面的内容应该在新的一行上。修复为for (let i 0; i n; i) { result * x; }缺陷五用逗号在一行内声明多个变量let xprompt(x?,), nprompt(n?,)在语法上完全合法这也是原注释所说“从技术的角度来看是可以的”但把两次prompt挤在同一行既缺空格、又缺分号可读性差。拆成两行、每行一个变量声明更清晰let x prompt(x?, ); let n prompt(n?, );缺陷六if 条件内部没有空格且上方缺少空行if (n0)中n0内部没有空格应为n 0。同时这段if之前的let声明与if之间没有空行。主文在“缩进”一节中专门讲了垂直方向上的缩进用空行把代码拆分成逻辑块。即使是一个函数也应分割为“变量初始化 → 主逻辑 → 返回值”等逻辑块写代码时不应出现连续超过 9 行都没有被垂直分割的情况。因此let声明与if之间应插入一个空行。缺陷七单行过长alert(Power ${n} is not supported, please enter an integer number greater than zero);这一行太长。主文在“行的长度”一节中指出没有人喜欢读一长串代码最好将代码分割一下。一行最大长度应由团队达成一致通常是 80 或 120 个字符。模板字符串反引号天然支持跨行因此可以把这条提示信息拆成两行alert(Power ${n} is not supported, please enter an integer number greater than zero);主文中还给出了if条件过长时的拆行示范——把多个条件纵向排列每个条件一行if ( id 123 moonPhase Waning Gibbous zodiacSign Libra ) { letTheSorceryBegin(); }缺陷八else 单独占一行else独占一行不如写成} else {。主文在花括号一节的示例if (condition) { ... }以及风格备忘图中都体现了这一点闭合花括号与else、下一个左花括号连写在一行上整体结构更紧凑、块归属一目了然。缺陷九函数调用缺少空格与分号alert(pow(x,n))存在两个问题嵌套调用pow(x,n)内部没有空格应为pow(x, n)且语句末尾缺少分号。主文在“分号”一节中强调每一个语句后面都应该有一个分号即使它可以被跳过——因为在极少数情况下JavaScript 的换行符不会被解释为分号容易埋下隐患详见 分号一节。修复为alert( pow(x, n) );修复后的完整版本综合以上所有修正solution.md 给出的参考答案如下function pow(x, n) { let result 1; for (let i 0; i n; i) { result * x; } return result; } let x prompt(x?, ); let n prompt(n?, ); if (n 0) { alert(Power ${n} is not supported, please enter an integer number greater than zero); } else { alert( pow(x, n) ); }对比前后两个版本可以看到函数体内变量初始化、循环逻辑、返回值之间用空行做了垂直分割for循环体独占一行并缩进两个空格if/else以} else {形式连接所有运算符、逗号、括号前后都保留了规范的空格每条语句都以分号结尾。功能完全不变但可读性有了质的提升。这也是 代码风格主文 开头给出的规范示例风格主文中n 0版本的完整范本可参见该文“语法”一节。从“改对”到“写对”支撑这些规则的原理练习只要求修复一段代码但真正重要的是理解每条规则背后的理由。结合 代码风格主文可以把本练习涉及的规则归纳为几组花括号选择哪种写法主文对比了if的四种写法if (n 0) {alert(...)}—— 初学者常把花括号与语句挤在一行非常不好if (n 0)换行后再写alert(...)、不加花括号 —— 永远不要这样做添加新行很容易出错if (n 0) alert(...)单行无花括号 —— 如果代码很短可以接受if (n 0) { ... }——最好的方式。本练习中的if (n0)恰好属于第 1 类的变形花括号另起一行应改为第 4 类写法。对于极短语句如if (cond) return null单行写法也是可接受的但块结构通常更具可读性。缩进水平与垂直两个维度水平缩进通常为 2 或 4 个空格或 Tab。如今空格更普遍因为空格可以比 Tab 做出更灵活的缩进配置例如把函数参数与左括号对齐。本练习统一采用 2 空格缩进。垂直缩进用空行把代码拆分成逻辑块。本练习在result初始化、for循环、return之间以及let声明与if之间插入空行正是这一原则的体现。嵌套层级尽量浅主文建议尽量避免过深嵌套例如循环内不要层层加if可以用continue提前跳出for (let i 0; i 10; i) { if (!cond) continue; ... // - 没有额外的嵌套 }if/else与return的组合也可以达到同样效果把“特殊情况”在一开始就处理掉例如n 0时直接return主代码流就不需要额外嵌套。本练习的pow函数虽然嵌套不深但else分支的写法同样可以套用这一思路——条件不满足时立即结束主体逻辑平铺展开。函数位置先调用、后定义主文指出如果代码中有“辅助函数”与调用它们的代码组织方式有三种函数在上、调用在下调用在上、函数在下混合式。大多数情况下“先写调用代码、再写函数”更好因为阅读时我们首先想知道的是“它做了什么”。本练习中pow先定义后调用属于第 1 种方式在课堂练习中完全合理但在真实项目中把“做什么”的调用代码放在前面往往更利于他人快速理解程序主干。把规则自动化风格指南与检查器Linters人工逐行审查难免遗漏团队协作时更需要统一标准。主文介绍了两类工具化手段风格指南风格指南是“如何编写代码”的通用规则集涵盖用哪个引号、缩进几个空格、一行最大长度等细节。当团队所有成员遵循同一份指南时无论代码由谁编写风格都是统一的。业界已有多种成熟方案可供选择如 Google、Airbnb、Idiomatic.JS、StandardJS 等初学者可以从本文这类基础规则起步再挑选自己偏好的指南。ESLint 等自动检查器检查器Linters可以自动检查代码风格并提出改进建议而且顺带能发现变量或函数名拼写错误等真实 bug——因此即使不打算固守某种风格也建议安装一个。主文提到 JSLint、JSHint、ESLint 等工具并给出了 ESLint 的启用流程安装 Node.js使用npm install -g eslint安装 ESLint在项目根目录创建.eslintrc配置文件在编辑器中安装/启用 ESLint 插件。主文给出的.eslintrc示例{ extends: eslint:recommended, env: { browser: true, node: true, es6: true }, rules: { no-console: 0, indent: 2 } }其中extends: eslint:recommended表示基于 ESLint 的推荐规则集进行设置然后通过rules覆盖或追加自定义规则——例如示例中把缩进规则设定为 2 空格indent: 2与本练习采用的缩进风格完全一致。把本练习中发现的“缺陷类型”空格缺失、分号缺失、花括号位置、行过长等交给检查器自动把关正是“从人工修复到机器预防”的最佳实践路径。总结一份可复用的代码风格自查清单回到本练习把 solution.md 揭示的九类问题整理成清单即可作为日常自查的速查表参数与括号函数名与(之间、参数之间、嵌套调用参数之间都要有空格花括号位置左花括号与关键词同行KR 风格} else {连写在一行运算符空格、、*等运算符两侧保留空格控制结构for、if、while后留空格循环体内容换行、缩进变量声明每行一个变量使用let x ...;完整写法并加结尾分号空行分割不同逻辑块之间用空行做垂直分割行长度超过团队约定通常 80/120 字符时拆分模板字符串可跨行分号每条语句末尾都写分号嵌套深度用continue、提前return减少嵌套层级。主文在“总结”一节给出的判断标准值得反复体会当我们思考如何写“更好”的代码时应该问自己两个问题——“什么可以让代码可读性更高、更容易被理解”以及“什么可以帮助我们避免错误”本练习的每一处修复最终都服务于这两个目标。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐修复 JavaScript 糟糕代码风格以 pow 函数练习剖析编码规范javascript.info 编码风格实战修复 JavaScript 糟糕代码风格以 pow 函数练习剖析编码规范javascript.info 编码风格实战 整洁、易读的代码与正确运行的代码同文档/教程前端终极idiomatic.js代码审查宝典快速识别和修复JavaScript代码风格问题终极idiomatic.js代码审查宝典快速识别和修复JavaScript代码风格问题 idiomatic.js是一个专注于编写一致、地道JavaScript1BRC代码风格统一代码风格与格式化规范1BRC代码风格统一代码风格与格式化规范 概述 在十亿行挑战1BRC这个高性能计算项目中代码风格的一致性对于项目维护和性能优化至关重要。本文深入探讨1B性能测试大数据上一篇3分钟极速部署为华硕路由器打造全网广告拦截系统下一篇如何安装 Mac Mouse Fix为 Mac 鼠标选对安装方式并设置平滑滚动的完整指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
延伸阅读

更多相关文章

2026/10/6 8:48:45

降AI实战:三招消除AI味,让文字恢复活人感

“降AI”这个词,今年在论文圈和职场写作圈里出现的频率肉眼可见地变高了。我第一次注意到它,是帮学生改课程论文的时候:一篇用AI工具快速生成的文献综述,信息铺得挺全,逻辑也通,可导师一眼就判定“这不是你…

2026/10/6 8:48:45

Windows共享文件夹访问报错“账户已锁定”的排查与解决

1. "引用的账户当前已锁定"到底锁的是什么 遇到这个报错时,很多人第一反应是去检查共享文件夹的权限设置,或者重新配一遍SMB协议。我在帮朋友和同事处理这类问题时发现,方向从一开始就偏了——这个报错跟共享文件夹本身的权限配置关…

2026/10/6 8:48:45

厂区人员定位系统深度解析:UWB与蓝牙混合定位选型与实施

一提到“厂区人员定位系统”,很多人第一反应就是GPS。但如果你真的去过化工厂、电厂、钢铁车间的现场,就会发现事情没那么简单——厂房里根本没有GPS信号,钢结构和密集设备会让各种无线信号乱反射,员工的安全帽、防爆服也在遮挡信…

2026/10/6 8:48:45

CSAPP第六章:存储器层次结构与缓存优化实战解析

说实话,我是在啃到《CSAPP》第六章的时候,才第一次真正理解了什么叫“程序跑得慢,很多时候不是CPU不行,而是数据在等公交车”。这本书的中文译名是《深入理解计算机系统》,“06”这个编号在绝大多数读者心里都指向同一…

2026/10/6 8:48:45

数据孤岛怎么破?iPaaS集成平台从原理到落地全解析

数据孤岛这事儿,做IT的老哥们应该都不陌生。销售用CRM,财务用ERP,运营手里一堆Excel表格,客服的工单系统又是另一个平台,各玩各的,数据对不上,报表靠人工导来导去。更头疼的是,领导一…

2026/10/6 8:43:45

SQL开发导航地图:Gudu SQL Omni插件实战

如果你和我一样,每天要在几十张表、上百个存储过程里来回确认“这个字段到底在哪些地方被用过”“这个视图到底依赖哪几张表”,那下面这些东西应该能帮到你。先说结论:我把 Gudu SQL Omni 装进 IntelliJ IDEA 之后,最直观的感受就…

2026/10/5 6:32:56

Jev+Agent接管浏览器:browser-use实战与jev-ultrafast性能优化

1. 从“Jev”说起:为什么我要把Agent接进浏览器“Jev”这个词最近在圈子里出现的频率越来越高,很多人第一次听到会以为是某个新模型的名字,其实它更像是一种思路——把Jev模型的能力当作底座,通过Agent的方式去接管浏览器&#xf…

2026/10/6 4:01:51

多智能体集群实战:DeepAgents编排、MCP与A2A协议及Skills体系

1. 从"单兵作战"到"集群协同":多智能体编排到底在解决什么问题如果你最近在折腾 Agent 相关的东西,大概率会有一种感觉:单个 Agent 能做的事情,其实很快就摸到天花板了。你给它一个提示词,挂几个工…

2026/10/5 17:38:27

无源低通滤波器设计实战:从RC到LC,手把手教你避开那些坑

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/6 0:03:23

MR25H40CDF+STM32F031C6工业级高可靠数据存储方案

1. 项目概述:为什么在工业现场非得用 MR25H40CDF 配 STM32F031C6 做数据存储?在工厂产线的 PLC 控制柜里、在风电变流器的散热片背面、在矿井监测终端的金属外壳下,你经常能看到一块指甲盖大小的黑色芯片——它既不是 Flash,也不是…

2026/10/6 0:03:23

MRAM+STM32工业断电数据保全实战指南

1. 项目概述:为什么在工业现场非得用 MR25H40CDF 配 STM32F031C6 做数据存储?在工厂产线的PLC柜里、在野外无人值守的环境监测终端里、在高速运转的包装机控制板上,你经常能看到一块指甲盖大小的黑色芯片,旁边贴着“MR25H40CDF”丝…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑