search
HomeWeb Front-endJS Tutorial掌握10种方法,提高你的代码可读性!

javascript栏目介绍如何提高代码可读性的方法。

掌握10种方法,提高你的代码可读性!

每个人都喜欢可读性高的代码,因为高可读性的代码总是能让人眼前一亮!
就好比你向周围的人说:快看,老师!周围的人可能不屑一顾:老师有什么好看的?但如果你说:快看,苍老师!那可能很多人会被你这句话所吸引。一字之差,结果截然不同。
代码可读性的魅力也是这样,高可读性的代码,让别人抑郁理解,能够大量减少后期的维护时间。今天总结了10条常用的提高代码可读性的小方法,望大家不吝赐教。

1.语义化命名

在声明变量时,尽量让自己的变量名称具有清晰的语义化,使他人一眼便能够看出这个变量的含义,在这种情况下,可以减少注释的使用。

示例:

// bad  别人看到会疑惑:这个list是什么的集合?const list = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe']  

// good 别人看到秒懂:原来是老师们的集合!const teacherList = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe']复制代码

2.各种类型命名

对于不同类型的变量值,我们可以通过一定的方式,让别人一看看上去就知道他的值类型。
一般来说,对于boolean类型或者Array类型的值,是最好区分的。例如:boolean类型的值可以用isXXX、hasXXX、canXXX等命名;Array类型的值可以用xxxList、xxxArray等方式命名。

// badlet belongToTeacher = true;let teachers = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe'];// goodlet isTeacher = true;let teacherList = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe'];复制代码

3.为常量声明

我们在阅读代码时,如果你突然在代码中看到一个字符串常量或者数字常量,你可能要花一定的时间去理解它的含义。如果使用const或者enum等声明一下这些常量,可读性将会有效得到提升。

示例:

// bad  别人看到会很疑惑:这个36D的含义是什么if (size === '36D') {  console.log('It is my favorite');
}// good 别人看到秒懂:36D是最喜欢的大小const FAVORITE_SIZE = '36D';if (size === FAVORITE_SIZE) {  console.log('It is my favorite');
}复制代码

4.避免上下文依赖

在遍历时,很多人会通过value、item甚至v等命名代表遍历的变量,但是当上下文过长时,这样的命名可读性就会变得很差。我们要尽量做到使读者即使不了解事情的来龙去脉的情况下,也能迅速理解这个变量代表的含义,而不是迫使读者去记住逻辑的上下文。

const teacherList = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe']// bad  别人看到循环的末尾处的item时需要在去上面看上下文理解item的含义teacherList.forEach(item => {  // do something
  // do something
  // do …………
  doSomethingWith(item);
})// good 别人看到最后一眼就能明白变量的意思是老师teacherList.forEach(teacher => {  // do something
  // do something
  // do …………
  doSomethingWith(teacher);
})复制代码

5.避免冗余命名

某些情况的变量命名,例如给对象的属性命名,直接命名该属性的含义即可,因为本身这个属性在对象中,无需再添加多余的前缀。

// badconst teacher = {  teacherName: 'Teacher.Cang',  teacherAge: 37,  teacherSex: 'female',
};console.log(person.personName)// goodconst teacher = {  name: 'Teacher.Cang',  age: 37,  sex: 'female',
};console.log(teacher.name)复制代码

6.使用参数默认值

相比短路,使用ES6的参数默认值能让人更轻易地理解未传参数时参数的赋默认值。

// bad  需要多看一步才能理解是赋默认值function getTeacherInfo(teacherName) {
  teacherName = teacherName || 'Teacher.Cang';  // do...}// good 一看就能看出是赋默认值function getTeacherInfo(teacherName = 'Teacher.Cang') {  // do...}复制代码

7.回调函数命名

很多人命名回调函数,尤其是为页面或者DOM元素等设置事件监听的回调函数时,习惯用事件的触发条件进行命名,这样做其实可读性是比较差的,别人看到只知道你出发了这个函数,但却需要花时间去理解这个函数做了什么。
我们在命名回调函数式,应当以函数所要执行的逻辑命名,让别人清晰地理解这个回调函数所要执行的逻辑。

