1. 缩进
- 永远不要混用空格和Tab。
- 为了可读性，部门统一建议使用2个空格宽度的缩进。
2. 语法
A. 变量命名
当创建变量时，建议在变量名前加上一个字母以表示该变量的类型，如：
var sName = 'test'; // 表示String类型
var nAge = 18; // 表示Number类型
var bShow = true; // 表示Bool类型
var aSkill = ['skill1', 'skill2', 'skill3']; // 表示Array类型
var fRun = funtion() {}; // 表示Function类型
var rTmp = new RegExp('e', 'g'); // 表示RegExp类型
var oData = {}; // 表示Object类型
另外，在命名时，还需要注意下面几点：
- 所有命名最好使用英语表示。
- 所有变量名应该明确而必要，尽量避免不必要的容易混淆的缩写。
- 对应的方法应该使用对应的动词，例如： get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。
- 尽量避免复杂的条件语句，可以使用临时的boolean变量代替。
- 不要在代码中重复使用有意义的数字，数字无法说明自身，请用变量代替。常量的形式如: NAMES_LIKE_THIS, 命名使用大写字符, 并用下划线分隔。
- 模块内dom对象，带$符号前缀，例如：$dom
B. js格式规范
- 操作符前后要保留1个空格，提升代码可读性，每行代码结束添加分号。
var nBase = 7;
var nNum = nBase + 1;
- 使用括号和空格来提升可读性
- if/for/try等判断语句通常都有小括号、花括号和多行,建议换行
// 错误的例子
if(condition) doSomething();
// 正确的例子
if (nBase > nNum) {
// 语句
} else {
// 语句
}
for (var i = 0, len = 100; i < len; i++) {
// 语句
}
- 同一个方法中或闭包中，变量定义统一在顶部
// 错误的例子
var a = 1;
a = a - 1;
var b = 2;
b = a - 2;
// 正确的例子
var a = 1;
var b = 2;
a = a - 1;
b = a - 2;
- 单引号 (') 优于双引号 (")，尤其是当你创建一个包含 HTML代码的字符串，所以在项目中要统一引号的使用，并保持一致。
var str = 'test';
- 提前返回函数结果，提升代码的可读性
// 不好:
function returnLate( foo ) {
var ret;
if ( foo ) {
ret = "foo";
} else {
ret = "quux";
}
return ret;
}
// 好:
function returnEarly( foo ) {
if ( foo ) {
return "foo";
}
return "quux";
}
C. js变量类型检测和转换
- 判断类型
// String:
typeof variable === 'string'
// Number:
typeof variable === 'number'
// Boolean:
typeof variable === 'boolean'
// Object:
typeof variable === 'object'
// Array: (如果可能的话)
Array.isArray( arrayLikeObject )
// Node:
elem.nodeType === 1
// null:
variable === null
// null or undefined:
variable == null
// undefined:
// a.全局变量
typeof variable === 'undefined'
// b.局部变量
variable === undefined
// c.属性
object.prop === undefined
object.hasOwnProperty(prop)
'prop' in object
- 转换类型
* -> Number:
nTmp = +sTmp;
* -> String:
sTmp = nTmp + ‘’;
* -> Bool:
bTmp = !!oTmp;
- 取整
var num = 2.5;
parseInt( num, 10 );
// 等价于...
~~num;
// 去除变量中的英文
parseInt('25px'); // 25
D. 判断
// 当只是判断一个 array 是否有长度:
if ( array.length ) ...
// 当只是判断一个 array 是否为空:
if ( !array.length ) ...
// 当只是判断一个 string 是否为空:
if ( !string ) ...
// ...需要注意的是：这个将会匹配 0, ’’, null, undefined, NaN
// 如果你 _必须_ 是布尔类型的 false，请这样用：
if ( foo === false ) ...
// 但注意下面的值都返回 true:
'0' 字符串0
[] 空数组
{} 空对象
3. 闭包示例
在日常的项目中，我们通常会使用统一的闭包格式，需要注意下面几点：
- 通常我们把交互中使用的元素缓存到ui对象中以提高性能，特别是需要多次调用的元素。
- 在oPage模块中, init主要用于初始化程序，view和listen通常分别用于处理界面的初始化和事件绑定。
- 在闭包中，统一使用self指代this。
(function ($) {
var ui = {
$pageWrap: $('#page-wrap'),
$btnConfirm: $('#btn-confirm')
};
var oPage = {
init: function() {
this.view();
this.listen();
},
view: function() {
var self = this;
ui.$pageWrap.show();
},
listen: function() {
var self = this;
//关闭弹窗
ui.$btnConfirm.on('click', function(){
self.fHidePage();
});
},
fHidePage: function() {
var self = this;
ui.$pageWrap.hide();
}
};
oPage.init();
})($);
4. js使用class选择器时，class要单独加前缀“js-”，例如：“js-main”，避免与css样式使用同样类名。
$main = $('.js-main');
5. 事件绑定
a. 禁止直接用onxxx绑定事件,如：
document.onclick = function(e){
// do something
}
b. 在使用jQuery的项目中，建议使用on()的实现事件绑定或代理。
$(document).on('click', '.btn', function(e) {
// do something
});
c. 若项目采用纯原生js开发，建议使用addEventListener实现事件代理和绑定。
window.addEventListener('click', function(e) {
// do something
}, false);
6. ajax规范
在前后端合作的项目中基本都会用到ajax请求数据，通常我们使用jQuery库，以实现更便捷的ajax操作和模拟数据请求。
a. 通常在index.html下声明以下对象，oData存储一些程序中可能会修改的变量，如倒计时的时间；oUrl存储后端数据接口的地址，如下发抽奖的地址。
window.oPageConfig = {
oUrl: {
sLottery: '/lottery'
},
oData: {
nLotteryTimes: 60
}
}
b. 通常我们与后端约定的数据包含交互格式如下：
var msg = {
code: 0,
message: 'success',
data: {
id: 7,
name: 'prize'
}
};
其中，当code == 0则表示请求成功，此时data对象中会包含所需的数据，若code != 0，message则会返回失败的原因。
$.ajax({
type: 'get',
data: {},
dataType : 'JSON',
url: window.oUrl.lottery
}).done(function (msg){
if (0 == msg.code) {
// code == 0 表示成功
}else{
// code ！= 0 表示请求失败
};
});
7. ajax数据模拟规范
统一使用http://rap.imeete.com ，用户名指域账号，密码自己设置。
- 使用之前进行host绑定，192.168.136.105 rap.imeete.com
- 如果未开通，请找王春青
8. 注释
a. 代码应添加必要的注释，注释有意义且易懂
b. 在每个js文件头部插入以下注释，便于后期快速了解js文件所包含的功能和负责人。
/* ==========================================================
* xxx.js v201xMMDD
* ==========================================================
* by xxx
*
* 1、功能1
* 2、功能2
* ========================================================== */
c.函数注释方式如下：
/**
* 取消事件
*
* @param {Element} el dom元素
* @param {String} event 事件
* @param {Boolean} cb 冒泡
* @param {Number} type 类型，可选1(上线),2(下线)
*/
export function off(el, event, cb = false) {
el.removeEventListener(event, cb);
}
9. 后台项目
项目结构
待更新
代码结构
待更新