七个开法者经常忽略或误用的JavaScript基本知识

翻译自 http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly ,我觉得4、5、6条还是蛮有用的哈。

1.  String.prototype.replace: /g and /i 标识

让很多新手疑惑的是,JavaScript里的字符串的replace方法不会替换所有匹配的字符,而是只替换第一次匹配的字符。当然熟悉JavaScript的老手知道我们需要一个正则表达式和一个/g标识。

// 错误的用法
str ="David is an Arsenal fan, which means David is great";
str.replace("David","Darren");// "Darren is an Arsenal fan, which means David is great"
// 想要的效果
str.replace(/David/g,"Darren");// "Darren is an Arsenal fan, which means Darren is great"

另一种常犯的错误是当字符串大小写不敏感时不使用 /i 标志来匹配

 

str.replace(/david/gi,"Darren")// "Darren will always be an Arsenal fan, which means Darren will always be great"

每一个JavaScript开发者都被每一个标志坑过,所以要保证在适合的时候使用这些标志。

2.  Array-Like Objects 和 Array.prototype.slice

Array的slice方法主要用来提取数组中的一部分,很多开发者不知道slice方法可以将类数组的对象转换成真正的数组,比如 arguments,NodeLists。

var nodesArr =Array.prototype.slice.call(document.querySelectorAll("div"));// "true" array of DIVs

var argsArr =Array.prototype.slice.call(arguments);// changes arguments to "true" array

你甚至可以用slice克隆一个数组:

var clone = myArray.slice(0);// naive clone

Array.prototype.slice 绝对是JavaScript世界中的精华,即时JS熟手也不一定知道它全部的威力。

3.  Array.prototype.sort

 Array sort 方法被广泛使用,很多开发者以为sort方法做这样的事情:

[1,3,9,2].sort();// Returns: [1, 2, 3, 9]

这样是对的,但是sort有更强大的用法,像这样:

[
    { name: "Robin Van PurseStrings", age: 30 },
    { name: "Theo Walcott", age: 24 },
    { name: "Bacary Sagna", age: 28  }
].sort(function(obj1, obj2) {
    // Ascending: first age less than the previous
    return obj1.age - obj2.age;
});
    // Returns:  
    // [
    //    { name: "Theo Walcott", age: 24 },
    //    { name: "Bacary Sagna", age: 28  },
    //    { name: "Robin Van PurseStrings", age: 30 }
    // ]

4.  Array 长度截断

没有一个开发者没被JavaScript的传递对象引用的特性坑过,常常这样来清空一个数组,但却错误的创建了一个新的数组。

var myArray = yourArray =[1,2,3];// :(
myArray =[];// "yourArray" 还是 [1, 2, 3]
// 正确的方法,保持引用
myArray.length =0;// "yourArray" and "myArray" 都变成了 []

5.  push方法来合并数组

我在第二条展示了Array的slice方法的强大能力,所以push方法有这样的能力你也不会见怪了。这次我们用push方法来合并数组

var mergeTo =[4,5,6];
var mergeFrom =[7,8,9];
Array.prototype.push.apply(mergeTo, mergeFrom);
mergeTo;// is: [4, 5, 6, 7, 8, 9]

6. 高效的特性检测或者属性检测

我们常常这样来检测一个浏览器的特性:

if(navigator.geolocation){
// Do some stuff
}

 

当然,这能正常工作,但它不是很高效。因为对象的方法检测在浏览器中可能会导致分配资源,上面的代码在某些浏览器曾导致内存泄漏。更好的方法检测对象的key:

if("geolocation"in navigator){
// Do some stuff
}

 

这样的key检测使用简单并且避免了很多问题,比如一个属性的值是false,那么你的检测会失败,即使key存在。

7. Event preventDefault 和 stopPropagation

当元素被点击时(比如链接),我们经常触发自己的函数。显然,我们不希望浏览器继续访问这个链接,所以我们使用JavaScript库的Event.stop方法:

$("a.trigger").on("click",function(e){
    e.stop();
// Do more stuff
});

这个方法的问题在于它不仅阻止了浏览器的默认行为,而且阻止了事件冒泡。也就是说,其他的事件监听器不会监听到这个事件。

所以最好是直接使用preventDefault方法。

一些开发者可能会说:“我知道这些!”,但是他们也常常犯这样的错误,所以不要忽略这些小的细节,它们可能造成大的差异。

附:preventDefault与return false 的区别  http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false

posted on 2013-08-11 14:14 friskfly 阅读(...) 评论(...) 编辑 收藏

公告

统计

  • 随笔 - 8
  • 文章 - 2
  • 评论 - 19