// bad  需要花时间去看代码理解这个回调函数是做什么的<input type="button" value="提交" onClick="handleClick" />function handleClick() {  // do...}// good 一眼就能理解这个回调函数是提交表单<input type="button" value="提交" onClick="handleSubmitForm" />;function handleSubmitForm() {  // do...}复制代码

8.减少函数的参数个数

一个函数如果参数的数量太多,使用的时候就难以记住每个参数的含义了,并且函数多个参数有顺序限制,我们在调用时需要去记住每个次序的参数的含义。通常情况下我们一个函数的参数个数在1-2个为佳,尽量不要超过三个。
当函数的参数比较多时,我们可以将同一类的参数使用对象进行合并,然后将合并后的对象作为参数传入,这样在调用该函数时能够很清楚地理解每个参数的含义。

// bad  调用时传的参数难以理解含义,需要记住顺序function createTeacher(name, sex, age, height, weight) {  // do...}
createTeacher('Teacher.Cang', 'female', 37, 155, 45);// good 调用时虽然写法略复杂了点,但各个参数含义一目了然,无需刻意记住顺序function createTeacher({name, sex, age, height, weight}) {  // do...}
createTeacher({  name: 'Teacher.Cang',  sex: 'female',  age: 37,  height: 155,  weight: 45})复制代码

9.函数拆分

一个函数如果代码太长,那么可读性也是比较差的,我们应该尽量保持一个函数只处理一个功能,当逻辑复杂时将函数适当拆分。

// badfunction initData() {  let resTeacherList = axios.get('/teacher/list');
  teacherList = resTeacherList.data;  const params = {    pageSize: 20,    pageNum: 1,
  };  let resMovieList = axios.get('/movie/list', params);
  movieList = resMovieList.data;
}// goodfunction getTeacherList() {  let resTeacherList = axios.get('/teacher/list');
  teacherList = resTeacherList.data;
}function getMovieList() {  const params = {    pageSize: 20,    pageNum: 1,
  };  let resMovieList = axios.get('/movie/list', params);
  movieList = resMovieList.data;
}function initData() {
  getTeacherList();
  getMovieList();
}复制代码

10.注重写注释

不写注释应该是很多开发者的一个恶习,看别人不写注释的代码也是很多开发者最讨厌的事情。
所以,无论是为了自己还是别人,都请注重编写注释。

// bad  不写注释要花大量时间理解这个函数的作用function formatNumber(num) {  if (num < 1000) {    return num;
  } else {    return `${(num / 1000).toFixed(1)}k`
  }
}// good 有了注释函数的作用和用法一目了然/**
 * @param num
 * @return num | x.xk
 * @example formatNumber(1000);
 * @description
 * 小于1k不转换
 * 大于1k转换为x.xk
 */function formatNumber(num) {  if (num < 1000) {    return num;
  } else {    return `${(num / 1000).toFixed(1)}k`
  }
}复制代码

提高代码可读性的代码风格其实还有很多,以上笔者主要从变量命名、函数和注释三个方面,总结了10条比较常用的提高代码可读性的方法,希望对大家有所帮助。如有补充,欢迎评论。

相关免费学习推荐:JavaScript(视频)

The above is the detailed content of 掌握10种方法,提高你的代码可读性!. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:juejin. If there is any infringement, please contact admin@php.cn delete
PyCharm主题推荐:优雅的代码,从优秀的主题开始PyCharm主题推荐:优雅的代码,从优秀的主题开始Feb 21, 2024 pm 04:27 PM

在编程的世界里,一个优秀的开发工具是程序员们必不可少的良师益友。PyCharm作为一款功能强大的Python集成开发环境,在市场上享有极高的声誉。它提供了丰富的功能,包括代码自动补全、调试器、版本控制工具等,帮助开发者提高开发效率,优化代码质量。然而,作为一个开发工具,PyCharm的界面和主题设计也是至关重要的。一个舒适、美观的界面可以让开发者在编写代码时

将结构转换为 CSV 字符串将结构转换为 CSV 字符串Feb 09, 2024 pm 03:15 PM

