您是否厌倦了盯着一堆连您的猫都不会碰的代码?别再看了。在这篇文章中,我将告诉您 9 条规则,将您的烂尾代码变成艺术品。
所以喝杯咖啡,坐下来负责你的代码!
规则#1 - 让你的代码井井有条且易于阅读
你可以不整理你的衣橱,但一定要整理你的代码。通过使代码井井有条且易于阅读,您可以快速找到所需内容。
检查以下示例:
// Group related functions together
function calculateTotal() {
// code
}
function calculateTax() {
// code
}
function calculateDiscount() {
// code
}
// Use comments to explain the purpose of the code
function calculateTotal() {
// calculate subtotal
let subtotal = 0;
// add items
subtotal += item1.price;
subtotal += item2.price;
// return total
return subtotal;
}
如您所见,稍加计划和适量的注释可以让浏览代码变得轻而易举。
乍一看,即使在编写代码已有一段时间后,您也能很好地了解整体功能。
并不是每一天你都会感谢过去的自己做了一些好事!
规则#2 - 遵循既定的编码约定和标准
我知道成为叛逆者并规划自己的路线很诱人。
但有时,遵循既定的编码惯例和标准是值得的。这包括命名约定、评论指南等内容。
请参阅下面的片段,了解我要说的内容。
// Naming conventions
let userName; // camelCase for variables and properties
const MAX_USERS; // UpperCamelCase for constants
// Commenting guidelines
// This function takes in a number and returns its square
function square(num) {
return num * num;
}
我们的想法是要始终如一地玩游戏。通过遵循您团队的代码约定,您的代码不会像拇指一样突出,您的开发人员也会欣赏您。
规则#3 - 使用描述性变量和函数名称
我知道将变量命名为 X 和 Y 很时髦。
但是请相信我,几个月后,即使是你也无法理解它们的真正含义。
为变量赋予描述性名称总是安全的。从长远来看,它甚至可能对您更好。
// Descriptive function name
function calculateSum(numbers) {
// Descriptive variable name
let sum = 0;
// Iterate through the array of numbers
for (let i = 0; i < numbers.length; i++) {
// Add each number to the sum
sum += numbers[i];
}
// Return the sum
return sum;
}
如您所见,即使函数的代码有一个循环,函数和变量名也使程序的目标一目了然。
规则#4 - 避免硬编码值并使用常量
向硬编码说再见,向常量问好!
通过使用常量,您将能够存储您知道在整个程序中不会改变的值。这将帮助您避免在整个代码中搜索和替换值的麻烦。
查看下面的代码。
const TAX_RATE = 0.07;
function calculateTotal(subtotal) {
return subtotal + (subtotal * TAX_RATE);
}
如果未来税率发生变化,您可以轻松地在一个地方更新该值,并将其反映在整个代码中。
规则#5 - 保持函数小而集中
当您开始作为一名开发人员时,总是很想将您的功能变成瑞士刀。解释您的代码可以做这么多事情的感觉是如此诱人。
当您成为经验丰富的开发人员时,这种习惯就会消失。但有时它不会。
相信我。保持你的功能小,你的生活就会快乐。
如果您编写易于理解的小而集中的函数,那么如果出现问题,您很可能不会在海滩度假时受到打扰。
请参阅此示例。
function calculateTotal(subtotal, tax, discount) {
const total = subtotal + tax - discount;
return total;
}
上面的函数简短而切题。这使得它易于理解和维护。
规则#6 - 使用合适的数据结构
您是否总是试图在圆孔中安装方钉?如果是,是时候使用适当的数据结构了。
就像木匠针对不同的任务拥有多种工具一样,开发人员应该针对不同类型的功能拥有多种数据结构。
这是一个备忘单:
- 当您需要存储具有特定顺序的项目集合时,请使用数组。
- 当您需要存储可以动态更改的项目集合时,请使用列表。
- 最后,如果您需要存储可以通过键访问的项目集合,请使用映射。
查看下面的代码,演示了不同数据结构的使用。
// Using an array to store a collection of items that have a specific order
const shoppingList = ["milk", "bread", "eggs"];
console.log(shoppingList[1]); // Output: "bread"
// Using a list to store a collection of items that can change dynamically
const todoList = ["write code", "debug", "test"];
todoList.push("deploy");
console.log(todoList); // Output: ["write code", "debug", "test", "deploy"]
// Using a dictionary to store a collection of items that can be accessed by a key
const phonebook = {
"John": "555-555-5555",
"Mary": "555-555-5556",
"Bob": "555-555-5557"
};
console.log(phonebook["Mary"]); // Output: "555-555-5556"
通过根据需求使用合适的数据结构,您会发现您的代码不仅高效而且易于理解。
规则#7 - 使用版本控制
就像你的应用程序如果只在你的机器上运行就没有用一样,如果你的代码没有提交到中央存储库,它也没有用。
每个开发人员都应该习惯版本控制。不要忘记定期提交代码。如果您正在这样做,请确保您团队中的其他人也这样做。
只需要几个命令:
// Initialize a new Git repository
$ git init
// Add all files to the repository
$ git add .
// Commit the changes with a message
$ git commit -m "Initial commit"
一个好的版本控制工具允许开发人员跟踪更改、与他人协作并在出现任何问题时轻松恢复到以前的版本。
规则# 8 - 自动化重复性任务
不要像轮子上的仓鼠一样,不停地原地打转,一遍又一遍地做着同样无聊的工作。
您应该使用工具和脚本来自动执行代码中的重复性任务。这不仅可以节省时间,还可以使您的代码更加可靠和高效。
查看此简单测试自动化脚本的代码示例。
const testCases = [
{ input: [1, 2], expectedOutput: 3 },
{ input: [2, 3], expectedOutput: 5 },
{ input: [3, 4], expectedOutput: 7 },
];
testCases.forEach(testCase => {
const output = addNumbers(testCase.input[0], testCase.input[1]);
if (output !== testCase.expectedOutput) {
console.error(`Test failed: expected ${testCase.expectedOutput} but got ${output}`);
} else {
console.log("Test passed");
}
});
您还可以自动化编译代码和创建最终包的构建过程。
请参阅下面的示例,其中我们使用 Gulp 等工具自动化构建过程。
// Automating a build process using a tool like Grunt or Gulp
const gulp = require('gulp');
gulp.task('build', function() {
// Build process logic
});
gulp.task('default', ['build']);
规则#9 - 保持你的代码是最新的
不要成为恐龙。你只会灭绝。
让您的代码保持最新。尽可能更新您的应用程序依赖项。
例如,如果您在 Node 生态系统中工作,请使 NPM 保持最新并升级您的开发环境。
// Keep dependencies up-to-date using package manager
$ npm update
// Keep the development environment up-to-date
$ nvm install 12.16.3
就是这样!
那么,你有它。9 条规则可帮助您编写干净高效的代码。
当然,这些并不是唯一重要的事情。但是通过遵循它们,您将能够开始编写不仅运行良好而且看起来令人愉悦的代码,让其他人阅读、理解和维护。
为帮助到一部分同学不走弯路,真正达到一线互联网大厂前端项目研发要求,首次实力宠粉,打造了《30天挑战学习计划》,内容如下:
HTML/HTML5,CSS/CSS3,JavaScript,真实企业项目开发,云服务器部署上线,从入门到精通
- PC端项目开发(1个)
- 移动WebApp开发(2个)
- 多端响应式开发(1个)
共4大完整的项目开发 !一行一行代码带领实践开发,实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态,省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理,Markdown 记录学习笔记,包括真实大厂项目的开发标准和设计规范,命名规范,项目代码规范,SEO优化规范
从蓝湖UI设计稿 到 PC端,移动端,多端响应式开发项目开发
- 真机调试,云服务部署上线;
- Linux环境下 的 Nginx 部署,Nginx 性能优化;
- Gzip 压缩,HTTPS 加密协议,域名服务器备案,解析;
- 企业项目域名跳转的终极解决方案,多网站、多系统部署;
- 使用 使用 Git 在线项目部署;
这些内容在《30天挑战学习计划》中每一个细节都有讲到,包含视频+图文教程+项目资料素材等。只为实力宠粉,真正一次掌握企业项目开发必备技能,不走弯路 !
过程中【不涉及】任何费用和利益,非诚勿扰 。
如果你没有添加助理老师微信,可以添加下方微信,说明要参加30天挑战学习计划,来自今日头条!老师会邀请你进入学习,并给你发放相关资料。
30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程
标签:function,const,555,代码,干净,规则,编写,subtotal From: https://www.cnblogs.com/icodingedu/p/17087515.html