如何构建清晰可维护的JavaScript代码结构：clean-code-javascript终极指南

如何构建清晰可维护的JavaScript代码结构：clean-code-javascript终极指南

【免费下载链接】clean-code-javascriptConceitos de Código Limpo adaptados em JavaScript (Tradução PT-BR)项目地址: https://gitcode.com/gh_mirrors/cle/clean-code-javascript

clean-code-javascript是一个基于Robert C. Martin《代码整洁之道》原则的JavaScript实践指南，旨在帮助开发者编写更具可读性、可重用性和可重构性的代码。本指南将从命名规范、函数设计、对象结构到错误处理，全面解析如何通过模块化开发提升JavaScript项目质量。

命名规范：让代码自我解释

变量和函数的命名应该清晰传达其用途和含义，避免模糊或缩写。一个好的命名能让代码像自然语言一样易于理解，减少注释需求。

使用有意义的名称

反面示例：

const yyyymmdstr = moment().format('YYYY/MM/DD');

正面示例：

const currentDate = moment().format('YYYY/MM/DD');

保持命名一致性

对同一类型的实体使用统一的命名风格，避免同义词混用。例如对用户数据的获取，应统一使用getUser()而非同时存在getUserInfo()、getClientData()等多种形式。

避免魔法数字

将常量值定义为命名常量，提高代码可读性和可维护性：

反面示例：

// 86400000是什么意思？ setTimeout(blastOff, 86400000);

正面示例：

const MILLISECONDS_PER_DAY = 86400000; setTimeout(blastOff, MILLISECONDS_PER_DAY);

函数设计：单一职责原则

函数应该只做一件事，并且把它做好。遵循单一职责原则不仅使函数更易于理解和测试，还能提高代码的复用性。

限制函数参数数量

理想情况下，函数参数应控制在2个以内。超过3个参数时，建议使用对象形式传递，通过解构语法明确参数含义：

正面示例：

function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: true });

避免副作用

函数应该尽量保持纯函数特性，即相同输入总是产生相同输出，不修改外部状态。当必须有副作用时，应集中管理这些操作。

反面示例：

let name = 'Ryan McDermott'; function splitIntoFirstAndLastName() { name = name.split(' '); }

正面示例：

function splitIntoFirstAndLastName(name) { return name.split(' '); } const name = 'Ryan McDermott'; const newName = splitIntoFirstAndLastName(name);

对象与数据结构：封装与抽象

合理设计对象结构，使用getter/setter封装数据访问，隐藏内部实现细节，同时确保对象具有明确的职责边界。

使用getter和setter

通过getter和setter方法访问对象属性，便于添加验证、日志和数据转换逻辑：

正面示例：

function makeBankAccount() { let balance = 0; function getBalance() { return balance; } function setBalance(amount) { // 可以在这里添加验证逻辑 balance = amount; } return { getBalance, setBalance }; } const account = makeBankAccount(); account.setBalance(100);

优先组合而非继承

当需要代码复用时，优先考虑组合模式而非继承，以减少类之间的耦合：

反面示例：

// 错误：EmployeeTaxData不是Employee的一种类型 class EmployeeTaxData extends Employee { constructor(ssn, salary) { super(); this.ssn = ssn; this.salary = salary; } }

正面示例：

class EmployeeTaxData { constructor(ssn, salary) { this.ssn = ssn; this.salary = salary; } } class Employee { constructor(name, email) { this.name = name; this.email = email; } setTaxData(ssn, salary) { this.taxData = new EmployeeTaxData(ssn, salary); } }

SOLID原则：构建弹性系统

SOLID原则是面向对象设计的基石，遵循这些原则可以创建更健壮、更易于维护的代码。

单一职责原则(SRP)

一个类应该只有一个引起它变化的原因。将不同职责分离到不同的类中：

正面示例：

class UserAuth { constructor(user) { this.user = user; } verifyCredentials() { // ... } } class UserSettings { constructor(user) { this.user = user; this.auth = new UserAuth(user); } changeSettings(settings) { if (this.auth.verifyCredentials()) { // ... } } }

依赖注入原则(DIP)

高层模块不应依赖低层模块，两者都应依赖抽象。通过依赖注入减少模块间的耦合：

正面示例：

class InventoryTracker { constructor(items, requester) { this.items = items; this.requester = requester; } requestItems() { this.items.forEach(item => { this.requester.requestItem(item); }); } } // 可以轻松替换不同的请求实现 const inventoryTracker = new InventoryTracker(['apples', 'bananas'], new InventoryRequesterV2());

错误处理：优雅应对异常

良好的错误处理机制能够提高应用的健壮性和可维护性，确保错误被妥善处理而不是被忽略。

使用Promises和async/await

优先使用Promises和async/await处理异步操作，避免回调地狱，使异步代码更易读：

正面示例：

async function getCleanCodeArticle() { try { const response = await get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin'); await writeFile('article.html', response); console.log('File written'); } catch(err) { console.error(err); notifyUserOfError(err); } }

不要忽略错误

捕获错误后应采取适当措施，如记录日志、通知用户或尝试恢复，而不是简单地console.log或忽略：

反面示例：

try { functionThatMightThrow(); } catch (error) { console.log(error); // 不充分的错误处理 }

正面示例：

try { functionThatMightThrow(); } catch (error) { console.error(error); notifyUserOfError(error); reportErrorToService(error); }

测试：保障代码质量

编写测试是确保代码质量的关键环节。良好的测试覆盖可以在重构和迭代过程中提供安全网，防止回归错误。

一个测试一个概念

每个测试应该只验证一个逻辑概念，使测试更清晰、更易于维护：

正面示例：

describe('MakeMomentJSGreatAgain', () => { it('handles 30-day months', () => { const date = new MakeMomentJSGreatAgain('1/1/2015'); date.addDays(30); assert.equal('1/31/2015', date); }); it('handles leap year', () => { const date = new MakeMomentJSGreatAgain('2/1/2016'); date.addDays(28); assert.equal('02/29/2016', date); }); });

总结：构建高质量JavaScript代码

clean-code-javascript提供的原则和实践不是一成不变的规则，而是帮助开发者做出更好决策的指南。通过遵循这些建议，你可以编写出更清晰、更可维护的JavaScript代码，减少技术债务，提高团队协作效率。

要开始使用这些实践，可以从克隆仓库开始：

git clone https://gitcode.com/gh_mirrors/cle/clean-code-javascript

记住，编写整洁代码是一个持续改进的过程。从小处着手，逐步应用这些原则，你的代码质量将会显著提升。

【免费下载链接】clean-code-javascriptConceitos de Código Limpo adaptados em JavaScript (Tradução PT-BR)项目地址: https://gitcode.com/gh_mirrors/cle/clean-code-javascript