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),仅供参考