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>