我有一个在数据库响应后被扫描的结构,如下所示。每个字段都是相同的len()。我想采用这个结构并生成一个csv分隔字符串/packagemainimport"fmt"typedatastruct{id[]stringcol1[]float64col2[]float64}funcmain(){d:=&data{id:[]string{"id_1","id_1","id_1","id_1"},

命名Java变量时使用中文的优点和缺点命名Java变量时使用中文的优点和缺点Feb 18, 2024 am 10:14 AM

使用中文命名Java变量的优缺点在Java编程中,我们通常使用英文来命名变量、方法和类等标识符。然而,有时候我们也可以考虑使用中文作为标识符的一部分。本文将探讨使用中文命名Java变量的优缺点,并给出一些具体的代码示例。优点一:提高代码可读性使用中文命名Java变量可以使代码更易理解和阅读。毕竟,我们的大脑对于中文的理解和识别要比英文更为自然和流畅。对于非英

解释Python是一种解释型语言的原因解释Python是一种解释型语言的原因Sep 17, 2023 pm 10:41 PM

Python是一种通用解释型、交互式、面向对象的高级编程语言。Python在运行时由解释器进行处理。在执行程序之前不需要编译程序。这与PERL和PHP类似。执行步骤Step1-Python源代码由编码器编写。文件扩展名:.py第2步-编码器编写的Python源代码被编译为Python字节码。在此过程中,将创建一个扩展名为.pyc的文件。步骤3-虚拟机执行.pyc扩展文件。考虑虚拟机是Python的运行时引擎。这是Python程序运行的地方。因此,Python解释器包含了程序编译的过程,程序编译为

PyCharm插件安装指南:详细步骤大揭秘!PyCharm插件安装指南:详细步骤大揭秘!Feb 22, 2024 am 09:30 AM

PyCharm插件安装指南:详细步骤大揭秘!PyCharm是一款功能强大的Python集成开发环境,它的灵活性和可扩展性使得用户可以根据自己的需求安装各种插件来增强开发体验。本文将详细介绍如何在PyCharm中安装插件,以及常用插件的安装步骤和示例代码。一、PyCharm插件安装步骤:打开PyCharm并进入File->Settings菜单;在Se

比较JPA和MyBatis:开发效率和灵活性的对比比较JPA和MyBatis:开发效率和灵活性的对比Feb 20, 2024 am 09:54 AM

JPA和MyBatis:开发效率和灵活性的较量,需要具体代码示例引言:在现代软件开发领域,数据持久化层是一个至关重要的组成部分。为了提高开发效率和灵活性,开发者常常需要选择一个适合项目需求的ORM(对象关系映射)框架。JPA(Java持久化API)和MyBatis是目前广泛使用的两个框架,具备各自的优势和特点。本文将对比这两个框架的开发效率和灵活性,并提供

应用与优化:实际项目中的MyBatis注解动态SQL应用与优化:实际项目中的MyBatis注解动态SQLFeb 19, 2024 am 09:55 AM

MyBatis注解动态SQL在实际项目中的应用与优化引言:MyBatis是一款优秀的持久层框架,它提供了多种SQL映射的方式,包括XML配置文件和注解。其中注解动态SQL是MyBatis的一项强大的功能,可以在运行时根据条件动态生成SQL语句,适用于处理复杂的业务逻辑。本文将介绍MyBatis注解动态SQL在实际项目中的应用,同时分享一些优化技巧与代码示例。

提高代码可读性:Python常见的变量命名规则解读提高代码可读性:Python常见的变量命名规则解读Jan 20, 2024 am 08:01 AM

掌握Python中常见的变量命名规则,提升代码可读性,需要具体代码示例Python作为一门简洁而强大的编程语言,其代码可读性十分重要。变量是代码中最基本的元素之一,良好的变量命名规则可以帮助开发者更好地理解和阅读代码。本文将介绍Python中常见的变量命名规则,并提供具体的代码示例,帮助读者掌握如何提升代码的可读性。一、变量命名规则使用有意义的变量名:变量名

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor