Skip to main content

moregeek program

提升你的技能:编写干净高效的 javascript 的 7 个技巧-多极客编程

编写干净的代码对每个开发人员来说都是必不可少的,因为它使代码易于阅读、理解和维护。 干净的代码使团队中每个人的生活更轻松,您的代码更不容易出错,并且更容易添加新功能。 在本教程中,我将介绍 7 个技巧,以便您可以立即编写更具可读性的代码。




使用正确的缩进

使用适当的缩进不仅使代码更易于阅读,还有助于阐明代码的结构。 在整个代码中使用一致的缩进以提高可读性并使其更易于理解。

坏风格

function getTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}

好风格

function getTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}

使用描述性和有意义的变量名

当您决定添加新变量时,请帮自己一个忙,多花几秒钟,尤其是当它们不仅仅是循环计数器或类似的东西时。

使用描述性的和有意义的变量名可以大大提高代码的可读性。 另外,避免使用不必要的缩写,因为您肯定会在提供智能的 IDE 中编写代码,这样您就不需要每次都输入整个变量名。

坏风格

let a = 'John';
let b = 'Doe';
let c = a + b;
console.log(c);

好风格

let firstName = 'John';
let lastName = 'Doe';
let fullName = firstName + lastName;
console.log(fullName);

使用注释

使用注释并大量使用它们。 注释是您在代码中与未来的自己交谈的唯一方式,因此请善待自己并解释所有值得注释的内容。 有时,它只是一个需要说明的常量,有时它是一个完整的函数。

只要确保您在教授编程时不发表评论即可。 每个开发人员都应该知道语法,注释的作用是阐明代码的逻辑。

坏风格

function movingAverage(arr, windowSize) {
let movingAverages = [];
for (let i = 0; i < arr.length; i++) {
let start = i - Math.floor(windowSize / 2);
let end = i + Math.ceil(windowSize / 2);
if (start < 0) {
start = 0;
}
if (end > arr.length) {
end = arr.length;
}
let sum = 0;
for (let j = start; j < end; j++) {
sum += arr[j];
}
let avg = sum / windowSize;
movingAverages.push(avg);
}
return movingAverages;
}

好风格

function movingAverage(arr, windowSize) {
// 初始化一个数组来保存移动平均线
let movingAverages = [];

// 循环遍历数字数组
for (let i = 0; i < arr.length; i++) {
// 计算当前窗口的开始和结束索引
let start = i - Math.floor(windowSize / 2);
let end = i + Math.ceil(windowSize / 2);
// 确保起始索引不为负
if (start < 0) {
start = 0;
}
// 确保结束索引不超过数组的末尾
if (end > arr.length) {
end = arr.length;
}
// 计算当前窗口数字的总和
let sum = 0;
for (let j = start; j < end; j++) {
sum += arr[j];
}
// 计算当前窗口数字的平均值
let avg = sum / windowSize;
// 将平均值添加到移动平均线数组
movingAverages.push(avg);
}
// 返回移动平均线数组
return movingAverages;
}

避免深度嵌套

阅读和理解深层嵌套的代码确实很困难,因此请尽量通过将代码分成更小、更易于管理的块来避免这种情况,或者使用更好的方法来实现相同的逻辑。

坏风格

function getTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
if (items[i].category === 'clothing') {
if (items[i].color === 'red') {
total += items[i].price;
}
}
}
return total;
}

好风格

function getTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
if (items[i].category === 'clothing' && items[i].color === 'red') {
total += items[i].price;
}
}
return total;
}

限制函数参数

限制传递给函数的参数数量。 这个技巧不是关于不将函数需要的参数传递给它们,而是关于如何定义和组织它们。

坏风格

function calculateTotal(items, taxRate, discountAmount, shippingCost, freeShippingThreshold) {
// Do something with the parameters
}

好风格

function calculateTotal(items, {taxRate, discountAmount, shippingCost, freeShippingThreshold}) {
// Do something with the parameters
}

