最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

当前热讯：编写干净代码的 9 条必须知道的规则

来源：博客园

您是否厌倦了盯着一堆连您的猫都不会碰的代码？别再看了。在这篇文章中，我将告诉您 9 条规则，将您的烂尾代码变成艺术品。

所以喝杯咖啡，坐下来负责你的代码！


(资料图片)

规则#1 - 让你的代码井井有条且易于阅读

你可以不整理你的衣橱，但一定要整理你的代码。通过使代码井井有条且易于阅读，您可以快速找到所需内容。

检查以下示例：

// Group related functions togetherfunction calculateTotal() { // code}function calculateTax() { // code}function calculateDiscount() { // code}// Use comments to explain the purpose of the codefunction calculateTotal() { // calculate subtotal let subtotal = 0; // add items subtotal += item1.price; subtotal += item2.price; // return total return subtotal;}

如您所见，稍加计划和适量的注释可以让浏览代码变得轻而易举。

乍一看，即使在编写代码已有一段时间后，您也能很好地了解整体功能。

并不是每一天你都会感谢过去的自己做了一些好事！

规则#2 - 遵循既定的编码约定和标准

我知道成为叛逆者并规划自己的路线很诱人。

但有时，遵循既定的编码惯例和标准是值得的。这包括命名约定、评论指南等内容。

请参阅下面的片段，了解我要说的内容。

// Naming conventionslet userName; // camelCase for variables and propertiesconst MAX_USERS; // UpperCamelCase for constants// Commenting guidelines// This function takes in a number and returns its squarefunction square(num) { return num * num;}

我们的想法是要始终如一地玩游戏。通过遵循您团队的代码约定，您的代码不会像拇指一样突出，您的开发人员也会欣赏您。

规则#3 - 使用描述性变量和函数名称

我知道将变量命名为 X 和 Y 很时髦。

但是请相信我，几个月后，即使是你也无法理解它们的真正含义。

为变量赋予描述性名称总是安全的。从长远来看，它甚至可能对您更好。

// Descriptive function namefunction 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 orderconst shoppingList = ["milk", "bread", "eggs"];console.log(shoppingList[1]); // Output: "bread"// Using a list to store a collection of items that can change dynamicallyconst 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 keyconst 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 Gulpconst 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老师的博客-艾编程

关键词： 开发人员 数据结构 学习计划