JavaScript 代码整洁之道

news2024/11/25 4:45:01

文章目录

  • 概述篇
  • 变量篇
  • 函数篇
  • 注释篇
  • 异常处理篇
  • 复杂判断
  • 函数篇
  • 重构篇

参考资料

概述篇

  • 书写能让人读懂的代码
  • 使用英语编写代码
  • 团队协作

制定通用的规则,依靠工具让团队的代码风格保持统一,要让代码看起来是由一个人编写的,消除个人的代码风格。常用工具Prettier。

变量篇

  • 变量要名副其实
    不要使用x、y那种无意义变量。简单易懂的名字让我们很轻易的知道发生了什么。

  • 变量名可以读出来
    请不要让我思考那些不是业务逻辑重点的事情!

  • 不要在名称中使用变量的类型
    毫无意义!变量类型的前缀是噪音!

  • 对同一类型的变量使用相同的词汇表
    同一个概念,三种不同的定义。必须自始至终使用统一的命名,不管是user、customer、client,只能用同一个。

  • 不要添加不需要的上下文
    在变量名称中没有必要添加类或包的相关上下文。

const Car = {
  carMake: 'Honda',
  carModel: 'Accord',
  carColor: 'Blue',
};

function paintCar(car) {
  car.carColor = 'Red';
}

const Car = {
  make: 'Honda',
  model: 'Accord',
  color: 'Blue',
};

function paint(car) {
  car.color = 'Red';
}
  • 不要使用魔法数字和字符串
    在编写代码中,不应该在源代码中直接使用数字或文本字符串,这些通常也被称为魔法数字。
    魔法数字或字符串必须存储在常量中,通过对长的名称来表达出他的用途。
// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);
user.rol = 'Administrator';


const MILLISECONDS_IN_A_DAY = 86400000;
const ADMINISTRATOR_ROL = 'Administrator';

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
user.rol = ADMINISTRATOR_ROL;

函数篇

注释篇

  • 只注释业务逻辑复杂的内容
    优秀的代码本身就是注释,通常都能所见即明白。因此,添加注释可以有,但通常不是必需的。
    程序中存在一个特定的业务逻辑,我们作为开发人员不知道该逻辑。需要对业务逻辑加上注释。

  • 避免日志型注释
    以日期为维度的日志型注释是不必要的。这些日志工作应该交给版本控制工具,如 git,通过git log来获取历史记录。

  • 避免使用注释去标记位置
    应该避免使用注释进行位置标记,因为这种做法通常只会让代码更冗余。

异常处理篇

  • 使用异常而非返回码
    隔离业务逻辑和错误处理,他们是两个不同的问题,必须要去分开处理和对待。处理程序异常的责任交给变成语言去处理。例如try catch。

  • 不要忽视异常处理
    ==请不要做鸵鸟。==对捕获的错误不做任何处理是没有意义的。

  • 不要忽视Promise reject

  • 定义异常层次结构

  • 提供异常的上下文

复杂判断

  • 不要使用标记flag作为函数参数
    必须创建两个函数来实现各自对应的逻辑功能,而不是使用一个函数来实现两个逻辑功能,因为他们是不同的功能。

  • 封装判断条件

if (platform.state === 'fetching' && isEmpty(cart)) {
    // ...
}  
function showLoading(platform, cart) {
    return platform.state === 'fetching' && isEmpty(cart);
}

if (showLoading(platform, cart)) {
    // ...
}
  • 卫语句Guard Clauses替换嵌套的条件语句
    这个建议在程序员的开发中是至关重要的,在开发中不应该有嵌套的条件语句存在。
    卫语句是我们避免嵌套条件的主要技术之一,不需要else关键字就可以完美实现。

  • 空对象Null Object模式
    在初级程序员的代码中可以看到的另一个常见错误,不断检查对象是否为 null,并根据该检查判断是否显示默认操作。这种模式称为空对象模式。

  • 使用多态删除条件
    绝大多数程序员认为switch控制语句比if语句更简洁,虽然两种不同,但是使用了switch,其实也会提高代码的复杂性,最终会让我们思考太多。
    我们可以通过类的继承,为每个特定类型创建一个类,利用多态来避免使用条件判断。

  • 使用策略模式/命令模式移除条件