使用较小的函数

这篇文章更多的是关于编写干净的代码,我想避免将它与 SOLID 原则等概念混在一起,所以请从可读性的角度来看这篇文章。

不要将所有内容都放在一个函数中,而是尝试将其分解成更容易理解和调试的更小的部分。

坏风格

function processData(data) {
let results = [];
for (let i = 0; i < data.length; i++) {
if (data[i].type === 'A') {
results.push(processTypeA(data[i]));
} else if (data[i].type === 'B') {
results.push(processTypeB(data[i]));
} else if (data[i].type === 'C') {
results.push(processTypeC(data[i]));
}
}
return results;
}

function processTypeA(item) {
// Do something with item of type A
}

function processTypeB(item) {
// Do something with item of type B
}

function processTypeC(item) {
// Do something with item of type C
}

好风格

function processData(data) {
let results = [];
for (let i = 0; i < data.length; i++) {
results.push(processItem(data[i]));
}
return results;
}

function processItem(item) {
if (item.type === 'A') {
// Do something with item of type A
} else if (item.type === 'B') {
// Do something with item of type B
} else if (item.type === 'C') {
// Do something with item of type C
}
}

使用较短的行和空行

将您的代码分成较短的行并使用空行来分隔逻辑块,可以使您的代码更易于阅读和理解。 尤其是有时您可能会想使用在博客上找到的一些很酷的技巧来在一行中执行某些操作,但通常它们只会降低您的代码的可读性。

坏风格

