超全面的JavaScript开发规范(推荐)


Posted in Javascript onJanuary 21, 2017

这篇文章主要介绍的是关于JS的命名规范、注释规范以及框架开发的一些问题,首先来看看目录。

目录

1. 命名规范:介绍变量、函数、常量、构造函数、类的成员等等的命名规范

2. 注释规范:介绍单行注释、多行注释以及函数注释

3. 框架开发:介绍全局变量冲突、单全局变量以及命名空间

一、命名规范

驼峰式命名法介绍:

驼峰式命名法由小(大)写字母开始,后续每个单词首字母都大写。

按照第一个字母是否大写,分为:

     ① Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo、UserInfo、ProductInfo

     ② Camel Case 小驼峰式命名法:首字母小写。eg:studentInfo、userInfo、productInfo

1.1 变量

命名方法:小驼峰式命名法。

命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)

命名建议:尽量在变量名字中体现所属类型,如:length、count等表示数字类型;而包含name、title表示为字符串类型。

示例:

// 好的命名方式
var maxCount = 10;
var tableTitle = 'LoginTable';
 
// 不好的命名方式
var setCount = 10;
var getTitle = 'LoginTable';

1.2 函数

命名方法:小驼峰式命名法。

命名规范:前缀应当为动词。

命名建议:可使用常见动词约定

动词 含义 返回值
can 判断是否可执行某个动作(权限) 函数返回一个布尔值。true:可执行;false:不可执行
has 判断是否含有某个值 函数返回一个布尔值。true:含有此值;false:不含有此值
is 判断是否为某个值 函数返回一个布尔值。true:为某个值;false:不为某个值
get 获取某个值 函数返回一个非布尔值
set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
load 加载某些数据 无返回值或者返回是否加载完成的结果

示例:

// 是否可阅读
function canRead() {
 return true;
}
 
// 获取名称
function getName() {
 return this.name;
}

1.3 常量

命名方法:名称全部大写。

命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词。

命名建议:无。

示例:

var MAX_COUNT = 10;
var URL = 'http://www.baidu.com';

1.4 构造函数

介绍:在JS中,构造函数也属于函数的一种,只不过采用new 运算符创建对象。

命名方法:大驼峰式命名法,首字母大写。

命名规范:前缀为名称。

命名建议:无。

示例:

function Student(name) {
 this.name = name;
}
 
var st = new Student('tom');

1.5 类的成员

类的成员包含:

① 公共属性和方法:跟变量和函数的命名一样。

② 私有属性和方法:前缀为_(下划线),后面跟公共属性和方法一样的命名方式。

示例:

function Student(name) {
 var _name = name; // 私有成员
 
 // 公共方法
 this.getName = function () {
 return _name;
 }
 
 // 公共方式
 this.setName = function (value) {
 _name = value;
 }
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry:输出_name私有变量的值

二、 注释规范

JS支持两种不同类型的注释:单行注释和多行注释。

2.1 单行注释

说明:单行注释以两个斜线开始,以行尾结束。

语法:// 这是单行注释

使用方式:

      ① 单独一行://(双斜线)与注释文字之间保留一个空格。

      ② 在代码后面添加注释://(双斜线)与代码之间保留一个空格,并且//(双斜线)与注释文字之间保留一个空格。

      ③ 注释代码://(双斜线)与代码之间保留一个空格。

示例:

// 调用了一个函数;1)单独在一行
setTitle();
 
var maxCount = 10; // 设置最大量;2)在代码后面注释
 
// setName(); // 3)注释代码

2.2 多行注释

说明:以/*开头,*/结尾

语法:/* 注释说明 */

使用方法:

      ① 若开始(/*)和结束(*/)都在一行,推荐采用单行注释。

      ② 若至少三行注释时,第一行为/*,最后行为*/,其他行以*开始,并且注释文字与*保留一个空格。

示例:

/*
* 代码执行到这里后会调用setTitle()函数
* setTitle():设置title的值
*/
setTitle();

2.3 函数(方法)注释

说明:函数(方法)注释也是多行注释的一种,但是包含了特殊的注释要求,参照 javadoc(百度百科)。

语法:

/** 
* 函数说明 
* @关键字 
*/

常用注释关键字:(只列出一部分,并不是全部)

注释名 语法 含义 示例
@param @param 参数名 {参数类型}  描述信息 描述参数的信息 @param name {String} 传入名称
@return @return {返回类型} 描述信息 描述返回值的信息 @return {Boolean} true:可执行;false:不可执行
@author @author 作者信息 [附属信息:如邮箱、日期] 描述此函数作者的信息 @author 张三 2015/07/21 
@version @version XX.XX.XX 描述此函数的版本号 @version 1.0.3
@example @example 示例代码 演示函数的使用 @example setTitle('测试')

示例:

/**
* 合并Grid的行
* @param grid {Ext.Grid.Panel} 需要合并的Grid
* @param cols {Array} 需要合并列的Index(序号)数组;从0开始计数,序号也包含。
* @param isAllSome {Boolean} :是否2个tr的cols必须完成一样才能进行合并。true:完成一样;false(默认):不完全一样
* @return void
* @author polk6 2015/07/21 
* @example
* _________________ _________________
* | 年龄 | 姓名 | | 年龄 | 姓名 |
* ----------------- mergeCells(grid,[0]) -----------------
* | 18 | 张三 | => | | 张三 |
* ----------------- - 18 ---------
* | 18 | 王五 | | | 王五 |
* ----------------- -----------------
*/
function mergeCells(grid, cols, isAllSome) {
 // Do Something
}

三、框架开发

3.1 全局变量冲突

在团队开发或者引入第三方JS文件时,有时会造成全局对象的名称冲突,比如a.js有个全局函数sendMsg() ,b.js也又有个全局函数sendMsg() ,引入a.js和b.js文件时,会造成sendMsg()函数冲突。

示例:

超全面的JavaScript开发规范(推荐) 

3.2 单全局变量

所创建的全局对象名称是独一无二的,并将所有的功能代码添加到这个全局对象上。调用自己所写的代码时,以这个全局对象为入口点。

如:

* JQuery的全局对象:$和JQuery

* ExtJS的全局对象: Ext

示例:

超全面的JavaScript开发规范(推荐) 

3.3 命名空间

在项目规模日益壮大时,可采用命名空间方式对JS代码进行规范:即将代码按照功能进行分组,以组的形式附加到单全局对象上。

以Ext的chart模块为例:

超全面的JavaScript开发规范(推荐)

总结

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

Javascript 相关文章推荐
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
Mongoose学习全面理解(推荐)
Jan 21 #Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 #Javascript
vue实现添加标签demo示例代码
Jan 21 #Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 #Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 #Javascript
Bootstrap框架安装使用详解
Jan 21 #Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 #Javascript
You might like
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
了解重排与重绘
2019/05/29 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
Python3遍历目录树实现方法
2015/05/22 Python
Python中for循环控制语句用法实例
2015/06/02 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python 美化输出信息的实例
2018/10/15 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
致100米运动员广播稿
2014/02/14 职场文书
公证委托书模板
2014/04/03 职场文书
2014年客房部工作总结
2014/11/22 职场文书
高三英语教学计划
2015/01/23 职场文书
统计员岗位职责范本
2015/04/14 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python