返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解JavaScript中的变量命名规范
  • 209
分享到

详解JavaScript中的变量命名规范

摘要

目录驼峰命名根据变量类型来命名普通变量/属性布尔变量/属性普通函数/方法回调、钩子函数类注意一致性介词一致性顺序一致性表里一致性时间一致性其他注意事项避免使用不常用的缩写避免使用容易

驼峰命名

首先,和其他语言一样,大部分变量建议采用驼峰命名法。

var articleTitle = 'javascript变量命名规范'

而对于常量,使用大写字母和下划线来组合命名。

const COUNTRY_NAME = 'China'

根据变量类型来命名

普通变量/属性

尽量用简单易懂的 名词 结尾,前面可以加 形容词/名词 来修饰。

var person = {
    name: 'Frank'
}
var student = {
    grade: 3,
    class: 2
}
var juNIOrSchoolStudent = {}

布尔变量/属性

一般用 形容词be动词 、情态动词has 开头

var person = {
    alive: false, // 如果是形容词,前面就没必要加is,比如isAlive就显得冗余
    canSpeak: true, //情态动词有can、should、will、need等,情态动词后面接动词
    isVip: true, // be动词有is、was等,后面一般接名词
    hasChildren: true, // has加名词
}

控制元素的显示隐藏、是否加载的时候,可以用 showhideload 开头

var dialog = {
    showTitle: true, // 又例如Vue框架中,v-show="showTitle"
    hideHeader: false, // 又例如angular框架中,ng-hide="hideHeader"
    loadFooter: true, // 又例如vue框架中,v-if="loadFooter"
}

普通函数/方法

一般用 动词 开头。如果是及物动词后面可以加名词,组成 动宾结构

var person = {
    run(){}, // 不及物动词
    drinkWater(){}, // 及物动词
    eat(foo){}, // 及物动词加参数(参数是名词)
}

名称也可以体现参数:

document.getElementById('domId')
function findarticleByName(articleName) {}

回调、钩子函数

用 介词 开头,或用 动词的现在完成时态

button.addEventListener('click', onButtonClick)
var component = {
    beforeCreate(){},
    created(){},
    beforeMount(){},
    mounted(){},
    beforeUpdate(){},
    updated(){},
    activated(){},
    deactivated(){},
    beforeDestroy(){},
    destroyed(){}
}

类名/构造函数的名称,要采用Pascal命名法(即驼峰命名法+首字母大写)。

class MyArticle {}
 
function Person (name) {
    this.name = name
}

私有属性和方法的前缀加下划线_, 公共属性和方法则不用

class Person {
    // 私有属性 
    _name;

    // 公共方法
    getName() {
        return this._name;
    }
    // 公共方法
    setName(name) {
        this._name = name;
    }
}

注意一致性

介词一致性

例如在上述钩子函数的命名规范中,

  • 如果你使用了 before + after,那么就在代码的所有地方都坚持使用;
  • 如果你使用了 before + 完成时,那么就坚持使用;
  • 如果你改来改去,就 不一致 了,不一致将导致 不可预测

再例如使用了 onButtonClick,就不要在其他地方使用 handleButtonClick。

顺序一致性

比如同时命名了两个变量: updateContainerWidth 和 updateHeightOfContainer ,

这个顺序就令人很别扭,同样会引发 不可预测

表里一致性

函数名应尽可能完美体现函数的功能,既不能多也不能少。

比如

function getSongs(){
    return $.get('/songs).then((response){
        div.innerText = response.songs
    })
}

就违背了表里一致性,getSongs 表示获取歌曲,并没有暗示这个函数会更新页面,但是实际上函数更新了 div,这就是表里不一,正确的写法是

要么纠正函数名

function getSongsAndUpdateDiv(){
    return $.get('/songs).then((response){
        div.innerText = response.songs
    })
}

要么写成两个函数

