javascript栏目介绍如何提高代码可读性的方法。
每个人都喜欢可读性高的代码,因为高可读性的代码总是能让人眼前一亮!
就好比你向周围的人说:快看,老师!周围的人可能不屑一顾:老师有什么好看的?但如果你说:快看,苍老师!那可能很多人会被你这句话所吸引。一字之差,结果截然不同。
代码可读性的魅力也是这样,高可读性的代码,让别人抑郁理解,能够大量减少后期的维护时间。今天总结了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!

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

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

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

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

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

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

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

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

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
The most popular open source editor
