前端代码中的自定义变量命名
     
    命名方法:
    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命名规范基础及系统注意事项的更多相关文章

  1. javascript命名规范

    javascript命名规范 3.命名 命名的方法通常有以下几类: a).命名法说明 1).camel命名法,形如thisIsAnApple 2).pascal命名法,形如ThisIsAnApple ...

  2. CSS命名规范参考及书写注意事项

    CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ ...

  3. Java命名规范基础

    一.java命名规范 1.类和接口:由多个单词组成时,所有单词的首字母大写,如TestJava 2.变量名和方法(函数):由多个单词组成时,所有第一个单词的首字母小写,之后每一个单词的首字母大写,如: ...

  4. JavaScript发展史,与JScript差别,引入方式,数据类型,命名规范,命名推荐,解决命名冲突

    文件夹: 1.JavaScript发展史 2.JavaScript与JScript差别 3.JavaScript引入方式 4.JavaScript基本数据类型及布尔值 5.JavaScript命名规范 ...

  5. mysql命名规范

    1.数据库表命名规范: (1)表名前应该加上前缀,表的前缀一个用系统或模块的英文名称缩写,前缀全部大写或首字母大写,表名中包含的单词首字母大写. (2)数据库表名应该有意义,并且易于理解,最好使用可以 ...

  6. Web UI 网站用户界面设计命名规范

    Web UI 网站用户界面设计命名规范 WEB UI设计命名规范,也就是网站用户界面设计(网页设计)命名规范. 这套规范并非单纯的CSS.html或JavaScript命名规范,它涉及了很多使用Pho ...

  7. 初识 Javascript.01 -- Javascript基础|输出方式、变量、变量命名规范、数据类型、

    Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司   研发出世界上第一款浏览器. 95年 sun公司   java语言诞生 网景公司和su ...

  8. JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

    本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...

  9. 常用html、CSS、javascript前端命名规范

    无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...

随机推荐

  1. 配置ubuntu的超管账号密码

    1 在搭建ubuntu 之后 只有自己的账号 2 root 用户是没有配置好的 需要重新配置 3 passwd root 4 输入新密码即可

  2. web服务-3、epoll高效率实现并发服务器

    知识点: 之前写的四种方法实现并发服务效率都还是低,早期的服务器采用的是select和poll方式,select这种方式的特点是轮询所有套接字去一个个看有没有事件发生,但是装套接字的列表长度是有限制的 ...

  3. (三)ajax请求不同源之cors跨域

    一.基本原理 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出 XMLHttpReque ...

  4. Python退火算法在高次方程的应用

    一,简介 退火算法不言而喻,就是钢铁在淬炼过程中失温而成稳定态时的过程,热力学上温度(内能)越高原子态越不稳定,而温度有一个向低温区辐射降温的物理过程,当物质内能不再降低时候该物质原子态逐渐成为稳定有 ...

  5. Mysql5.7 单表 500万数据迁移到新表的快速实现方案

    开发过程中需要把一个已有500万条记录的表数据同步到另一个新表中,刚好体验下Mysql官方推荐的大数据迁移的方案:SELECT INTO OUTFILE,LOAD DATA INFILE Mysql ...

  6. 【C语言程序】基因编码

    输入一个长为n=2k(k≤8)01串s,按照"ABC编码规则"进行编码,ABC编码规则是: A                      //若s串全是0 T(s)=        ...

  7. jquery第一篇

    1  jquery是什么 <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继 ...

  8. (61)Wangdao.com第十天_JavaScript 立即执行函数

    1. 立即执行函数 创建完了就执行,只执行完就不再执行了. ( function(){} )(); 例 ( function(a,b){ alert("Hello ,我是一个匿名函数!&qu ...

  9. JS-函数声明 和 函数表达式

    问题: 1, function foo() {}; 2, var foo = function () {}; 1,上面的语法是声明,可以提升,因此在函数定义的上方也可以调用 2,下面的语法是函数表达式 ...

  10. [EOJ Monthly 2018.10][C. 痛苦的 01 矩阵]

    题目链接:C. 痛苦的 01 矩阵 题目大意:原题说的很清楚了,不需要简化_(:з」∠)_ 题解:设\(r_i\)为第\(i\)行中0的个数,\(c_j\)为第\(j\)列中0的个数,\(f_{i,j ...