编程小贴士

给你的编程提供小点子


15个Javascript优化小技巧总结

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

不 仅如此,JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino 来控制机器人。能够编写结构清晰、性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人。

在这篇文章中,小编将为大家分享一些JavaScript的技巧、秘诀和最佳实践。不管是浏览器的JavaScript引擎,还是服务器端JavaScript解释器,均适用。

1. 使用===取代==

==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快。

[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
 == 0 // is true
 === 0 // is false
'' == false // is true but true == "a" is false
'' === false // is false

2. 使用对象构造器

function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");

3. 使用自调用函数

函数在创建之后直接自动执行,通常称之为自调用匿名函数(Self-Invoked Anonymous Function)或直接调用函数表达式(Immediately Invoked Function Expression )。格式如下:

(function{
// 置于此处的代码将自动执行
});
(function(a,b){
var result = a+b;
return result;
})(10,20)

4. 通过for-in循环检查对象的属性

下面这样的用法,可以防止迭代时进入到对象的原型属性中。

for (var name in object) {
if (object.hasOwnProperty(name)) {
// do something with name
}
}

5. 临时存储用于计算和查询的变量

在jQuery选择器中,可以临时存储整个DOM元素。

var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');

6. 避免在数组中使用负数做索引

var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf("foo") ; // from is equal to -1
numbersArray.splice(from,2); // will return [5]

注意:传给splice的索引参数不要是负数,当是负数时,会从数组结尾处删除元素。

7. 不要使用eval或者函数构造器

eval和函数构造器(Function consturctor)的开销较大,每次调用,JavaScript引擎都要将源代码转换为可执行的代码。

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

8. 避免使用with

使用with可以把变量加入到全局作用域中,因此,如果有其它的同名变量,一来容易混淆,二来值也会被覆盖。

9. 使用switch/case代替一大叠的if/else

当判断有超过两个分支时使用switch/case要更快一些,而且也更优雅,更利于代码的组织,当然,如果有超过10个分支,就不要使用switch/case了。

10. 使用对象作为对象的原型

下面这样,便可以给定对象作为参数,来创建以此为原型的新对象:

function clone(object) {
function OneShotConstructor{};
OneShotConstructor.prototype = object;
return new OneShotConstructor;
}
clone(Array).prototype ; //

11. HTML字段转换函数

function escapeHTML(text) {
var replacements= {"": ">","&": "&", "\"": """};
return text.replace(/[&"]/g, function(character) {
return replacements[character];
});
}

12. 首次为变量赋值时务必使用var关键字

变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量。

13. 字符串去空格

Java、C#和PHP等语言都实现了专门的字符串去空格函数,但JavaScript中是没有的,可以通过下面的代码来为String对象函数一个trim函数:

String.prototype.trim = function{return this.replace(/^\s+|\s+$/g, "");};

JavaScript引擎已经有了trim的原生实现。

14. 处理WebSocket的超时

通常情况下,WebSocket连接创建后,如果30秒内没有任何活动,服务器端会对连接进行超时处理,防火墙也可以对单位周期没有活动的连接进行超时处理。

为了防止这种情况的发生,可以每隔一定时间,往服务器发送一条空的消息。可以通过下面这两个函数来实现这个需求,一个用于使连接保持活动状态,另一个专门用于结束这个状态。

var timerID = 0;
function keepAlive {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive {
if (timerId) {
cancelTimeout(timerId);
}
}

15. 开发时注意代码结构,上线前检查并压缩JavaScript代码

别忘了在写代码时使用一个代码美化工具。使用JSLint(一个语法检查工具)并且在上线前压缩代码(比如使用JSMin)。注:现在代码压缩一般推荐 UglifyJS (https://github.com/mishoo/UglifyJS2)

3 Responses to “ 15个Javascript优化小技巧总结 ”

  1. see pron说道:

    m1g6ap Im obliged for the article.Thanks Again. Cool.

  2. Nyla Warnack说道:

    Hmm it appears like your blog ate my first comment (it was super long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to the whole thing. Do you have any suggestions for first-time blog writers? I’d really appreciate it.

  3. I am only writing to make you be aware of of the wonderful experience my friend’s child gained browsing your web page. She came to understand some pieces, including what it’s like to possess a great helping mindset to let many more with no trouble know precisely certain grueling topics. You actually exceeded readers’ expected results. I appreciate you for supplying such warm and friendly, healthy, edifying and in addition fun thoughts on your topic to Julie.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>