前端代码中经常遇到的问题

虽然现在有很多代码质量的检测工具但是依然不能检测完全，一下几点是我们在写前端代码中经常遇到的问题。

重复的收集元素

在使用jQuery或者Zepto，原生的元素选择器的时候，重复收集元素。

$(".items").addClass("hide");
$(".items").removeClass("hide");

这种问题遇到的比较多，其实在webstrom中会有红字提醒标示。告诉你不推荐你这样使用。
可以

var $items = $(".items");
$items.addClass("hide");
$items.removeClass("hide");

重复的条件判断

重复的条件计算很常见，但通常也是有一个通用的模式来避免它们。你可能会看到一段代码写成这样：

var performMiracle = function() {
	// 如果浏览器支持A特征...
	if(features.someFeature) {
	}
	// ... 如果不支持
	else {
	}
};

这是可行的，但不是最高效的代码，上面的条件可能会多次计算。写成下面的样子会更好：

var performMiracle = features.someFeature ? function() {
	// Plan A stuff
} : function() {
	// Plan B stuff
};

重复的对象创建

相比较重复的操作，重复的对象创建更难发现，通常是表现在正则表达式上。看一下下面的这段代码：

function cleanText(dirty) {
	// 去除SCRIPT tags
	clean = dirty.replace(/<script[^>]*>([sS]*?)</script>/gi, "");
	// Do some more cleaning, maybe whitespace, etc.
	return clean;
}

上面的代码会不断的重复创建一个新的(但是相同的)正则表达式对象，对于这种情况，如果你在这个函数的外部创建这个对象，就能避免这种情况的出现：

var scriptRegex = /<script[^>]*>([sS]*?)</script>/gi;
function cleanText(dirty) {
	// Get rid of SCRIPT tags
	clean = dirty.replace(scriptRegex, "");
	// Do some more cleaning, maybe whitespace, etc.
	return clean;
}

在上面的例子中，正则表达式对象只创建了一次，但多次使用——省了很多CPU处理。

---

以下为自己的常遇到收集整理

忘记声明数据类型

下面这份代码

function mean() {
    var sum;
    for (var i = 0; i < this.data.length; i++){
        sum += this.data[i];
    }
    return sum / (this.data.length);
} 

乍一看没说明问题，但是返回的结果却是NaN；如果做number类型叠加记得声明 var sum = 0；没有什么大的错误就是很容易忽略的小问题。

手机设备事件绑定问题

手机设备事件绑定类型不正确，比如用click 在ios 设备上是失效的，应该换成 touchend或者 touchstart

如果需要的话可以用

$.bind('click touchend' ,function(event){...});

---

未完结