7 JavaScript Basics Many Developers Aren't Using (Properly)
来源:互联网 发布:迪奥西斯形态数据 编辑:程序博客网 时间:2024/06/07 03:54
转载地址:http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly?utm_source=javascriptweekly&utm_medium=email
JavaScript, at its base, is a simple language that we continue to evolve with intelligent, flexible patterns. We've used those patterns in JavaScript frameworks which fuel our web applications today. Lost in JavaScript framework usage, which many new developers are thrust right into, are some of the very useful JavaScript techniques that make basic tasks possible. Here are seven of those basics:
1. String.prototype.replace: /g and /i Flags
One surprise to many JavaScript newbies is that String's replace
method doesn'treplace all occurrences of the needle -- just the first occurrence. Of course seasoned JavaScript vets know that a regular expression and the global flag (/g
) need to be used:
// Mistakevar 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"// Desiredstr.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great"
Another basic logical mistake is not ignoring case when case is not critical to the validation (letters may be uppercase or lowercase), so the/i
flag is also useful:
str.replace(/david/gi, "Darren") // "Darren will always be an Arsenal fan, which means Darren will always be great"
Every JavaScript developer has been bitten by each of the flags in the past -- so be sure to use them when when appropriate!
2. Array-Like Objects and Array.prototype.slice
Array's slice method is principally for grabbing segments of an array. What many developers don't know is that slice can be used to covert Array-like objects like arguments, NodeLists, and attributes into true arrays of data:
var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div")); // "true" array of DIVsvar argsArr = Array.prototype.slice.call(arguments); // changes arguments to "true" array
You can even clone an array using a simple
slice
call:var clone = myArray.slice(0); // naive clone
Array.prototype.slice
is an absolute gem in the world of JavaScript, one that even novice JavaScript developers don't know the full potential of.
3. Array.prototype.sort
The Array sort
method is vastly underused and probably a bit more powerful than most developers believe. Many developers would assume sort would do something like this:
[1, 3, 9, 2].sort(); // Returns: [1, 2, 3, 9]
...which is true, but sort has more powerful uses, like this:
[ { 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 } // ]
You can sort objects by property, not just simple basic items. In the event that JSON is sent down from the server and objects need to be sorted, keep this in mind!
4. Array Length for Truncation
There's not a developer out there that hasn't been bitten by JavaScript's pass-objects-by-reference nature. Oftentimes developers will attempt toempty an array but mistakenly create a new one instead:
var myArray = yourArray = [1, 2, 3];// :(myArray = []; // "yourArray" is still [1, 2, 3]// The right way, keeping referencemyArray.length = 0; // "yourArray" and "myArray" both []
What these developers probably realize is that objects are passed by reference, so while setting myArray to[]
does create a new array, other references stay the same! Big mistake! Use array truncation instead.
5. Array Merging with push
I showed in point 2 that Array's slice and apply can do some cool stuff, so it shouldn't surprise you that other Array methods can do the same trickery. This time we can merge arrays with thepush
method:
var mergeTo = [4,5,6],var mergeFrom = [7,8,9];Array.prototype.push.apply(mergeTo, mergeFrom);mergeTo; // is: [4, 5, 6, 7, 8, 9]
A wonderful example of a lessor-known, simple native method for completing the basic task of array merging.
6. Efficient Feature/Object Property Detection
Oftentimes developers will use the following technique to detect a browser feature:
if(navigator.geolocation) { // Do some stuff}
While that works correctly, it isn't always efficient, as that method of object detection can initialize resources in the browser. In the past, the snippet above caused memory leaks in some browsers. The better and more efficient route is checking for a key within an object:
if("geolocation" in navigator) { // Do some stuff}
This key check is as simple as it gets and may avoid memory problems. Also note that if the value of a property is falsy, your check will fail despite the key being present.
7. Event preventDefault and stopPropagation
Oftentimes we trigger functionality when action elements like links are clicked. Obviously we don't want the browser to follow the link upon click, so we use our handy JavaScript library'sEvent.stop
method:
$("a.trigger").on("click", function(e) { e.stop(); // Do more stuff});
The problem with this lazy method of stopping the event is that not only does it prevent the default action, but it stops propagation of the event, meaning other event listeners for the elements wont fire because they don't know about the event. It's best to simply use preventDefault
!
Seasoned JavaScript developers will see this post and say "I knew those," but at one point or another, they got tripped up on some of these points. Be mindful of the little things in JavaScript because they can make a big difference.
- 7 JavaScript Basics Many Developers Aren't Using (Properly)
- Why aren't you using Sublime Text ?
- 7 Basic Reasons You Aren't Happy
- Mocks Aren't Stubs
- Mocks Aren't Stubs
- Mocks Aren't Stubs
- Mocks Aren't Stubs
- Mocks Aren't Stubs
- Skyscrapers Aren’t Scalable
- You Aren’t Special
- Mocks Aren't Stubs
- Mocks Aren't Stubs
- Mocks Aren't Stubs
- [MartinFowler] Mocks Aren't Stubs
- Using ColdFusion components--properly
- Floating-point Numbers Aren't Real
- Floating-Point Numbers Aren’t Real
- The Basics to Using DirectShow
- [LiveCycle Designer ES2]第1节--PDF 表单计算
- 强制去除xcode的编译警告
- 子数组之和的最大值(二维)
- 性能分析摘要
- C语言深度剖析
- 7 JavaScript Basics Many Developers Aren't Using (Properly)
- 调用Twain 直接返回扫描图片
- 终于博客搬家完了
- edittext禁止首次启动自动弹出输入法
- Linux内存管理之mmap详解
- VC操作MPP文件
- UVA 11168 - Airport
- Picture control 控件的使用
- VMware使用2 ---虚拟磁盘管理工具vmware-vdiskmanager