jQuery技术

45 个实用的 JavaScript 技巧、窍门和最佳实践(4)

字号+ 作者:H5之家 来源:H5之家 2017-11-25 10:23 我要评论( )

使用 eval 和 Function 构造函数是非常昂贵的操作,因为每次他们都会调用脚本引擎将源代码转换成可执行代码。 varfunc1=newFunction(functionCode);varfunc2=eval(functionCode);33. 避免使用with() 使用with()会插

使用 eval 和 Function 构造函数是非常昂贵的操作,因为每次他们都会调用脚本引擎将源代码转换成可执行代码。

var func1 = new Function(functionCode);var func2 = eval(functionCode);33. 避免使用 with()

使用 with() 会插入一个全局变量。因此,同名的变量会被覆盖值而引起不必要的麻烦。

34. 避免使用 for-in 来遍历一个数组

避免使用这样的方式:

var sum = 0;for (var i in arrayNumbers) {    sum += arrayNumbers[i]; }

更好的方式是:

var sum = 0; for (var i = 0, len = arrayNumbers.length; i < len; i++) {         sum += arrayNumbers[i]; }

附加的好处是,i 和 len 两个变量的取值都只执行了一次,会比下面的方式更高效:

for (var i = 0; i < arrayNumbers.length; i++)

为什么?因为 arrayNumbers.length 每次循环的时候都会被计算。

35. 在调用 setTimeout() 和 setInterval() 的时候传入函数,而不是字符串。

如果你将字符串传递给 setTimeout() 或者 setInterval(),这个字符串将被如使用 eval 一样被解析,这个是非常耗时的。
不要使用:

setInterval('doSomethingPeriodically()', 1000); setTimeOut('doSomethingAfterFiveSeconds()', 5000)

而用:

setInterval(doSomethingPeriodically, 1000); setTimeOut(doSomethingAfterFiveSeconds, 5000);36. 使用 switch/case 语句,而不是一长串的 if/else

在判断情况大于2种的时候,使用 switch/case 更高效,而且更优雅(更易于组织代码)。但在判断的情况超过10种的时候不要使用 switch/case。
译者注:查了一下文献,大家可以看一下

37. 在判断数值范围时使用 switch/case

在下面的这种情况,使用 switch/case 判断数值范围的时候是合理的:

function getCategory(age) {         var category = "";         switch (true) {                 case isNaN(age):                 category = "not an age";                         break;                     case (age >= 50):                 category = "Old";                             break;                     case (age <= 20):                 category = "Baby";                             break;                     default:                 category = "Young";                         break;     };         return category; } getCategory(5);  // will return "Baby"

译者注:一般对于数值范围的判断,用 if/else 会比较合适。 switch/case 更适合对确定数值的判断

38. 为创建的对象指定 prototype 对象

写一个函数来创建一个以指定参数作为 prototype 的对象是有可能:

function clone(object) {         function OneShotConstructor(){};         OneShotConstructor.prototype= object;             return new OneShotConstructor(); }clone(Array).prototype ;  // []39. 一个HTML转义函数function escapeHTML(text) {         var replacements= {"<": "<", ">": ">","&": "&", "\"": """};         return text.replace(/[<>&"]/g, function(character) {             return replacements[character];     }); }40. 避免在循环内部使用 try-catch-finally

在运行时,每次当 catch 从句被执行的时候,被捕获的异常对象会赋值给一个变量,而在 try-catch-finally 结构中,每次都会新建这个变量。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 实用的那才是最好的!xp使用技巧分享

    实用的那才是最好的!xp使用技巧分享

    2017-11-22 12:24

  • 一款特好用的JavaScript框架 JQuery

    一款特好用的JavaScript框架 JQuery

    2017-11-17 08:11

  • 从零开始学习 jQuery(十)jQueryUI常用功能实战

    从零开始学习 jQuery(十)jQueryUI常用功能实战

    2017-11-14 17:00

  • [教学视频]jQuery实战

    [教学视频]jQuery实战

    2017-11-12 10:00

网友点评
i