function add(a, b) { return a + b; }
let [taxRate, discountAmount, shippingCost, freeShippingThreshold] = [99, 0, 0, 0;

好风格

function add(a, b) {
return a + b;
}

let taxRate = 99;
let discountAmount = 0;
let shippingCost = 0;
let freeShippingThreshold = 0;

©著作权归作者所有:来自51CTO博客作者akluse的原创作品,请联系作者获取转载授权,否则将追究法律责任

基于vue+element table封装(纯前端解决方案,附源码)-多极客编程

(文章目录) 前言 这个项目是拿来练手的项目,基于VUE+Element UI,并没有做后端,所以用的是纯前端的解决方案(有更好的办法欢迎提出),主要实现的是对列表数据的查询,筛选,修改这些常用功能。 实现效果 筛选 查询 修改 增加 代码实现 HTML <!-- 用户管理 --> <template> <div cl

可以一学的代码优化小技巧:减少if-else冗余-多极客编程

摘要:if-else 语句对于程序员来说,是非常非常熟悉的一个判断语句,我们在日常开发和学习中都经常看见它。本文分享自华为云社区《​​JavaScript代码之美—代码优化,减少if-else冗余的技巧​​》,作者:黛琳ghz。前言if-else 语句对于程序员来说,是非常非常熟悉的一个判断语句,我们在日常开发和学习中都经常看见它,if-else语句主要用于需要做出选择的地方进行判断,这里就不再赘

基于vue+element ui的文件上传(可拖拽上传)-多极客编程

(文章目录) 实现效果 一、先创建一个Dialog对话框进行存放 <template> <!-- 导入遮罩层 --> <el-dialog :title="$t('to_lead')" :visible.sync="BatchAdd" custom-class="BatcchAdd" width="

git配置免密登录及常用操作的详细教程(基于gitee平台)-多极客编程

(文章目录) 前言 我这里使用的是vuecli创建的项目进行代码管理,使用的平台是Gitee。 平台的话其实最推荐使用的平台还是GitHub(但是因为国内连接不稳定的原因放弃使用),因为GitHub有个功能可以直接将你的项目在仓库中跑起来,这个是别的平台都没有的,希望以后我们的平台也可以做到这种程度。 一、SSH免密登录配置 SSH key 的作用:实现本地仓库和 Github 之间免登录的

diffie-hellman密钥协商算法探究-多极客编程

作者 | 魔王赵二狗导读隐私计算(Privacy-preserving computation)是指在保证数据提供方不泄露原始数据的前提下,对数据进行分析计算的一系列信息技术,保障数据在流通与融合过程中的可用不可见。而Diffie–Hellman密钥协商是一种安全协议。它可以让双方在完全没有对方任何预先信息的条件下通过不安全信道创建起一个密钥。这个密钥可以在后续的通讯中作为对称秘钥讯内容。全文60

2023兔年大吉html,兔兔动态代码「兔了个兔」-多极客编程

一.2023兔年大吉HTML,兔兔动态代码「兔了个兔」 1.1 资源获取和效果预览 1.效果预览: 2.如何打开:(电脑端,解压后双击index.html打开!) 二.代码讲解(主要代码) 需要完整源码请到文章开头处下载: 观察下面的构成图,主要分为俩个部分: 1.背景加圆圈圈。 2.兔兔和提示字。 1.1 背景加圆圈圈 这里我为了代码的简便性,直接使用了section标签。 section

前端三个实用小妙招分享给大家-多极客编程

前言整理下本人在工作中撸代码遇到的一些刚看时一脸懵,实则很简单就能解决的小妙招,希望对大家有所帮助~伪元素动态改变其样式我们都用过伪元素,什么::before,::after啊这些等等,但是他们都不会直接在代码里html中生成标签,那么有时我们不行再加dom元素了,明明就用改dom元素的伪元素更简单,如下图:那个蓝色的进度条就是用动态改变伪元素样式的方式来实现的,那么接下来来看下具体实现方案吧!在

uni-app 提交 app应用 到 google play 提示 api 级别过低的解决办法-多极客编程

原文链接: Uni-App 提交 App应用 到 Google Play 提示 API 级别过低的解决办法 发现问题 近日准备发布新版本上架到 Google Play 上时,突然出现了 Change your app's target API level to at least 31 的提示。 <br> 在查阅相关资料后,得知 新应用必须以 Android 12(API 级别 3

基于vue+element table封装(纯前端解决方案,附源码)-多极客编程

(文章目录) 前言 这个项目是拿来练手的项目,基于VUE+Element UI,并没有做后端,所以用的是纯前端的解决方案(有更好的办法欢迎提出),主要实现的是对列表数据的查询,筛选,修改这些常用功能。 实现效果 筛选 查询 修改 增加 代码实现 HTML <!-- 用户管理 --> <template> <div cl

那些炫酷的css文字效果之诗词《兔》-多极客编程

不知不觉已经迈入2023年,今年是兔年,想到兔子就会联想到玉兔,中秋,胡萝卜,兔子不吃窝边草,这就越扯越远了,今天的主题是用纯CSS来实现各种不错的文字效果,文字则摘录古诗词中有关《兔》相关的诗词,让我们一边欣赏古诗词的同时一边走进CSS的世界。 效果一 兔苑词才去不还,兰亭水石空明月。 —— 陈陶 《 将进酒 》 文字从清晰到模糊到彻底看不见,给人一种若隐若现的朦胧美,其核心代码就是在an

git配置免密登录及常用操作的详细教程(基于gitee平台)-多极客编程

(文章目录) 前言 我这里使用的是vuecli创建的项目进行代码管理,使用的平台是Gitee。 平台的话其实最推荐使用的平台还是GitHub(但是因为国内连接不稳定的原因放弃使用),因为GitHub有个功能可以直接将你的项目在仓库中跑起来,这个是别的平台都没有的,希望以后我们的平台也可以做到这种程度。 一、SSH免密登录配置 SSH key 的作用:实现本地仓库和 Github 之间免登录的

vue利用flex布局实现tv端城市列表-多极客编程

前言vue中城市列表和搜索很常见,这篇文章就来说说怎么实现搜索和城市列表1.实现搜索布局代码:<div class="search-bar"> <input class="search-input" v-model="citySearchResult" :placeholder="searchDefault" :key="searchTitle" @endEdi