JavaScript编码规范.md

JavaScript编码规范

目录

• 数据类型
• 字符串
• 对象
• 数组
• 函数

1数据类型

1.1 基本数据类型

基本数据类型访问的是值，有5种基本数据类型：

• srting：字符串类型
• number：数字类型，可表示整数和浮点数
• boolean：布尔类型，取值true或false
• null：null类型，表示空对象
• undefined：undefined类型，表示未声明或者未赋值

var foo; // 当前foo为undefined
foo = 'Hello world!';
foo = 1024;
foo = true;
foo = null;

1.2 复杂数据类型

复杂数据类型访问的是引用，本质都是对象，常用的有：

• Object：对象
• Array：数组
• Function：函数

var foo = {
   name: '同程旅游',
   foundedTime: '2014年'
};
var bar = ['火车票', '机票', '汽车票', '酒店'];
function sayHi(name) {
    return 'Hi! ' + name + '.';
}

1.3 数据类型判断

typeof null类型判断、instanceof(会涉及到原型)、Array、toString

2字符串

2.1 字符串使用单引号''包裹

字符串使用单引号带来的好处是字符串内的双引号不需要转义。

var name = '同程旅游';
var htmlStr = '<a href="//www.ly.com">同程旅游</a>';

2.2 字符串长度超过了100个字符，应该分成多行。

2.3 不要使用多行字符串语法，多行字符串应该使用加号+进行连接（现代浏览器、以及IE8之后的浏览器已经对加号+字符串连接做过优化，不再需要使用数组join的方式）。

// bad
var htmlStr = '<div id="topLogin">\
    <span>您好，欢迎使用LY.com访问同程！</span>\
    <a class="login" rel="nofollow" href="https://passport.ly.com/">登录</a>\
    <a class="register" rel="nofollow" href="https://passport.ly.com/register/index/">注册</a>\
</div>';

// good
var htmlStr = '<div id="topLogin">' +
    '<span>您好，欢迎使用LY.com访问同程！</span>' +
    '<a class="login" rel="nofollow" href="https://passport.ly.com/">登录</a>' +
    '<a class="register" rel="nofollow" href="https://passport.ly.com/register/index/">注册</a>' +
'</div>';

3对象

3.1 使用对象字面值创建对象。

// bad
var foo = new Object();
foo.name = '同程旅游';
foo.foundedTime = '2014年';

// good
var foo = {
   name: '同程旅游',
   foundedTime: '2014年'
};

3.2 避免使用保留组来作为对象的属性名，因为IE8是不允许使用保留字作为对象的属性名，如果要兼容IE8的话一定不能使用，否则会出错

参考：保留字列表

/*  bad  */
var foo = {
   default: ''
};

/*  good  */
var foo = {
   def: ''
};

3.3 非法标识符作为属性名需要使用引号''包裹，而且仅对非法标识符使用引号

/*  bad  */
var foo = {
   'name': '同程旅游',    // name不需要使用引号
   'founded-time': '2014年'
};

/*  good  */
var foo = {
   name: '同程旅游',
   'founded-time': '2014年'
};

3.4 删除对象的属性使用delete操作符，把属性值赋值为undefined达不到删除属性的目的

var foo = {
   name: '同程旅游',
   foundedTime: '2014年'
};
foo.name = undefined;    // name属性的值为undefined，但是name属性还存在
delete foo.foundedTime;

4数组

4.1 使用数组字面值创建数组

/*  bad  */
var foo = new Array();

/*  good  */
var foo = [];

4.2 数组的操作尽量使用数组对象的方法，这样性能更好

4.3 在数组末尾插入数据时使用数组的push方法，而不是通过索引直接赋值

var foo = ['火车票', '机票', '汽车票', '酒店'];
foo[foo.lenght] = '景点门票';    // bad
foo.push('周边游');    // good

4.5 对数组进行拷贝使用slice方法，这里拷贝是浅拷贝，深拷贝需要另行实现

var foo = ['火车票', '机票', '汽车票', '酒店'];
var bar = foo.slice();

4.6 把类数组对象装换成数组使用slice方法

var foo = document.querySelectorAll('p');
var bar = Array.prototype.slice.call(foo);

4.7 清空数组有3种方式

var foo = ['火车票', '机票', '汽车票', '酒店'];
foo.splice(0, foo.length);    // 保留数组引用，清空数组
foo.length = 0;    // 保留数组引用，清空数组
foo = [];   // 用一个新数组代替，性能最高

4.8 删除数组元素使用splice方法