如何编写干净、可维护的 JavaScript 代码
zhezhongyun 2024-12-22 21:56 33 浏览
编写干净且可维护的 JavaScript 代码是一项关键技能,它能在您的项目随着时间的发展而扩展时产生巨大的影响。干净的代码更易于阅读、调试和扩展。在更新或修复 bug 时,它为您(和您的团队)节省了时间,并减少了可能拖慢项目的技术债务。
在本文中,我们将介绍编写不仅功能齐全,而且干净且可维护的 JavaScript 的基本技巧和最佳实践。此外,我们还将包括一些代码示例来说明这些概念的实际应用。准备好提升您的代码质量了吗?
1. 使用有意义的变量和函数名称 ?
使代码可读且可维护的最简单方法之一是为变量和函数使用有意义的描述性名称。选择描述变量表示的内容或函数所执行的操作的名称,而不是使用晦涩的缩写或通用术语。
示例:不良与良好的变量名称
// 不良命名
let x = 100;
let fn = () => {};
// 良好命名
let maxUsers = 100;
let displayUserProfile = () => {};
重要性:
- 清晰度:其他开发人员(或未来的你)无需额外的注释或上下文即可理解变量或函数的用途。
- 自文档化代码:命名良好的变量和函数减少了注释的需要,因为名称本身已传达意图。
2. 保持函数小而专注
每个函数都应该有单一的责任并做好一件事情。大型多用途函数难以阅读、测试和维护。相反,将复杂任务分解为更小的模块化函数。
示例:拆分复杂函数
// 过于复杂,做了太多
function handleUserRegistration(data) {
validateData(data);
createUserInDatabase(data);
sendWelcomeEmail(data);
}
?
// 更清晰且更专注
function validateData(data) {
// 验证逻辑
}
?
function createUserInDatabase(data) {
// 数据库逻辑
}
?
function sendWelcomeEmail(data) {
// 发送邮件逻辑
}
?
function handleUserRegistration(data) {
validateData(data);
createUserInDatabase(data);
sendWelcomeEmail(data);
}
重要性:
- 可重用性:小而专注的函数可以在应用程序的不同部分重用。
- 可测试性:只做一件事情的函数更易于测试。
- 可读性:具有明确职责的小函数更易于理解和维护。
3. 避免全局变量
全局变量可能导致不可预测的行为和难以调试的问题,因为它们可能被意外覆盖或修改。相反,使用let和const的块作用域,或者将变量封装在函数、类或模块中。
示例:全局变量与作用域变量
// 不良:全局变量
var userCount = 10;
?
function incrementUserCount() {
userCount += 1; // 任何函数都可以修改 userCount
}
?
// 良好:作用域变量
function incrementUserCount() {
let userCount = 10;
return ++userCount;
}
重要性:
- 封装性:保持变量的作用域可以避免来自代码库不同部分的意外副作用。
- 可预测性:作用域变量使代码更可预测,更易于调试。
4. 使用 const 和 let 而不是 var
当您不期望变量改变时,请始终使用const声明变量,对于将被重新赋值的变量使用let。避免使用var,因为它是函数作用域的,可能导致提升问题,这会使调试更加困难。
示例:Const 与 Let 与 Var
// 不良:使用 var(提升问题,不可预测的作用域)
var total = 100;
if (true) {
var total = 200; // 更改块外的值
}
console.log(total); // 200
?
// 良好:使用 const 和 let(块作用域)
let total = 100;
if (true) {
let total = 200; // 块作用域,不影响外部变量
}
console.log(total); // 100
重要性:
- 块作用域可以防止变量提升带来的意外行为。
- const确保变量无法重新赋值,使代码更可预测。
5. 保持代码 DRY(不要重复自己) ??
重复会导致错误,使代码更难维护。相反,遵循DRY 原则——通过将重复的逻辑抽象为函数、类或模块来避免代码重复。
示例:重复代码与 DRY 代码
// 重复代码
function greetUser(user) {
return `Hello, ${user.firstName} ${user.lastName}`;
}
?
function greetAdmin(admin) {
return `Hello, ${admin.firstName} ${admin.lastName}`;
}
?
// DRY 代码
function greetPerson(person) {
return `Hello, ${person.firstName} ${person.lastName}`;
}
重要性:
- 减少冗余:当您需要更新代码时,减少了修改的地方。
- 更易于维护:减少重复使代码库更易于理解和修改。
6. 优雅地处理错误,使用 try/catch
不要让代码静默失败或意外崩溃,使用错误处理来管理意外问题。try/catch块允许您捕获错误并采取适当的措施,例如记录错误或提供后备功能。
示例:使用 Try/Catch 进行错误处理
function fetchData(url) {
try {
let response = fetch(url);
// 处理响应
} catch (error) {
console.error('获取数据时出错:', error);
// 处理错误,例如显示备用 UI
}
}
重要性:
- 防止崩溃:捕获错误使您的应用程序能够优雅地失败并恢复。
- 更好的调试:错误消息提供有关出错位置和原因的洞察。
7. 使用 Promises 和 async/await 处理异步代码 ?
不要使用回调地狱,而是使用Promises或更新的 async/await 语法以更干净、更易读的方式处理异步代码。
示例:回调地狱与 Promises/Async
// 回调地狱
getData(url, function(response) {
processData(response, function(data) {
saveData(data, function(result) {
console.log('数据已保存:', result);
});
});
});
?
// Promises
getData(url)
.then(processData)
.then(saveData)
.then(result => console.log('数据已保存:', result))
.catch(error => console.error(error));
?
// Async/Await
async function handleData(url) {
try {
const response = await getData(url);
const data = await processData(response);
const result = await saveData(data);
console.log('数据已保存:', result);
} catch (error) {
console.error(error);
}
}
重要性:
- 更清晰的语法:async/await 消除了深层嵌套的回调,使异步代码更易读。
- 错误处理:Promises 和 async/await 使处理多个异步操作中的错误变得更加容易。
8. 编写模块化、可重用的代码
将代码组织成模块或组件,可以在应用程序的不同部分重用。使用ES6 模块在不同文件中导出和导入函数、对象或类,从而改善组织和可维护性。
示例:使用 ES6 模块的模块化代码
// 在 mathUtils.js 中
export function add(a, b) {
return a + b;
}
?
export function subtract(a, b) {
return a - b;
}
?
// 在另一个文件中
import { add, subtract } from './mathUtils.js';
?
console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3
重要性:
- 可扩展性:模块化代码使得扩展和维护大型代码库更容易。
- 可重用性:模块可以在应用程序的不同部分重用,减少重复。
9. 为代码写文档(但保持简洁)
虽然编写文档是好的做法,但请避免写冗长的文档。用简明的文档描述代码的目的、参数和返回值,以帮助其他开发人员快速理解。
示例:简明的文档
/**
* 返回两个数字的和。
*
* @param {number} a - 第一个数字。
* @param {number} b - 第二个数字。
* @returns {number} - 两个数字的和。
*/
function add(a, b) {
return a + b;
}
重要性:
- 易于理解:简明文档帮助其他开发人员理解代码。
- 保持代码整洁:避免过度文档化,使代码保持清晰。
10. 进行代码审查和重构
最后,定期进行代码审查和重构以确保代码库保持干净。代码审查可以帮助您识别和纠正问题,而重构可以清理并优化代码。
重要性:
- 团队协作:通过审查代码,您可以从同事那里获得反馈并学习最佳实践。
- 持续改进:重构保持代码现代化,适应不断变化的需求。
结论
编写干净且可维护的 JavaScript 代码并不是一项可以一蹴而就的任务,而是一种实践和不断学习的过程。通过遵循这些最佳实践,您可以创建更易于阅读和维护的代码,减少错误,增强代码的可扩展性。无论您是初学者还是经验丰富的开发人员,这些原则都有助于提高代码质量和团队的整体效率。
记住,干净的代码是良好软件工程的基石,也是长期成功的关键。继续努力,让您的代码更加优雅和可维护!
相关推荐
- JPA实体类注解,看这篇就全会了
-
基本注解@Entity标注于实体类声明语句之前,指出该Java类为实体类,将映射到指定的数据库表。name(可选):实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...
- Dify教程02 - Dify+Deepseek零代码赋能,普通人也能开发AI应用
-
开始今天的教程之前,先解决昨天遇到的一个问题,docker安装Dify的时候有个报错,进入Dify面板的时候会出现“InternalServerError”的提示,log日志报错:S3_USE_A...
- 用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码
-
在人体姿态估计领域,传统方法通常将关键点作为基本处理单元,这些关键点在人体骨架结构上代表关节位置(如肘部、膝盖和头部)的空间坐标。现有模型对这些关键点的预测主要采用两种范式:直接通过坐标回归或间接通过...
- B 客户端流RPC (clientstream Client Stream)
-
客户端编写一系列消息并将其发送到服务器,同样使用提供的流。一旦客户端写完消息,它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中,客户端会发送多个请...
- 我的模型我做主02——训练自己的大模型:简易入门指南
-
模型训练往往需要较高的配置,为了满足友友们的好奇心,这里我们不要内存,不要gpu,用最简单的方式,让大家感受一下什么是模型训练。基于你的硬件配置,我们可以设计一个完全在CPU上运行的简易模型训练方案。...
- 开源项目MessageNest打造个性化消息推送平台多种通知方式
-
今天介绍一个开源项目,MessageNest-可以打造个性化消息推送平台,整合邮件、钉钉、企业微信等多种通知方式。定制你的消息,让通知方式更灵活多样。开源地址:https://github.c...
- 使用投机规则API加快页面加载速度
-
当今的网络用户要求快速导航,从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口(SpeculationRulesAPI)的出现改变了网络应用程序接口(WebAPI)领域的游戏规则。...
- JSONP安全攻防技术
-
关于JSONPJSONP全称是JSONwithPadding,是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签,远程调用JSON文件来实现数据传递。如果...
- 大数据Doris(六):编译 Doris遇到的问题
-
编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...
- 网页内嵌PDF获取的办法
-
最近女王大人为了通过某认证考试,交了2000RMB,官方居然没有给线下教材资料,直接给的是在线教材,教材是PDF的但是是内嵌在网页内,可惜却没有给具体的PDF地址,无法下载,看到女王大人一点点的截图保...
- 印度女孩被邻居家客人性骚扰,父亲上门警告,反被围殴致死
-
微信的规则进行了调整希望大家看完故事多点“在看”,喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人,应该...
- 下周重要财经数据日程一览 (1229-0103)
-
下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是,下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机(安卓,iPhone)同步日历功能的朋友请点击此链接,数据公布...
- PyTorch 深度学习实战(38):注意力机制全面解析
-
在上一篇文章中,我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程,从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...
- 聊聊Spring AI的EmbeddingModel
-
序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...
- 前端分享-少年了解过iframe么
-
iframe就像是HTML的「内嵌画布」,允许在页面中加载独立网页,如同在画布上叠加另一幅动态画卷。核心特性包括:独立上下文:每个iframe都拥有独立的DOM/CSS/JS环境(类似浏...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML中如何键入空格 (27)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)