请问您的母语是什么?一些人回答C语言,一些人回答PHP语言,一些人回答JS语言,当然大部分人的答案还是汉语。回归正题,JS至少也算的上前端工程师的第二语言。所以平时在使用的时候,也应该尽量做到言简意赅,比如能使用“赞”的时候,就不要使用“非常好非常好”这样的重复叠词。
避免重复的获得元素
在一个代码块中,需要操作DOM对象的时候,需要获得这个DOM对象,会经常有这样的代码出现(以Qwrap为例):
// : ( W('#items').addClass("hide"); ... W('#items').removeClass("hide");
其实,既然在一个代码块中,完成可以用一个变量记住这些DOM对象,因为每次获取元素集合都会调用选择器引擎来计算需要获取的元素,虽然现在的选择器引擎和querySelectorAll 都已经很快了,但是重复的工作总是要慢于一次性工作的。
// : ) var items = W('#items'); ..... items.addClass("hide"); .... items.removeClass("hide");
避免重复的条件判断
其实此方法在《JavaScript高级程序设计》中有讲到,就是所谓的“惰性载入函数”。书上的定义是:表示函数执行的分支仅会发生1次,即函数第一次调用的时候。同样,在代码中经常会做条件的判断,比如下面的代码:
// : ( var per = function(){ if( statement ){ //条件statement满足的时候执行这段代码 }else{ // 条件不满足的时候执行这段代码 } }
这样的代码是OK的,能正常的运行。殊不知,每次 调用per函数per()的时候,都会进行一次条件判断。借用惰性载入函数的思路,这样写代码会更有效一些
// : ) var per = statement ? function(){//条件statement满足的时候执行这段代码} : function(){//条件不满足的时候执行这段代码}
下面是一个简单的测试代码,不知道能不能说明问题:
var a = 0; var test1 = a ? function(){ console.log("aa") }: function(){ console.log("bb"); console.log("+++++++"+(Date.now()-d2)); } var test = function(){ if(a){ console.log('a'); }else{ console.log('b'); console.log("++++++"+(Date.now()-d1)); } } var d1 = Date.now(); test(); var d2 = Date.now(); test1();
运行的结果如下:
(第一次) b ++++++9 bb +++++++0 (第二次) b ++++++8 bb +++++++0 (第三次) b ++++++8 bb +++++++0
避免重复的创建对象
举两个在实际开发中遇到的情况,第一个是正则表达式(虽然写文章的人可以算是基本没入门正则,囧)。比如下面的代码,
// : ( function str(){ var newStr = oldStr.replace(/abcdefg/,''); return newStr; }
同样是ok的代码,但是问题就在于每次调用str函数的时候,执行replace代码,都会创建一个正则表达式对象。微笑的做法可以如下
// : ) var reg = /abcdefg/; function str(){ var newStr = oldStr.replace(reg,''); return newStr; }
这样,正则对象只创建一次,但是会被使用多次。
第二个例子是时间对象。JS中获得当前时间可以用Date.now()啦,在ECMA-262的第5版中增加了这个方法,不过,那些低级的浏览器是不支持的。
用Date.now()返回当前时间的好处就是,不用每次new Date()去创建一次时期对象。鉴于浏览器的状况,可以用下面的代码来实现兼容
Date.now = Date.now || function(){ return + new Date(); }
以上就是全部内容,其实目的很简单,就是追随我们的奥运精神,更高,更快,更强。然后在140字流行的现在,争取用第二语言更快地表达出内心的那一丢小纠纠。