前端js这些细节你注意到了吗

作者:admin / 时间:3年前 (2017/07/12) / 分类:前端开发 / 阅读:394 / 评论:0

如今做前端的人越来越多,有转行的、有专业的,都在学前端开发,原因很简单,前端开发现在的平均薪水在10K左右,那如何学好前端,走在先锋道路莫过于学好javascript,当然学好它并没那么容易,而且相当头疼,今天小编就分享些js需要注意的方面,帮助大家学习。

前端js这些细节你注意到了吗

  1. 使用{}代替new object()

    在javascript中创建对象的方法有很多种,可能是传统的方法是使用“new”加构架函数,如下:

    ar o=new object();

    o.name='jeffrey';

    o.lastName='Way';

    0.someFunction=function(){

    console.log(this.name);

然而这种方法的受到的诟病不及实际上多。作为代替,建议使用更健壮的对象字面量方法。如下

var o={

name:'jeffey',

lastName='way',

someFunction:function(){

console.log(this.name);

}

};

注意:如果只是想创建一个空对象,{}更好。

2.定义多个变量时,省略var关键字,用逗号代替

var someItem = 'some string';

var anotherItem = 'another string';

var oneMoreItem = 'one more string';

// 更好的做法

var someItem = 'some string',

anotherItem = 'another string',

oneMoreItem = 'one more string';

不言而明,这里真的有所提速,它使你的代码更清晰。

3.不要使用"with"语句

乍一看,"with"语句看起来像一个聪明的主意。基本理念是,它可以为访问深度嵌套对象提供缩写,例如……

with (being.person.man.bodyparts){

arms=ture;

legs=true;

}

而不是像下面这样:

being.person.man.bodyparts.arms=true;

being.person.man.bodyparts.legs=true;

不幸的是,经过测试后,发现这时“设置新成员时表现得非常糟糕。作为代替,您应该使用变量,像下面这样。

var 0=being.person.man.bodyparts;

0.arms=ture;

0.legs=true;

前端js这些细节你注意到了吗

4.不要给"setInterval"或"setTimeout"传递字符串参数

考虑下面的代码:

seInterval(

不仅效率低下,而且这种做法和"eval"如出一辙。从不给setInterval和setTimeout传递字符串作为参数,而是像下面这样传递函数名。

setInterval(someFunction,3000);

5.构建字符串的最优方法

当你需要遍历数组或对象的时候,不要总想着“for”语句,要有创造性,总能找到更好的办法,例如,像下面这样。

var arr=['item 1','item 2','item 3',...];

var list-'<ul><li>'+arr.join('</li><li>')+'</li></ul>';

我不是你心中神,但请你相信我(不信你自己测试)——这是迄今为止最快的方法!

使用原生代码(如 join()),不管系统内部做了什么,通常比非原生快很多。

6.将脚本放在页面的底部

记住——首要目标是让页面尽可能快的呈献给用户,脚本的夹在是阻塞的,脚本加载并执行完之前,浏览器不能继续渲染下面的内容。因此,用户将被迫等待更长时间。

如果你的js只是用来增强效果——例如,按钮的单击事件——马上将脚本放在body结束之前。这绝对是最佳实践。

前端js这些细节你注意到了吗

7.Eval == 邪恶

起初不太熟悉时,“eval”让我们能够访问JavaScript的编译器(译注:这看起来很强大)。从本质上讲,我们可以将字符串传递给eval作为参数,而执行它。

这不仅大幅降低脚本的性能(译注:JIT编译器无法预知字符串内容,而无法预编译和优化),而且这也会带来巨大的安全风险,因为这样付给要执行的文本太高的权限,避而远之。

8.使用 === 代替 ==

JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践。

“如果两边的操作数具有相同的类型和值,===返回true,!==返回false。”——JavaScript:语言精粹

然而,当使用==和!=时,你可能会遇到类型不同的情况,这种情况下,操作数的类型会被强制转换成一样的再做比较,这可能不是你想要的结果。


没有评论,留下你的印记,证明你来过。


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。