JavaScript 代码整洁之道

这篇具有很好参考价值的文章主要介绍了JavaScript 代码整洁之道。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


参考资料

概述篇

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

制定通用的规则,依靠工具让团队的代码风格保持统一,要让代码看起来是由一个人编写的,消除个人的代码风格。常用工具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 自诞生以来就是支持对象可变的,目前许多库都在尽量避免使用可变对象。

  • 函数应该只做一件事

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

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

  • 函数链式调用

重构篇

重构:重构不是银弹,但它是一种有价值的武器,可以帮助你控制好代码和项目 (软件/应用)。
JavaScript 代码整洁之道
JavaScript 代码整洁之道

代码风格

参考文档

常量大写

const DAYS_IN_WEEK =7;
const DAYS_IN_MONTH=30;

先声明后调用

为了方便阅读,把函数声明写在函数调用前面。

注释

只有业务逻辑需要注释。代码注释不是越多越好。文章来源地址https://www.toymoban.com/news/detail-425816.html

到了这里,关于JavaScript 代码整洁之道的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • STM32重要参考资料

    stm32f103c8t6 (有时候不小心短接VCC和GND,芯片会锁住,可以BOOT0拉高试试(用跳线帽接)) 可用于PCB设计 1.RCC开启时钟错误,例如    RCC_ APB2 PeriphClockCmd(RCC_APB2Periph_GPIOB, ENABLE); 写成    RCC_ APB1 PeriphClockCmd(RCC_APB2Periph_GPIOB, ENABLE); 这个函数是有说明的,可以看看vscode显示的函

    2024年04月11日
    浏览(30)
  • 资料与参考

    资料: 本书(《Python神经网络编程》)的资料是使用Jupyter notebooks写的,本人并不擅长使用Jupyter,所以用传统py重写了一遍,并附加了新功能(即多数字识别),现将Jupyter版和py版连带本书pdf一并上传至gitee,地址:python-neuralNetwork-coding: 《Python神经网络编程》pdf和随书源码,

    2024年02月11日
    浏览(41)
  • [渝粤教育] 中国人民警察大学 工业企业防火 参考 资料

    教育 -工业企业防火-章节资料考试资料-中国人民警察大学【】 随堂测验 1、【判断题】工业企业的火灾特点是涉及行业种类繁多,涉及到社会生活的方方面面。 A、正确 B、错误 参考资料【 】 2、【判断题】工业企业的火灾特点是物资集中,存在各种形式的点火源,发生火灾

    2024年02月02日
    浏览(49)
  • [渝粤教育] 辽宁对外经贸学院 数字新技术 参考 资料

    教育 -数字新技术-4-章节资料考试资料-辽宁对外经贸学院【】 第一单元测验 1、【单选题】1. 云计算是对(D)技术的发展与运用 云计算是对( )技术的发展与运用。 A、并行计算 B、网格计算 C、分布式计算 D、三个选项都是 参考资料【 】 2、【单选题】从研究现状上看,下

    2023年04月25日
    浏览(50)
  • 【Python NLTK】零基础也能轻松掌握的学习路线与参考资料

    Python 自然语言处理工具包(Natural Language Toolkit,简称 NLTK)是一款 Python 的库,主要用于处理自然语言的相关问题,如文本清洗、标记化、分词、语义分析、词性标注、文本分类等功能,是数据科学家和机器学习工程师不可或缺的工具之一。 本文将介绍学习 Python NLTK 的路线,

    2024年02月07日
    浏览(44)
  • 【Python psycopg2】零基础也能轻松掌握的学习路线与参考资料

    Python psycopg2是一个Python库,在Python中提供了一个连接PostgreSQL数据库的接口。它可以让Python应用程序和PostgreSQL数据库之间进行通信和数据传输。学习Python psycopg2的路线和教程可以在查阅资料和实践中快速入门。 一、学习前置知识 学习Python psycopg2需要一定的前置知识,如Pytho

    2024年02月05日
    浏览(39)
  • 【Python Cookie 和代理 IP】零基础也能轻松掌握的学习路线与参考资料

    一、Python Cookie 1、什么是Cookie? Cookie是一种在客户端保存数据的机制,服务器通过在HTTP响应头中添加Set-Cookie头实现。浏览器在接收到响应头中的Set-Cookie后,会将这个Cookie保存在本地。之后每次请求都会将本地保存的Cookie自动添加到请求头中,发送给服务器。 2、为什么需要

    2024年02月05日
    浏览(36)
  • java工程师面试技巧和方法,这份Github标星50K,相关资料参考

    Dubbo 为什么要用 Dubbo? Dubbo 的整体架构设计有哪些分层? 默认使用的是什么通信框架,还有别的选择吗? 服务调用是阻塞的吗? 一般使用什么注册中心?还有别的选择吗? 默认使用什么序列化框架,你知道的还有哪些? 服务提供者能实现失效提出是什么原理? 服务上线怎么

    2024年04月16日
    浏览(39)
  • 基于python影视电影点评系统设计与实现:开题报告、成品参考、毕设辅导资料

     博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月05日
    浏览(37)
  • 基于JAVA高校校园学习资料共享系统 设计与实现(springboot框架) 参考文献

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年01月19日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包