js规范
协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用js工具类, 协作开发过程中, 此文件不可随意修改.
命名格式
全局变量, 使用全大写字母,并用下划线分隔单词
var CONST_NAME_LIKE_THIS = {};
let CONST_NAME_LIKE_THIS ={};
const CONST_NAME_LIKE_THIS = {};
局部变量, 使用 Camel 命名法。
var loadingModules = {};
私有属性、变量和方法以下划线 _ 开头。
var _privateMethod = {};
函数
> 使用 Camel 命名法。
> 参数, 使用 Camel 命名法。
> 可使用常见动词约定。
> 构造函数
function stringFormat (source) {}
function hear (theBells) {}
/* not recommended */
function canRead() {
return true;
}
/* recommended */
function getName() {
return this.name;
}
类
> 使用 Pascal 命名法。
> 方法 / 属性, 使用 Camel 命名法。
> 公共属性和方法:跟变量和函数的命名一样。
> 私有属性和方法:前缀为_(下划线),后面跟公共属性和方法一样的命名方式。
> 前缀为名称。
function Student(name) {
this.name = name;
}
var st = new Student('tom');
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私有变量的值
function TextNode(value,engine) {
this.value = value;
this.engine = engine;
}
TextNode.prototype.clone = function(){}
枚举
> 变量 使用 Pascal 命名法。
> 枚举的属性, 使用全部字母大写,单词间下划线分隔的命名方式。
var TargetState = {
READING: 1,
READED:2,
APPLIED:3,
READY:4
}
接口命名规范
> 可读性强,见名晓义。
> 尽量不与 jQuery 社区已有的习惯冲突。
> 尽量写全。不用缩写,除非是下面列表中约定的;(变量以表达清楚为目标,uglify 会完成压缩体积工作)。
True 和 False 布尔表达式
> 类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。
> 下面的布尔表达式都返回 false:
* null
* undefined
* ‘’ 空字符串
* 0 数字0
> 但小心下面的, 可都返回 true:
* ‘0’ 字符串0
* [] 空数组
* {} 空对象
不要在 Array 上使用 for-in 循环
> for-in 循环只用于 object/map/hash 的遍历, 对 Array 用 for-in 循环有时会出错. 因为它并不是从 0 到 length - 1 进行遍历, 而是所有出现在对象及其原型链的键值。
/* not recommended */
function printArry (arr) {
for (var key in arr) {
print(arr[key])
}
}
printArry([0,1,2,3,4,5,6]) // this is right.
var a = new Array(10)
printArry(a) // this is wrong.
a = document.getElementTagName("*")
printArry(a) // this is wrong.
a = [0,1,2,3,4,5]
a.bunu = "aaaa"
printArry(a) // this is wrong.
a = new Array
a[3] = 2
printArry(a) // this is wrong.
/* recommended */
function printArry (arr) {
var len = arr.length
for (var i=0, i<len; i++) {
print(arr[i])
}
}
二元和三元操作符
> 操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。
> 操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。如果一行放不下, 还是按照上述的缩进风格来换行。
var x = a ? b : c
var y = a ?
moreComplicateB :
moreComplicateC
. 操作符
var x = foo.bar().
doSomeThing().
doSomeThingEls()
条件(三元)操作符 (?:)
> 三元操作符用于替代 if 条件判断语句。
/* not recommended */
if (val != 0) {
return foo()
}else {
return bar()
}
/* recommended */
return val ? foo() : bar()
&& 和 ||
> 二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项。
/* not recommended */
function foo (opt_win) {
var win
if(opt_win) {
win = opt_win
} else {
win = window
}
// ...
}
if (node) {
if(node.kids){
if(node.kids[index]){
foo(node.kids[index])
}
}
}
/* recommended */
function foo (opt_win) {
var win = opt_win || window
// ...
}
var kid = node && node.kids && node.kids[index]
if(kid){
foo(kid)
}
由多个单词组成的 缩写词,在命名中,根据当前命名法和出现的位置,所有字母的大小写与首字母的大小写保持一致。
圆括号
> 圆括号在 JavaScript 中有两种作用,一种表示调用函数,一种表示不同的值的组合。只在必要的时候使用圆括号。
> 对于一元操作符(如delete、typeof、void),或是在某些关键词(如 return、throw、case、new)之后,不要使用括号。
字符串
> 字符串使用单引号,只有 JSON 中的字符串属性值使用双引号。
> 符串中的 HTML 属性使用双引号。
空行
> 使用空行来划分一组逻辑上相关联的代码片段。文件末尾空一行。
注释
> 编码时一定注意写好注释,页面结构和样式的动态变化和添加,打好注释,便于后台同事套页面时候的阅读。
> Js做到主要代码、方法、参数的行行注释说明,便于其他同事了解你做此功能的思路,避免代码的冗余,造成性能问题,尽量做到高内聚低耦合。
// Js推荐注释,注释符号与注释说明之间空一个空格,单行
// var sellEle = document.querySelector('.sell');
// Js推荐注释,注释符号一上一下覆盖整个要注释的区块,多行注释
/*
var sellEle = document.querySelector('.sell');
console.log(sellEle);
*/
> 函数(方法)注释
/**
* 函数说明
* @关键字
*/
/**
* 合并Grid的行
* @param {Grid} grid 需要合并的Grid
* @param {Array} cols 需要合并列的Index(序号)数组;从0开始计数,序号也包含。
* @param {Boolean} isAllSome 是否2个tr的cols必须完成一样才能进行合并。true:完成一样;false(默认):不完全一样
* @return void
* @author barry
*/
function mergeCells(grid, cols, isAllSome) {
// Do Something
}
参考文档
js:主要有缩进,换行,变量名称,括号,文档注释等等。可以参考:
ps:建议大家在各个产品,严格遵守规范,以便后期的维护以及代码的健壮性等。
如果文档有更好的补充和好的建议,欢迎联系@博主
如有雷同,请联系@博主。
g-sign=npMPSzuJG7Aaeie1cxsp851zLR8%3D)