The good thing is that JS is finally evolving in large steps now with Ecmascript 6 or ES6 with a common standard that many browsers vendors can agree upon. There are different ways to run JS code with ES6 features. One can use a transpiler such as Babel that will rewrite the JS code with ES6 scripts into to compatible ES2015 syntax which more browsers support. Or one can use a javascript library that contains polyfills and fills to support ES6 code in browsers. The sample code in this article has been tested with Internet Explorer 11 and is available as a Plunk. The following url contains the running demo:
Plunk with ES6 modules
First in this sample a class called Employee is created. This uses ES6 new class feature.
export class Employee {
constructor (name) {
//console.log("Constructor of Employee");
this._name = name;
}
get name() {
return this._name;
}
doWork(){
return `${this.name} is working`;
}
}
ES6 classes can export a class and then be imported in other classes and build up modules. The employee class also uses ES6 template string feature. Note that the backtick quote is used and ${..} is used to refer to variables.
The next class then imports the Employee class. Note that you must change url here to match your Plunk in the running editor to adjust the session url that Plunkr uses to give unique urls. ES6 can support static urls of course.
import {Employee} from "http://run.plnkr.co/gIljKiTbjZ0IOX8b/Employee.js"
export class Company {
hire(...names) {
this.employees = names.map(n => new Employee(n));
}
doWork(){
console.log(this.employees);
$("body").append("<ul>");
for (let e of this.employees){
console.log(e);
$("body").append(`<li style='list-style-type:circle'>${e.doWork()}` + "</li>");
}
$("body").append(">/ul<");
return 1;
}
}
Again the class keyword is used to define a class and then exported to be used in another class or module with the export keyword. To import the Employee class the import keyword. The Company class above uses the rest operator (...) to allow passing in an arbitrary number of elements. Then the map operator built into Arrays in ES6 is used to return a mapped array. The use of the let operator is used and also the of operator of iterable collections.
Finally the sample HTML code below is used to define the use of an ES6 module. Here the script tag with the tag module is used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body bgcolor="teal" style="font-family:Verdana, Courier,Helvetica, Arial">
<h1 style="color:yellow;font-family:Arial">ES6 module demo</h1>
<script type="module">
import {Company} from "http://localhost/babeldemo/src/Company.js"
var c = new Company();
c.hire("Tim", "Tom", "Betty", "Maggie");
c.doWork();
</script>
</body>
</html>
Note that Traceur is a good option to test out ES6 features. In production, using a transpiler such as Babel to create a ES2015 compatible JS code is probably much better since there is a performance cost with Traceur. The reason Traceur is used in this sample is to show how an old browser such as Internet Explorer 11 can run ES6 code with a Javascript library such as Traceur.
To see a compatibility matrix of which browsers supports which ES6, see the Kangax table at the following url:
https://kangax.github.io/compat-table/es6/
With the help of Traceur more browsers can run more feature of ES6 and you can test out and use ES6 in your development or production environments and structure your code with classes and modules for example. Make note that the current state of Javascript module loaders of browsers will be improved in the future. Until then, additional frameworks such as AMD or Require.Js can be used to support module loading in more complex scenarios.
No comments:
Post a Comment