函数篇

  • 使用默认参数去代替短路操作或条件赋值
function setName(name) {
    const newName = name || 'Juan Palomo';
}
function setName(name  = 'Juan Palomo') {
    // ...
}
  • 函数参数(理想情况下不多于2个)
    当一个函数有很多参数时,可以把这些参数组合在一起构成一个对象
const burger = {
    name: 'Chicken',
    price: 1.25,
    ingredients: ['chicken'],
    vegan: false,
};
newBurger(burger);
  • 避免副作用-全局变量
    避免副作用的最简单方法是将此函数作用范围内的变量都作为参数进行传递。

  • 避免副作用-可变对象
    另一个非常重要的副作用就是直接修改对象本身,如果你一直从事计算机相关的工作,你会知道 JavaScript 自诞生以来就是支持对象可变的,目前许多库都在尽量避免使用可变对象。

  • 函数应该只做一件事

  • 函数应该只是有一个抽象级别

  • 优先考虑函数式编程而不是命令式编程

  • 函数链式调用

重构篇

重构:重构不是银弹,但它是一种有价值的武器,可以帮助你控制好代码和项目 (软件/应用)。
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/429701.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

这么好看的客服组件,还是觉得接入ChatGPT,把它放在博客中那就完美了

我们在使用ChatGPT时,它的返回方式是采用流式回复。感觉这个效果不错。之前做的全都是的等全部结果请求完成,再一次性返回给用户。今天就通过流式回复的效果重写之前的程序。 前端 前端采用一个网页版的客服组件,整体的效果如下:…

小白学Pytorch系列- -torch.distributions API Transforms (2)

小白学Pytorch系列- -torch.distributions API Transforms (2) AbsTransform AffineTransform 通过逐点仿射映射进行转换yloc⁡scale xy\operatorname{loc}\text { scale } \times xyloc scale x loc (Tensor or float) : 位置参数scale (Tensor or float) : 尺度参数event…

k8s Deployment

一个Deployment控制器会创建一个新的ReplicaSet控制器,通过ReplicaSet创建pod rs v1控制三个pod,删除一个pod,在rs v2上重新建立一个,依次类推,直到全部都是由rs v2控制,如果rs v2有问题,还可以…

Spark on Yarn(client和cluster模式,spark-shell 和 spark-submit 的区别,WorldCount实现与理解)

