JavaScript命名规范基础及系统注意事项
前端代码中的自定义变量命名 | ||
命名方法: | ||
1.驼峰 2.下划线连接 | ||
对于文件名,我们一般采用小写字母+下划线的形式 | ||
为什么?因为在window下aa.txt和AA.txt系统认为是同一个的文件,而在linux环境下则认为是2个不同的文件,为了使我们代码移植性更好以及为了避免一些不必要的麻烦建议文件名必须小写; | ||
对于js又有以下一些规则: | ||
A:普通变量名 | ||
1.以变量首字母突出这个变量的类型(我叫她首字母标记类型法); | ||
如: | ||
定义多个学生数组 let aStudent = ['shiyue', 'ansheng']; | ||
定义一个学生对象 let oStudent = { name: 'xx' }; | ||
定义学生的名字 let sName = 'HanMeimei'; | ||
2.在变量末尾突出这个变量类型(我叫她变量末尾比较类型法, 我自己比较喜欢这种); | ||
如: | ||
2.1 驼峰命名 | ||
定义多个学生数组 let studentAry = ['shiyue', 'ansheng']; | ||
定义一个学生对象 let studentObj = { name: 'xx' }; | ||
定义学生的名字 let name = 'HanMeimei'; | ||
2.2 下划线命名 | ||
定义多个学生数组 let student_ary = ['shiyue', 'ansheng']; | ||
定义一个学生对象 let student_obj = { name: 'xx' }; | ||
定义学生的名字 let name = 'HanMeimei'; | ||
B: 函数变量名 | ||
函数名推荐采用驼峰命名 | ||
如: | ||
获取学生姓名的方法: let getName = function(){} ---方式1 | ||
可能有人会这样定义: let getStudentName = function(){} ---方式2 | ||
这2种方式哪个更好呢? | ||
如果这个脚本或者说这个文件中有获取学生姓名和获取老师姓名2个需求,那我觉得方式2更合适,如果只有获取学生姓名这1个需求,那方式1更简单合适; | ||
获取学生这个对象: let getStudent = function(){} | ||
因为student就是1个对象,所以我们不需要写成getStudentObj,阅读我们代码的人也能一目了然的想到这是获取学生对象; | ||
C: 事件监听函数命名 | ||
事件监听函数命名建议采用onXXX开头的驼峰式命名 | ||
如: | ||
监听一个下拉选择组件的change事件: let onSelectChange = function(e){...} | ||
当一个页面中需要注册多个下拉选择组件的change事件时我们又该如何定义? | ||
这个时候直接写onSelectChange显然不太合适了, | ||
如筛选条件中 学生对象的改变; 性别的改变 | ||
onStudentChange(){} | ||
onSexChange(){} | ||
!important | ||
D:关于变量名的简写 | ||
很多时候我们的变量名需要多个单词拼接,但是我们又不想让这个变量名太长,很难取舍 | ||
如: | ||
定义未读消息条数,我看到有人是这样定义的 let notRead = 0; | ||
显然这个变量很糟糕, 首先否定修饰很多时候只需要在单词前面加上un, 比如我们js中的defined <-> undefined,其次,我们在定义记数相关时一般都会使用count | ||
let unReadCount = 0; ---方式1 | ||
let notRead = 0; ---方式2 | ||
显然方式1更优雅,一看就知道是个数量的定义,而方式2更像是一个未读的Flag标记,很难让人直接和未读条数联系起来; | ||
E: 逻辑关系 | ||
如: | ||
在vue中定义一个是否显示的标记: v-if="isShow" | ||
isShow是true就是显示,false就是隐藏,这样我们的代码逻辑就会很清晰; | ||
现在我们看2个很糟糕的例子: | ||
同样是在vue中定义是否显示的标记: | ||
v-if="isHide" | ||
v-if="!isHide" | ||
这2中方式都不好,我们的原则就是能避免使用否定的就尽量不要使用否定,不管单个否定还是双向否定,总之正向的逻辑会更清晰; | ||
要洗澡睡觉了,对于css样式的命名下一篇再介绍 |
JavaScript命名规范基础及系统注意事项的更多相关文章
- javascript命名规范
javascript命名规范 3.命名 命名的方法通常有以下几类: a).命名法说明 1).camel命名法,形如thisIsAnApple 2).pascal命名法,形如ThisIsAnApple ...
- CSS命名规范参考及书写注意事项
CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ ...
- Java命名规范基础
一.java命名规范 1.类和接口:由多个单词组成时,所有单词的首字母大写,如TestJava 2.变量名和方法(函数):由多个单词组成时,所有第一个单词的首字母小写,之后每一个单词的首字母大写,如: ...
- JavaScript发展史,与JScript差别,引入方式,数据类型,命名规范,命名推荐,解决命名冲突
文件夹: 1.JavaScript发展史 2.JavaScript与JScript差别 3.JavaScript引入方式 4.JavaScript基本数据类型及布尔值 5.JavaScript命名规范 ...
- mysql命名规范
1.数据库表命名规范: (1)表名前应该加上前缀,表的前缀一个用系统或模块的英文名称缩写,前缀全部大写或首字母大写,表名中包含的单词首字母大写. (2)数据库表名应该有意义,并且易于理解,最好使用可以 ...
- Web UI 网站用户界面设计命名规范
Web UI 网站用户界面设计命名规范 WEB UI设计命名规范,也就是网站用户界面设计(网页设计)命名规范. 这套规范并非单纯的CSS.html或JavaScript命名规范,它涉及了很多使用Pho ...
- 初识 Javascript.01 -- Javascript基础|输出方式、变量、变量命名规范、数据类型、
Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司 研发出世界上第一款浏览器. 95年 sun公司 java语言诞生 网景公司和su ...
- JavaScript var关键字、变量的状态、异常处理、命名规范等介绍
本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...
- 常用html、CSS、javascript前端命名规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
随机推荐
- 识别拖动与点击操作之zepto的bug
问题描述:给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以响应.但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击 ...
- linux抓包工具tcpdump使用总结
tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上 1.格式 # tcpdump --help tcpdump version 4.1-PRE-CVS_2012_0 ...
- NEO GUI 多方签名使用
众所周至,NEOGUI是一个开发者演示用钱包,使用体验是非常的不友好的. 今天本来打算使用多方签名账户,发现和想象的不一样,请教了小伙伴也不行.遂调试了一下原因,发现踩进坑里了. 把这个问题记 ...
- js 复制(自动)
<script type="text/javascript"> document.writeln("<input type=\'text\' id=\' ...
- 认识vim 编辑器
vim编辑器 vim编辑器的重点是光标的移动,模式切换,删除,查找,替换,复制,撤销命令的使用. vim 有三种模式: 命令模式,编辑模式,末行模式 vim打开方式: 语法: vim 文件路径 vim ...
- helm-chart6,子chart 和全局值
chart可以有称为子chart的依赖关系 关于子chart 1,子chart认为是"独立的",即子chart不能明确依赖于其父chart. 2,子chart无法访问其父项的值. ...
- Centos7 编译安装 Nginx PHP Mariadb Memcache扩展 ZendOpcache扩展 (实测 笔记 Centos 7.0 + Mariadb 10.1.9 + Nginx 1.9.9 + PHP 5.5.30)
环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7-x86_64-Minimal-1503-01.iso 安装步骤: 1.准备 1.1 ...
- Redis 中可以存储的五种基本类型
具体介绍 数字还是字符? String(字符串) 二进制安全 可以包含任何数据,比如jpg图片或者序列化的对象,一个键最大能存储512M --- Hash(字典) 键值对集合,即编程语言中的Map类型 ...
- 白盒测试实践-day03
一.任务进展情况 完成了基本的测试过程,下一步整理文档. 二.存在的问题 对于JUnit测试,对测试系统还不是太了解,导致测试脚本无法写. 三.解决方法 熟悉测试系统的结构,上网搜集资料.
- jenkins配置自动发送邮件,抄送
1.安装插件.系统管理-安装插件:可选插件:搜索Email Extension 2.设置全局变量.系统管理-系统设置:a.Jenkins Location 设置发送方邮件--- b.Extended ...