JavaScript 变量的命名

🌙
手机阅读
本文目录结构

变量名的禁忌

变量的名字可以千变万化,但是也有其中的规则需要遵守;(必须遵守的);

  • 1、变量名是由数字、字母、下划线组成的,其中字母里大小写字母均可;

  • 2、变量名首位不是能数字,可以是字母下划线;首位后的位置可以是数字,字母,下划线;

  • 3、不能使用关键字和保留字作为变量的名字(需要避开的名字);

    • 关于关键字和保留字,这个可以拿生活中的现象举例子,大人给小孩起名字的时候,小孩的名字一定不能和他父亲母亲的名字一样;当然也不能和爷爷,奶奶,外公,外婆,舅舅,姑姑等等这些名字一样;这个就是现实中约定俗成的规则;
    • 在JS中,也有些单词是有特殊意义的,或者是为了以后语言升级做准备的;而这些单词就不能作为变量名;比如前面接触的typeof,function;这样的单词就不能作为变量名;
  • 4、变量区分大小写,test和Test是不一样的,必须严格一样,才算是一个变量的;(在javascript里,onclick 必须要写出onclick,不能写成onClick;)

变量命名的优化方法(推荐遵守的,非强制);

使用变量作为值的符号名,变量的名字又叫标识符;

优雅的变量命名方法是可以一眼扫过就知道什么意思的;不会浪费时间在思考变量名所代表的意义;

如果给"门"命名为name1,给"桌子"命名为name2,给"冰箱"命名为name3;那么日常生活就乱套了,听起来这种在现实生活中会很奇怪和搞笑;

但是很多前端新手经常犯变量命名的类似毛病;

变量命名的意义是直观易理解,读到第一行代码时候就知道什么意思,假如隔了几十上百行代码后仍然可以明确他的意义;

下面是收集的一些变量命名方法;

  • -连接符方法;
    • 比如给我桌子上门钥匙命名;my-room-door-key 和 my_room_door_key;
    • 这种方法用-和下划线_连接符来链接单词,区别是下划线在选择变量的时候,鼠标双击可以全部选择;
  • 驼峰命名法;这种命名方法有两种方式
    • 大驼峰:每个单词的首字母大写;MyRoomDoorKey
    • 小驼峰:第一个字母小写,其它字母大写;myRoomDoorKey
  • 匈牙利命名法;变量由类型+对象描述组成;
    • 对象(Object)用o表示;
    • 函数(function)用fn表示;
    • 数组(array)用a表示;

上面的但中方法是目前最流行的规范;但是各有利弊;下面是我个人自己的书写习惯;

个人的写法;

  • class名:用”-”连接符的方法;class=”header-nav” 比如这样的;
  • JS变量名:myRoomDoorKey;小驼峰
  • data-diy_attr 自定义属性;
  • j-trigger-target JS中需要用的类名
  • jQuery对象名:$myKey;小驼峰前面加$;这种方法是从匈牙利+驼驼峰总结出来的;其实真实项目中,很少有匈牙利命名法的;匈牙利命名法见过最多的都是出现在写DEMO的时候用;
  • 除非特别难起的变量名,否则千万不要用中文拼音做变量名,但是遇到难起的变量名,使用中文也别有负担,但是禁止中英文混搭
  • 注释可以辅助整理思路

不要听信某些教材和视频中说的严禁用拼音命名的话,有的甚至还把linux创始人林纳斯的代码风范拿出来说事。其实那些并没有什么软用;开始就和大家说了变量是用来区别不同数据的;而优化变量名的意义在于能够快速识别这个变量名所代表的数据;

比如你要记录游戏场景下的角色出血值;你还要想半天单词,或者找翻译,然后起出来的变量名,自己下次看到或者别人看到的时候还要去翻译或者思考下;这种情况下,为什么不直接用 chuxue这种的方式呢?只需要后面加一行注视说明什么意思就可以了;

很反感为了遵守优化规则而脱裤子放屁的方式的;

曾经在项目中遇到过一个真实的事;某个变量看了半天不知道到底代表什么意思(因为当时有接触到差不多10种的用户相关类型的金额数),查了翻译也没有查到;后来问了下,才知道那个坑货把单词给拼错了两个字母;

<div class="page-var-demo" id="page-var-demo">
    <!--class="page-var-demo"用来设置样式;id="page-var-demo"用给JS用;-->
    <div class="btns-groulp">
        <a href="javascript:;" class="xxxx xxxxx j-open-demo" data-demo_id="456465465">打开演示窗口</a>
        <!--j-open-demo 这些是给JS用来触发某些事件用的,data-demo_id用来储存需要的值的-->
        <a href="javascript:;" class="xxxx xxxxx j-set-demo">设置演示数据</a>
    </div>
</div>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了