变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的原则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的。良好的书写规范可以让你的JavaScript代码更上一个台阶,也更有利于团队的再次开发和阅读代码。

全名原则

  • 变量名区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号
  • 变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型
  • 尽量避免使用没有意义的命名
  • 禁止使用JavaScript关键词、保留字全名
  • 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法

变量命名方法

变量命名的方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。这里简单来看看这三种命名法的使用以及它们的不同之处。

匈牙利命名法

匈牙利命名法匈牙利命名法是电脑程序设计中的一种变量命名规则,此命名法又可细分为:系统匈牙利命名法和匈牙利应用命名法。

匈牙利命名法具备语言独立的特性,并且首次在BCPL语言中被大量使用。由于BCPL只有机器字这一种数据类型,因此这种语言本身无法帮助程序员来记住变量的类型。匈牙利命名法通过明确每个变量的数据类型来解决这个问题。

在匈牙利命名法中,一个变量名由一个或多个小写字母开始,这些字母有助于记忆变量的类型和用途,紧跟着的就是程序员选择的任何名称。这个后半部分的首字母可以大写,以区别前面的类型指示字母。

匈牙利命名法:

变量名=数据类型+对象描述
  • 数据类型:指点是JavaScript中六种数据类型之一,undefinednullbooleannumberstringObject
  • 对象描述:指对象名字全称或名字的一部分,而且要有明确含义,易记而且还要好理解

有ES6之后,数据的类型不再是六种了,其新增加了Symbol这个新数据类型,有关于Symbol的相关介绍,可以阅读这篇文章《深入解析ES6: Symbol》。

先来看个示例

var aPerson = []; // Array数组
var oBtn = document.getElementById('btn'); //Object对象
var fnName = function () {}; // function函数
var sName = "w3cplus"; // string字符串

如上面的示例中的变量名称aPersonoBtnfnName或者sName。每个变量名前都有代表数据类型的对应字母,然后后面紧跟有意义的单个单词名多个单词,并且单词的字母都大写(其实这种方法,称之为驼峰写法,后面会介绍)。

JavaScript变量名中代表数据类型都有对应的字线,如下所示:

  • s: 表示字符串String
  • i: 表示整型Int(它是Number中的整数类型)
  • fl: 表示浮点Float(它是Number中的小数类型)
  • b: 表示布尔Boolean
  • a: 表示数组Array
  • o: 表示对象Object
  • fn: 不示函数Function
  • re: 表示正则Regular Expression

有关于匈牙利命名更多的细节可以点击这里阅读。

驼峰命名法

当变量名和函数名称是由二个或多个单字链接在一起,而构成的唯一识别字时,利用“驼峰式大小写”来表示,可以增加变量和函数的可读性。

