PEPSICHE
新手
新手
  • 最后登录2019-06-07
  • 发帖数3
阅读:5889回复:0

[javascript]前端代码中经常遇到的一些问题

楼主#
更多 发布于:2019-02-18 09:04
在使用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[^>]*>([\s\S]*?)<\/script>/gi, ""); // Do some more cleaning, maybe whitespace, etc. return clean;
}

上面的代码会不断的重复创建一个新的(但是相同的)正则表达式对象,对于这种情况,如果你在这个函数的外部创建这个对象,就能避免这种情况的出现:
var scriptRegex = /<script[^>]*>([\s\S]*?)<\/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;
    } return sum / (this.data.length);
}

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

手机设备事件绑定问题


手机设备事件绑定类型不正确,比如用click 在ios 设备上是失效的,应该换成 touchend或者 touchstart
如果需要的话可以用
$.bind('click touchend' ,function(event){...});
摘录自作者yun.kou
游客


返回顶部

公众号

公众号