阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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>
      
      目录
      目录