文章目录Spark on Yarn两种模式clientclusterspark-shell 和 spark-submit 的区别的理解spark-shellspark-submitWorldCount实现IDEA本地实现On Yarn 实现WorldCount图解Spark on Yarn spark on yarn 的两种模式是指 spark 应用程序的 driver 进程(负责控制和协调整…

JAVA8的Optional类,还用 != null 判空?

在文章的开头,先说下NPE问题,NPE问题就是,我们在开发中经常碰到的NullPointerException.假设我们有两个类,他们的UML类图如下图所示 在这种情况下,有如下代码 user.getAddress().getProvince(); 这种写法,在…

springboot整合mybatis(idea)

从idea新建项目 选择spring启动* help、mvnw 文件可以删除 springBoot3.0需要的最小JDK是JDK17,当低于17的时候会报错。 改成2.7.6 新建控制层Controller、Mapper层和Model文件夹 必须在springBoot启动项下面新建,不然无法识别。 允许XML进入target…

Java - 泛型

一、什么是泛型? 一般的类和方法,只能使用具体的类型: 要么是基本类型,要么是自定义的类。如果要编写可以应用于多种类型的 代码,这种刻板的限制对代码的束缚就会很大。----- 来源《Java编程思想》对泛型的介绍。 泛型是在JDK1.5…

初次使用yolov8遇到的问题

记录第一次使用yolo8跑自己的数据; 首先将官方文档看一下,大概捉摸了2个小时,地址:GitHub - ultralytics/ultralytics: NEW - YOLOv8 🚀 in PyTorch > ONNX > CoreML > TFLite 获得了基本的一些了解&#x…

$\Beta$分布推导与可视化

$\Gamma$函数 $\Gamma$函数(Gamma函数)是阶乘函数在实数和复数域的扩展。对于正整数$n$,阶乘函数表示为$n! 1 \times 2 \times ... \times n$。然而,这个定义仅适用于正整数。Gamma函数的目的是将阶乘扩展到实数和复数域,从而计算实数和复数…

代码随想录【链表】--->删除倒数第N个节点、链表相交、环形链表

⭐️代码随想录⭐️ 数组篇: 二分查找 移除数组 有序数组的平方 长度最小的数组 螺旋矩阵 链表篇: 链表移除 设计链表 反转链表 交换链表中的节点 文章目录19. 删除链表的倒数第 N 个结点思路代码面试题 02.07. 链表相交思路代码142. 环形链表 II思路判断链表有环确…

ARM 制作简易的根文件系统

一、根文件系统概述 1、为什么需要根文件系统 (1) init 进程这个应用程序,在根文件系统上。 (2) 根文件系统提供了根目录:/。 (3) 内核启动后的应用层配置(/etc 目录),在根文件系统上。几乎可以认为:发行版 内核 rootfs。 …

Arduino开发之如何连接压力传感器模块?

文章目录0.引言1.压力传感器模块说明2.代码编写3.功能演示0.引言 在利用Arduino开发过程中,若需知道设备能感知到受到外部按压,设备可以通过压力传感器模块来感知周围环境。本文在【Arduino如何进行开发?】基础上,借鉴现有网络资料…

数字营销新宠:探究2023年YouTube网红营销的核心趋势和商业价值

2023年,YouTube网红营销已经成为全球广告营销行业的重要组成部分。YouTube作为全球最大的视频分享平台,每月活跃用户数达到了20亿,其中有超过100万的YouTube网红在平台上分享自己的创意和想法。在这篇文章中,Nox聚星将和大家探讨2…

Visual Studio如何使用Qt开发桌面软件?

文章目录0.引言1.开发环境配置2.编写第一个Qt程序0.引言 笔者熟悉的第一门编程语言是C#,当初本科毕业设计需要进行Qgis的二次开发,本想利用C#编程,但网上资料较少,多是利用Qt进行Qgis的二次开发,Qt是利用C编程&#xf…

如何将aac转化为mp3,4种常用方法

aac是高级音频编码格式之一,支持多声道、解析度高,与mp3相比,aac格式的音质更佳,文件更小。在手机上录音时,保存下来的录音文件通常是AAC格式的。虽然aac格式有很多优点,但是,在不同的设备上&am…

POST请求与GET请求

get和post是HTTP协议中的两种发送请求的方法 HTTP是基于TCP/IP的关于数据如何在万维网中通信的协议 一、get请求与querystring get请求即客户端向server服务端请求数据,如:获取文章列表的分页码等 通过queryString来获取数据,如&#xff1…

设计模式 -- 模板方法模式

前言 月是一轮明镜,晶莹剔透,代表着一张白纸(啥也不懂) 央是一片海洋,海乃百川,代表着一块海绵(吸纳万物) 泽是一柄利剑,千锤百炼,代表着千百锤炼(输入输出) 月央泽,学习的一种过程,从白纸->吸收各种知识->不断输入输出变成自己的内容 希望大家一起坚持这个过程,也同…

java生成随机字符串的方法

今天我们来学习下随机数的生成,随机数就是不确定的数,它可以是任意一个整数或者字符串。下面就让我们一起来学习下随机字符串的生成吧。 首先,我们需要先定义一个名为 str的数组,并将它作为输入文件。 1、使用 Java中的 str作为输…

传播的最大能量场来自私域的裂变——“春生百味”品牌营销裂变活动复盘后记

关于大宗家电等耐用品品牌想要精准触达潜在用户,如何实施传播策略? 刚刚与方太品牌方复盘完3月份“春生百味”关于营销裂变直播活动的整体效果,我们借此次整体案例实施过程的梳理,以分享几个裂变过程中的关键点。 传播的最大能量…

React styled-components(二)—— props、attrs属性

styled-components props、attrs属性propsprops 穿透添加 attrs 属性获取 state 中的样式变量控制样式通过 props 控制样式通过 css 控制样式props props 穿透 styled-components 可以 props 穿透,把属性穿透到元素中。 通常,用 css 的 input 组件实现…