AJax技术

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

字号+ 作者:H5之家 来源:H5之家 2017-05-09 08:01 我要评论( )

无处不在 触手可及

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

27 – 逗号操作符

var a = 0; var b = ( a++, 99 ); console.log(a); // a will be equal to 1 console.log(b); // b is equal to 99

 

28 – 缓存需要计算和查询(calculation or querying)的变量

对于jQuery选择器,我们最好缓存这些DOM元素。

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

29 – 在调用 isFinite()之前验证参数

isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undifined); // false isFinite(); // false isFinite(null); // true !!!

30 – 避免数组中的负数索引(negative indexes)

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

 

确保调用 indexOf 时的参数不是负数。

31 – 基于JSON的序列化和反序列化(serialization and deserialization)

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; var stringFromPerson = JSON.stringify(person); /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */ var personFromString = JSON.parse(stringFromPerson); /* personFromString is equal to person object */

 

32 – 避免使用 eval() 和 Function 构造函数

使用 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 结构中,每次都会新建这个变量。

避免这样的写法:

var object = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i++) { try { // do something that throws an exception } catch (e) { // handle exception } }

而使用:

var object = ['foo', 'bar'], i; try { for (i = 0, len = object.length; i <len; i++) { // do something that throws an exception } } catch (e) { // handle exception }

 

41 – 为 XMLHttpRequests 设置超时。

在一个XHR请求占用很长时间后(比如由于网络问题),你可能需要中止这次请求,那么你可以对XHR调用配套使用 setTimeout()。

var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () { if (this.readyState == 4) { clearTimeout(timeout); // do something with response data } } var timeout = setTimeout( function () { xhr.abort(); // call error callback }, 60*1000 /* timeout after a minute */ ); xhr.open('GET', url, true); xhr.send();

此外,一般你应该完全避免同步的Ajax请求。

 

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

相关文章
  • JavaScript 编程技巧与实战职业课程

    JavaScript 编程技巧与实战职业课程

    2017-05-06 17:11

  • JavaScript事件学习小结(一)事件流

    JavaScript事件学习小结(一)事件流

    2017-05-06 17:02

  • 使用JavaScript实现ajax的实例代码

    使用JavaScript实现ajax的实例代码

    2017-05-06 08:03

  • ajax请求属性readyState状态判断的不同写法!?

    ajax请求属性readyState状态判断的不同写法!?

    2017-05-03 15:00

网友点评