第一次翻译文章,先翻译再说,当成学习了。
地址:http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly
javascript它基本上是一门简单的语言,我们将继续发展使其智能、灵活的模式。我们使用这些模式使WEB程序中的JS框架更加丰富。许多JS新手在使用JS框架中迷茫一些使基本任务变得可能的非常有用的JS技术。下面是七种基本的方法。
1. String.prototype.replace: /g and /i
对于许多JS新手来说String的replace方法不能够替换所有我们需要的地方,只是在第一次符合的地方。对于JS老手来说,只需要一个正则表达式的的全局标签g的使用就可解决。
// Mistake
var 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"
// Desired
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"
每一个JS开发者在使用这些标志的可能犯错误,所以一定在适当的地方使用。
2. Array-Like Objects and Array.prototype.slice
数组的slice方法主要是分割数组的分段。许多新手不知道slice方法可以用于一些类似slice方法的,比如arguments, NodeLists, and attributes,然后分割成真正的数组。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
方法绝对是JS世界中的宝石,一些JS初学者并不能发挥他的全部潜力。
3. Array.prototype.sort
数组的sort方法绝对是被低估的方法,能实现一些令开发者难以想象的功能。许多开发者能完成这样的方法:[1, 3, 9, 2].sort();
// Returns: [1, 2, 3, 9]
但是还有更强大的方法
[
{ 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 }
// ]
你可以按照合适的方法排列对象,不是基本的条目。从服务器发送的JSON对象可以按照上面那种想法排列进行排列,记住这一点。
4. Array Length for Truncation
任何一个开发者都可能误用JS的对象传递本质(pass-objects-by-reference 这个单词好难),通常情况下,开发者想要清空一个数组,但是可能会范用一个新的数组来替换这个错误。var myArray = yourArray = [1, 2, 3];
// :(
myArray = []; // "yourArray" is still [1, 2, 3]
// The right way, keeping reference
myArray.length = 0; // "yourArray" and "myArray" both []
开发者们可能意识到对象通过引用传递,所以设置myArray为[],创造一个新数组,然而引用没有变化。这是错误的,使用数组截短来代替。
5. Array Merging with push
当我使用数组的slice方法的apply方法,可以做出很酷的东西,你不应该感到吃惊,其他的数组方法也可以这样使用,我们通过数组的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. Efficient Feature/Object Property Detection
通常情况下,开发人员用下列的方法来检测浏览器的特性:if(navigator.geolocation) {
// Do some stuff
}
虽然这个方法不错,但是他可能有时候无效,作为浏览器的检测方法应该那个浏览器的初始化的资源。在过去,由于某些浏览器存在这内存泄漏。所以更好和更有效的方法是检查对象是否在:
if("geolocation" in navigator) {
// Do some stuff
}
这个检查也同样简单,但是能够避免内存的问题。另外如果值为错误,则检查失败。
7. Event preventDefault and stopPropagation
通常情况下,当我们点击链接触发功能,很明显我们不需要浏览器跳转,我们则使用event,stop方法。$("a.trigger").on("click", function(e) {
e.stop();
// Do more stuff
});
这个方法停止事件,不仅防止默认操作,还阻止事件,意味着浏览器的监听器无效。因为事件已经消除。
这是
preventDefault
简单地使用。
经验丰富的JS开发者看到这些,会抱怨,我知道这些。但是这一点或者另外一点,使他们在使用中遇到挫折。注意到JS中一些小技巧,可以给你带来很大的不同。
这篇文章中的小技巧,都还是清楚的,权当复习一遍了,并翻译练手。还是文章中那句话, Be mindful of the little things in JavaScript because they can make a big difference.注意JS中的一些细节,确实能给代码带来优雅、简单、高效的转变。