While browsers play catchup with ES6 support and we wait for older browsers without ES6 support to fizzle out and die, we can actually start using ES6 today thanks to the work of Google’s Traceur or BabelJS.
Whichever you choose for whatever reason, as long as the resulting code is ES5 compatible and your needs have been met, then really there is no competition between any transpiler except for perhaps the resulting code and various parts of the specification that are supported.
If you have used AngularJS, or EmberJS and any other front-end Javascript based framework, then you would be familiar with the concept of data binding. Essentially being able to watch a Javascript object for changes and then call a function when this takes place.
Currently without using a third party library which implements a non-native method for observing changes in a object like Angular or a polyfill, there is no cross-browser method for observing objects for changes which doesn’t involve some kind of hack at the expense of performance.
When it comes to Javascript, there are many ways you can skin a cat as they say. When it comes to inserting HTML into a page, unless you are using a Javascript library like jQuery or something like React.js or AngularJS, you most likely are using innerHTML.
Even the html() method in jQuery internally uses the innerHTML property to insert HTML into your element(s), as do many other libraries and frameworks.
I am most certainly not a Javascript purist, I love jQuery just as much as the next developer does, but that doesn’t mean I use it for everything. One thing that really gets under my skin is when jQuery is used to unnecessarily loop through and array or object.
It’s 2014, not 2008, we no longer have to use library methods because of browser API constraints like we once did for older versions of IE. Using jQuery.each() for looping through an array or object is quite an expensive operation and poor in terms of performance, this is one of those situations where native methods and conditions which are well supported eclipse jQuery 1000:1.
Recently I was tasked with writing a regular expression that would check for a valid Australian phone number for both landline and mobile phone variants whilst allowing for different formats (spaces, no spaces, international dialing code, brackets, area code, no area code).
The below regular expression code and subsequent tests are for Australian mobile and landline numbers only, but could be tweaked to work for other countries as well.
The expression `// This is our bread and butter expression var phoneExpression = /^\({0,1}((0|\+61)(2|4|3|7|8)){0,1}\){0,1}(\ |-){0,1}[0-9]{2}(\ |-){0,1}[0-9]{2}(\ |-){0,1}[0-9]{1}(\ |-){0,1}[0-9]{3}$/; // Valid var phoneNumber1 = "0411 234 567"; var phoneNumber2 = "(02) 3892 1111"; var phoneNumber3 = "38921111"; var phoneNumber4 = "0411234567"; // Invalid var phoneNumber5 = "3892 11"; var phoneNumber6 = "diane 0411 234 567"; var phoneNumber7 = "bob"; if (phoneNumber1.match(phoneExpression)) { console.log('Valid 10 digit mobile number'); } if (phoneNumber2.match(phoneExpression)) { console.log('Valid 8 digit landline number with circular brackets wrapping area code'); } if (phoneNumber3.match(phoneExpression)) { console.log('Valid 8 digit landline number with no spaces or area code'); } if (phoneNumber4.match(phoneExpression)) { console.log('Valid 10 digit mobile number with no spaces or international dialing code'); } if (!phoneNumber5.match(phoneExpression)) { console.log('Invalid landline number which is 6 digits instead of 8'); } if (!phoneNumber6.match(phoneExpression)) { console.log('A name and space before a valid spaced 10 digit mobile number'); } if (!phoneNumber7.match(phoneExpression)) { console.log('No valid number entered, a name appears to have been entered instead'); }` Supported formats: 0411 234 567, +61411 234 567, (02) 3892 1111, 38921111, 3892 111, 02 3892 1111
This is the one aspect of jQuery and well, Javascript, in general, I see newcomers to Javascript and jQuery get caught upon. Heck, I’ve seen veterans get caught up on how to properly cancel and allow events as well as event bubbling.
Nothing. There is no opposite method of “event.preventDefault()” to understand why you first have to look into what event.preventDefault() does when you call it.
Underneath the hood, the functionality for preventDefault is essentially calling a return false which halts any further execution. If you’re familiar with the old ways of Javascript, it was once in fashion to use return false for cancelling events on things like form submits and buttons using return true (before jQuery was even around).