function getSongs(){
    return $.get('/songs)
}
function updateDiv(songs){
    div.innerText = response.songs
}
getSongs().then((response)=>{
    updateDiv(response.songs)
})

时间一致性

有可能随着代码的变迁,一个变量的含义已经不同于它一开始的含义了,这时就需要及时改掉这个变量的名字。
这一条是最难做到的,因为写代码容易,改代码难。如果这个代码组织得不好,很可能会出现牵一发而动全身的情况(如全局变量就很难改)。
所以最好的做法,就是一开始就做好规划、并且按照规范来组织代码。

其他注意事项

避免使用不常用的缩写

除了一些常用的所有程序员都知道的缩写(例如 num、html),建议不要使用缩写。

比如

  • passWord 不要缩写为 psw,
  • table 不要缩写为 tb、tbl
  • current 不要缩写为 cur

更不要使用拼音首字母缩写。

比如

  • 万元户 不要缩写为 wyh
  • 中资公司 不要缩写为 zzgs

这些缩写其实没少几个字符,却让看代码的人增加了很多理解的负担。

避免使用容易混淆的字母和数字

比如

  • 同时用 l 和 1: level1
  • 同时用 O 和 0: 0Option

避免变量命名过于抽象

比如

var flag = false; // 可以改成更有实际含义的 isValid、 hasPermission
var obj = {}; // 可以改成更有实际含义的 currentTask、 newItem

到此这篇关于详解JavaScript中的变量命名规范的文章就介绍到这了,更多相关JavaScript变量命名规范内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 详解JavaScript中的变量命名规范

本文链接: https://lsjlt.com/news/174804.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解JavaScript中的变量命名规范
    目录驼峰命名根据变量类型来命名普通变量/属性布尔变量/属性普通函数/方法回调、钩子函数类注意一致性介词一致性顺序一致性表里一致性时间一致性其他注意事项避免使用不常用的缩写避免使用容易...
    99+
    2022-12-12
    JavaScript变量命名规范 JavaScript 命名规范 JavaScript变量命名
  • JavaScript中的变量命名规范是什么
    这篇文章主要介绍“JavaScript中的变量命名规范是什么”,在日常操作中,相信很多人在JavaScript中的变量命名规范是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript中的变量命...
    99+
    2023-07-04
  • 关于java中变量命名规范的详细介绍
    Java是一种区分字母的大小写的语言,所以我们在定义变量名的时候应该注意区分大小写的使用和一些规范,接下来我们简单的来讲讲Java语言中包、类、变量等的命名规范。(一)Package(包)的命名Package的名字应该都是由一个小写单词组成...
    99+
    2019-10-05
    java入门 java 变量 命名规范 介绍
  • javascript变量的声明与命名规范实例分析
    本篇内容主要讲解“javascript变量的声明与命名规范实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript变量的声明与命名规范实例分析...
    99+
    2024-04-02
  • Java变量命名规范有哪些
    今天就跟大家聊聊有关Java变量命名规范有哪些,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Java是一种区分字母的大小写(case-sensitive)的语言,下面谈谈Java语言...
    99+
    2023-06-17
  • Python学习中所需的变量命名规范
    学习Python时需要了解的变量命名规范 在学习Python编程语言时,一个重要的方面是学习如何正确命名和使用变量。变量是用来存储和表示数据的标识符。良好的变量命名规范不仅能提高代码的可读性,还能减少出错的可能性。本文将介绍一些...
    99+
    2024-01-20
    Python 规范 变量命名
  • JavaScript变量名的代码规范是什么
    本文小编为大家详细介绍“JavaScript变量名的代码规范是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript变量名的代码规范是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深...
    99+
    2024-04-02
  • python中的变量命名规则详情
    目录1.变量命名1)命名的规范性2)编程语言常用驼峰命名法2. 变量命名的描述性3.变量名尽量短,但是不要太短4.合理使用变量5. 变量定义尽量靠近使用6. 合理使用namedtup...
    99+
    2024-04-02
  • javascript中命名变量的规则是什么
    这篇“javascript中命名变量的规则是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这...
    99+
    2024-04-02
  • 详解Python 中的命名空间、变量和范围
    目录Python 中的命名空间、变量和范围什么是命名空间?变量和表达式变量范围Python 中的命名空间、变量和范围 什么是命名空间? 首先,我们需要感知python中的名称(标识符...
    99+
    2024-04-02
  • Python变量命名规则和定义变量详解
    目录一、定义变量二、定义变量的规则总结 一、定义变量 语法规则: 变量名 = 值 定义变量的语法规则中间的‘=',并不是数学中等于号的意思,在编程语言中而是赋值的意思。赋值:其...
    99+
    2024-04-02
  • 详解Python语言的变量命名规则
    Python语言变量命名规则详解 Python作为一种广泛应用的编程语言,具备简洁、易读的特点,其中变量命名规则是开发者必须熟悉和遵守的重要内容。本文将详细解释Python语言变量命名规则,并提供具体的代码示例。 变量命名的基本...
    99+
    2024-01-20
    详解 Python变量 命名规则
  • Java基础之命名规范的详解
    前言 在编程的世界里,每种语言都有自己的一些规范。下面,就带你了解Java命名规范。对于程序员来说,如果想学好一门语言,想要自己写出来的代码能被他人轻易地读懂,深入的学习命名规范是非...
    99+
    2024-04-02
  • python变量的命名规则
    这篇文章主要讲解了“python变量的命名规则”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“python变量的命名规则”吧!变量的命名:       ...
    99+
    2023-06-02
  • vb中变量名的命名规则有哪些
    在VB中,变量名的命名规则如下:1. 变量名必须以字母开头。2. 变量名可以包含字母、数字、下划线(_)和句点(.)。3. 变量名不...
    99+
    2023-09-13
    vb
  • vba中变量的命名规则有哪些
    在VBA中,变量的命名规则如下:1. 变量名必须以字母开头,可以包含字母、数字和下划线。2. 变量名不区分大小写,但建议使用驼峰命名...
    99+
    2023-09-05
    vba
  • Go中变量命名规则与实例
    目录前言命名习惯很重要良好命名喜欢的特质经验法则大小写混用的变量名变量名避免冗余函数参数的命名返回值的命名方法 Receiver 的命名导出 package 级别变量命名接口类型er...
    99+
    2024-04-02
  • shell变量名的命名规则有哪些
    在Shell脚本中,变量名的命名规则如下:1. 变量名只能由字母、数字和下划线组成。2. 变量名必须以字母或下划线开头。3. 变量名...
    99+
    2023-09-25
    shell
  • PHP中封装性的命名规范
    在PHP开发中,良好的封装性是一个重要的设计原则。通过合理的命名规范,可以提高代码的可读性、可维护性和复用性。本文将介绍PHP中常见的封装性命名规范,并给出具体的代码示例。类的命名类的命名应该采用大驼峰命名法(PascalCase),即每个...
    99+
    2023-10-21
    命名规范(Naming Conventions) PHP编程(PHP Programming) 封装性(Encapsul
  • 如何解析Python 变量命名规则和定义变量
    这篇文章给大家介绍如何解析Python 变量命名规则和定义变量,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、定义变量语法规则:变量名 = 值定义变量的语法规则中间的‘=',并不...
    99+
    2023-06-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作