“驼峰式大小写(Camel-Case)一词来自Perl语言中普遍使用的大小写混合格式,而Larry Wall等人所著的畅销书《Programming Perl》(O'Reilly出版)的封面图片正是一匹骆驼。”

“驼峰式大小写”命名规则可视为一种惯例,并无绝对与强制,为的是增加识别和可读性。一旦选用或设置好命名规则,在程序编写时应保持一致格式。

驼峰命名法常见有两种格式:

  • 小驼峰式命名法(lower camel case):第一个单字以小写字母开始;第二个单字的首字母大写,例如:firstNamelastName
  • 大驼峰式命名法(upper camel case):每一个单字的首字母都采用大写字母,例如:FirstNameLastNameCamelCase,也被称为Pascal命名法

有关于驼峰式命名方法更多的介绍,可以点击这里阅读。

帕斯卡命名法

Pascal命名法(Pascal Case,巴斯卡命名法/帕斯卡命名法),电脑程序编写时的一套命名规则(惯例)。

当变量名和函数名称是由二个或二个以上单字链接在一起,而构成的唯一识别字时,用以增加变量和函数的可读性。

单字之间不以空格断开或连接号(-)、下划线(_)链接,第一个单前缀字母采用大写字母;后续单字的首字母亦用大写字母,例如:FirstNameLastName。每一个单字的首字母都采用大写字母的命名格式,被称为“Pascal命名法”,源自于Pascal语言的命名惯例,也有人称之为“大驼峰式命名法”(Upper Camel Case),为驼峰式大小写的子集。

“Pascal命名法”可视为一种命名惯例,并无绝对与强制,为的是增加识别和可读性。一旦选用或设置好命名规则,在程序编写时应保持格式的一致性。

有关于帕斯卡命名法更详细的介绍可以点击这里阅读。

虽然上面三种方法在JavaScript中命名变量常见的方法,也是很多规范推荐使用的命名方法;但除此之外还有别的方法。比如说变量名有两个或多个单词时,可以在多个单词间使用-_连接起来。如first-name或者说first_name

总结

文章简单介绍了一些有关于在JavaScript中变量命名的一些原则。并且介绍了变量命名的常用的几种方法,比如匈牙利命名法驼峰命名法帕斯卡命名法等。不管使用什么方法来命名一个变量,但文章开始提到变量名区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号变量名禁止使用JavaScript关键词、保留字全名这两点,不然很容易给代码带来灾难性的错误。

如需转载,烦请注明出处:http://www.w3cplus.com/javascript/variable-naming-principles.html

JavaScript变量: 变量命名原则的更多相关文章

  1. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  2. javascript的变量作用域--对比js、php和c的for循环

    为什么要写这篇文章呢?主要是给自己提个醒,js的水很深,需要小心点儿才能趟过去,更何况自己不是专业人士,那就得更加小心了. 看下面的js代码: <!DOCTYPE html> <ht ...

  3. [转]深入理解JavaScript的变量作用域

    1.JavaScript的作用域链 2.函数体内部,局部变量的优先级比同名的全局变量高. 3.JavaScript没有块级作用域. 4.函数中声明的变量在整个函数中都有定义. 5.未使用var关键字定 ...

  4. JavaScript笔记:变量及其作用域

    一.变量的定义及声明 在javascript中变量仅仅是用来保存值的一个占位符而已,定义变量时要使用关键字var后跟一个变量名,如下所示: var message; //定义一个变量message,像 ...

  5. JavaScript中变量提升是语言设计缺陷

    首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...

  6. JavaScript中变量和函数声明的提升

    现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...

  7. JavaScript 中变量、作用域和内存问题的学习

    这是我学习JavaScript的第二篇文章,之前做过几年的Java开发,发现JavaScript虽然也是面向对象的语言但是确实有很多不同之处.就本篇博客,主要学习总结一下最近学习到的JavaScrip ...

  8. Javascript的变量与delete操作符

    原文:http://charlee.li/javascript-variables-and-delete-operator.html 刚刚看到一篇好文(原文链接), 对Javascript中的dele ...

  9. 深入理解JavaScript的变量作用域(转载Rain Man之作)

    在学习JavaScript的变量作用域之前,我们应当明确几点: JavaScript的变量作用域是基于其特有的作用域链的. JavaScript没有块级作用域. 函数中声明的变量在整个函数中都有定义. ...

  10. javascript之变量、作用域、作用域链

    一.变量 javascript的变量是松散类型的,所谓松散类型就是说定义的变量可以用来保存任何类型的数据.定义变量时要使用var操作符后面跟变量名.这里的var是一个关键字,如果定义变量时省略了var ...

随机推荐

  1. Iframe中子窗体给父窗体传值

    <html> <head> <script type="text/javascript"> function GetData(data) { a ...

  2. ubuntu16.04下安装opencv-nonfree

    在写计算机视觉与导航技术的课程作业,是关于sift和surf特征的提取及匹配.因为opencv中都有直接的函数可以调用. 关于SIFT和SURF的特征在opencv的nonfree模块中,从字面意思就 ...

  3. using the library to generate a dynamic SELECT or DELETE statement mysqlbaits xml配置文件 与 sql构造器 对比

    https://github.com/mybatis/mybatis-dynamic-sql MyBatis Dynamic SQL     What Is This? This library is ...

  4. code sandbox & mlflow

    https://codesandbox.io/ https://www.jianshu.com/p/d70b25bf3cf4 https://my.oschina.net/u/2306127/blog ...

  5. Python开发【数据结构】:算法(一)

    算法基础 1.什么是算法? 算法(Algorithm):一个计算过程,解决问题的方法 2.复习:递归 递归的两个特点: 调用自身 结束条件 两个重要递归函数的对比: # 由大到小 def func3( ...

  6. 小米范工具系列之一:小米范 web查找器

    最新版本1.5,下载地址:http://pan.baidu.com/s/1c1NDSVe  文件名web finder,请使用java1.8运行 小米范 web查找器主要功能为快速端口扫描,并识别we ...

  7. Day06 DOM4J&schema介绍&xPath

    day06总结 今日内容 XML解析之JAXP( SAX ) DOM4J Schema   三.XML解析器介绍   操作XML文档概述   1 如何操作XML文档 XML文档也是数据的一种,对数据的 ...

  8. AngularJS SQL

    服务端代码 以下列出了列出了几种服务端代码类型: 使用 PHP 和 MySQL.返回 JSON. 使用 PHP 和 MS Access.返回 JSON. 使用 ASP.NET, VB, 及 MS Ac ...

  9. MySQL server has gone away With statement: INSERT INTO `students`......

    mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指client和MySQL server之间的链接断开了. 首选分析给出可能出现的 ...

  10. redis error MISCONF Redis is configured to save RDB snapshots

    在操作命令incr时发生错误: (error) MISCONF Redis is configured to save RDB snapshots, but is currently not able ...