首页 > 编程语言 >JavaScript 代码整洁技巧

JavaScript 代码整洁技巧

时间:2023-09-16 14:55:36浏览次数:52  
标签:技巧 代码 JavaScript 使用 副作用 整洁 比如 函数

前言

为什么代码要整洁?

  代码质量与整洁度成正比。有的团队在赶工期的时候,不注重代码的整洁,代码写的越来越糟糕,项目越来越混乱,生产力也跟着下降,那就必须找更多人来提高生产力,开发成本越来越高。

整洁的代码是怎样的?

  清晰表达意图、消除重复、简单抽象、能通过测试。 换句话说:具有可读性、可重用性和可重构性

命名

  1. 名副其实:不使用缩写、不使用让人误解的名称,不要让人推测。

  2. 使用方便搜索的名称:避免硬编码,对数据用常量const记录。

  3. 类名应该是名词,方法名应该是动词。

  4. 多个变量属于同一类型的属性,那就他们整合成一个对象。同时省略多余的上下文。

    其他:

    • 不要写多余的废话,比如theMessagethe可以删除。

    • 统一术语。比如通知一词,不要一会在叫notice,一会叫announce

    • 用读得通顺的词语。比如getElementById就比 useIdToGetElement好读。

     

    函数(方法)

    • 删除重复的代码,don't repeat yourself。很多地方可以注意dry,比如偷懒复制了某段代码、try...catch或条件语句写了重复的逻辑。

      • 形参不超过三个,对测试函数也方便。多了就使用对象参数。

      • 同时建议使用对象解构语法,有几个好处:

        1. 能清楚看到函数签名有哪些熟悉,
        2. 可以直接重新命名,
        3. 解构自带克隆,防止副作用,
        4. Linter检查到函数未使用的属性。

      • 函数只做一件事,代码读起来更清晰,函数就能更好地组合、测试、重构。

         

         

        • 自顶向下地书写函数,人们都是习惯自顶向下读代码,如,为了执行A,需要执行B,为了执行B,需要执行C。如果把A、B、C混在一个函数就很难读了。(看前一个的例子)。

        • 不使用布尔值来作为参数,遇到这种情况时,一定可以拆分函数。

        • 避免副作用。

        • 常见就是陷阱就是对象之间共享了状态,使用了可变的数据类型,比如对象和数组。对于可变的数据类型,使用immutable等库来高效克隆。
        • 避免用可变的全局变量。
        • 副作用的缺点:出现不可预期的异常,比如用户对购物车下单后,网络差而不断重试请求,这时如果添加新商品到购物车,就会导致新增的商品也会到下单的请求中。
        • 集中副作用:遇到不可避免的副作用时候,比如读写文件、上报日志,那就在一个地方集中处理副作用,不要在多个函数和类处理副作用。
        • 其它注意的地方:

           

       

标签:技巧,代码,JavaScript,使用,副作用,整洁,比如,函数
From: https://www.cnblogs.com/jiangyuhu/p/17706740.html

相关文章

  • java jdk 里自带的 javascript引擎的使用
    main方法代码:importjavax.script.ScriptContext;importjavax.script.ScriptEngine;importjavax.script.ScriptEngineManager;importjavax.script.ScriptException;publicclassMain{publicstaticvoidmain(String[]args)throwsScriptException{......
  • 无涯教程-JavaScript - TRANSPOSE函数
    描述TRANSPOSE函数将单元格的垂直范围作为水平范围返回,反之亦然。必须将TRANSPOSE函数作为数组公式输入,该范围必须具有与行范围和列范围相同的行和列数。您可以使用TRANSPOSE在工作表上移动数组或范围的垂直和水平方向。语法TRANSPOSE(array)键入函数后,按CTRL+SHIFT......
  • 无涯教程-JavaScript - RTD函数
    描述RTD功能从支持COM自动化的程序中检索实时数据。语法RTD(ProgID,server,topic1,[topic2]...)争论Argument描述Required/OptionalProgID已在本地计算机上安装的注册COM自动化加载项的ProgID的名称。将该名称括在引号中。Requiredserver应该在其中运行外......
  • 无涯教程-JavaScript - ROWS函数
    描述ROWS函数返回引用或数组中的行数。语法ROWS(array)争论Argument描述Required/OptionalArrayAnarray,anarrayformula,orareferencetoarangeofcellsforwhichyouwantthenumberofrows.Required适用性Excel2007,Excel2010,Excel2013,Excel......
  • 无涯教程-JavaScript - OFFSET函数
    描述OFFSET函数返回对范围的引用,该范围是一个单元格或单元格范围中指定的行数和列数。返回的引用可以是单个单元格或单元格范围。您可以指定要返回的行数和列数。语法OFFSET(reference,rows,cols,[height],[width])争论Argument描述Required/OptionalReference......
  • 【JavaScript保姆级教程】JavaScript的介绍和简单语法
    @TOC前言JavaScript是一种广泛使用的脚本语言,为网页添加交互性和动态功能提供了强大的支持。在本文中,我们将深入了解JavaScript的基本概念和用法,包括它在HTML中的书写位置、注释和结束符的使用,以及一种常用的函数——alert语句。一、javascript语言简介JavaScript是一种轻量级的解......
  • 无涯教程-JavaScript - LOOKUP函数
    描述需要查看单个行或一列并从第二行或第二列的同一位置查找值时,请使用LOOKUP函数。使用"查找"功能搜索一行或一列。使用VLOOKUP函数可搜索一行或一列,或搜索多行和多列(如表)。它是LOOKUP的改进版本。有两种使用LOOKUP的方法-矢量形式−UsethisformofLOOKUPtosearc......
  • 无涯教程-JavaScript - INDIRECT函数
    描述INDIRECT函数返回由文本字符串指定的引用。如果您在Excel公式中键入引用B1,则Excel会理解这引用了单元格B1。但是,Excel无法将文本字符串"B1"理解为引用。因此,如果单元格引用采用文本字符串的形式,则需要使用INDIRECT函数将其转换为实际的单元格引用。立即判断引用以显......
  • 22个实用的CSS技巧,让你的网站与众不同
    想要让你的网站在激烈的竞争中脱颖而出吗?使用CSS的强大功能可以帮助你实现这一目标。本文将分享22个实用的CSS技巧,帮助你提升网站的外观和用户体验。无论你是一个新手还是有经验的开发者,这些技巧都将为你的网站注入新鲜的设计元素和动感效果。1.自定义字体:通过使用@font-face规则,......
  • Web阶段:第三章:JavaScript语言
    《JavaScript语言精粹》点击下载,密码:synuJavaScript介绍:1.Javascript语言诞生主要是完成页面的数据验证。2.它运行在客户端,需要运行浏览器来解析执行JavaScript代码。3.JS是Netscape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。4.JS是弱类型......