超全面的javascript中变量命名规则


Posted in Javascript onFebruary 09, 2017

前言

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

全名原则

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

匈牙利命名法

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

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

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

语法

变量名 = 类型 + 对象描述

  1. 类型指变量的类型
  2. 对象描述指对象名字全称或名字的一部分,要求有明确含义,命名要容易记忆容易理解。

通过在变量名前面添加相应小写字母的符号标示作为前缀,标示出变量的类型,前缀后面是一个或多个单词组合,单词描述了变量的用途。如果是 jquery 对象,则用 $ 作为变量名的前缀。

提示

虽然 javascript 变量表面上没有类型,但是 javascript 内部还是会为变量赋予相应的类型。

匈牙利命名法是一位微软程序员发明的,多数的 c,c++ 程序都使用此命名法。

类型

javascript 变量命名类型 变量命名前缀
array 数组 a
boolean 布尔值 b
float 浮点数 l
function 函数 fn
int 整型 i
object 对象 o
regular 正则 r
string 字符串 s

示例

var aName = [1, 2, 3];
var oBtn = document.getElementById('btn');
function fnName(){};
var iCount = 0;
var sName = "zhuyujia";

驼峰式命名法

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

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

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

语法

变量名或函数名是由一个或多个单词连结在一起,其中第一个单词以小写字母开始,后面的所有单词的首字母都采用大写字母,这样的变量名看上去就像骆驼峰一样此起彼伏,故得名。

示例

var myName = "zhuyujia";
var formSubmit = document.getElementById("submit");
function timeCount(){}

帕斯卡命名法

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

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

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

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

语法

和驼峰式命名法类似,只不过第一个单词的首字母需要大写。

示例

var MyName = "zhuyujia";
var FormSubmit = document.getElementById("submit");
function TimeCount(){}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
一个简单的js树形菜单
Dec 09 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 #Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 #Javascript
js 原型对象和原型链理解
Feb 09 #Javascript
AngularJs表单校验功能实例代码
Feb 09 #Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 #Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 #Javascript
简单谈谈Javascript函数中的arguments
Feb 09 #Javascript
You might like
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
php中关于换行的实例写法
2019/09/26 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
总结javascript中的六种迭代器
2016/08/16 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
Python实现Const详解
2015/01/27 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python实现微信小程序自动回复
2018/09/10 Python
Python中如何引入第三方模块
2020/05/27 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
关于运动会的稿件
2014/02/02 职场文书
职工运动会邀请函
2014/02/02 职场文书
警示教育活动总结
2014/05/05 职场文书
管理失职检讨书范文
2015/05/05 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android