First time with ECMAScript 2015 and Babel
Although I'm very late, I've decided to write JavaScript in ECMAScript 2015 (ES2015) (ES6) from now on.
Therefore, we set up babel, a trans-compiler from ES2015 to ES5.
Writing code in ES2015
First, here is the first code I wrote other than the test code.
No special commentary on the content.
class HtmlEntity {
constructor() {
this.entityChars = new Set([
['&','&'],
['\'','''],
['<','<'],
['>','>'],
['"','"'],
]);
}
entity(chr) {
for (const [ch,ent] of this.entityChars) {
if (chr == ch) {
return ent;
}
}
return chr;
}
}
((window,document) => {
const inData = 'indata';
const outData = 'outdata';
const outCount = 'outcount';
const convert = () => {
const str = document.getElementById(inData).value;
let [result,count] = zenHighlight(str)
result = result.replace(new RegExp('\n','g'),'<br>');
document.getElementById(outData).innerHTML = result;
document.getElementById(outCount).style.display = 'block';
document.getElementById(outCount).innerHTML = 'Double-width characters are' + count + 'Character found.';
}
const zenHighlight = (str) => {
const htmlEnt = new HtmlEntity();
let result = '';
let count = 0;
const chars = str.split('');
chars.forEach((val,index,array) => {
if (val.charCodeAt(0) > 0xef) {
result += '<i class="zen">' + val + '</i>';
count++;
} else {
result += htmlEnt.entity(val);
}
});
return [result,count];
}
const init = () => {
document.getElementById(inData).addEventListener('keyup',() => convert(),false);
}
init();
})(window,document);
Here is the result of transpiling to ES5
'use strict';
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var HtmlEntity = function () {
function HtmlEntity() {
_classCallCheck(this, HtmlEntity);
this.entityChars = new Set([['&', '&'], ['\'', '''], ['<', '<'], ['>', '>'], ['"', '"']]);
}
_createClass(HtmlEntity, [{
key: 'entity',
value: function entity(chr) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = this.entityChars[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var _step$value = _slicedToArray(_step.value, 2),
ch = _step$value[0],
ent = _step$value[1];
if (chr == ch) {
return ent;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
return chr;
}
}]);
return HtmlEntity;
}();
(function (window, document) {
var inData = 'indata';
var outData = 'outdata';
var outCount = 'outcount';
var convert = function convert() {
var str = document.getElementById(inData).value;
var _zenHighlight = zenHighlight(str),
_zenHighlight2 = _slicedToArray(_zenHighlight, 2),
result = _zenHighlight2[0],
count = _zenHighlight2[1];
result = result.replace(new RegExp('\n', 'g'), '<br>');
document.getElementById(outData).innerHTML = result;
document.getElementById(outCount).style.display = 'block';
document.getElementById(outCount).innerHTML = 'Double-width characters are' + count + 'Character found.';
};
var zenHighlight = function zenHighlight(str) {
var htmlEnt = new HtmlEntity();
var result = '';
var count = 0;
var chars = str.split('');
chars.forEach(function (val, index, array) {
if (val.charCodeAt(0) > 0xef) {
result += '<i class="zen">' + val + '</i>';
count++;
} else {
result += htmlEnt.entity(val);
}
});
return [result, count];
};
var init = function init() {
document.getElementById(inData).addEventListener('keyup', function () {
return convert();
}, false);
};
init();
})(window, document);
1.46KB turned into 3.79KB. It doesn't have to be that big! I thought, "Why does it have to be so big?" But I found out that it becomes quite big when I convert the class to ES5.
If you had originally written it in ES5, you would have been able to write it in about 2KB, which is about 50% more than ES2015.
ECMAScript 2015 is great!
ECMAScript 2015 seems to be a costly learning experience, but I felt like I could easily transition to it with almost no learning cost. I guess that's how close it is to the syntax of other major languages. Above all, I'm glad that I won't have to look at difficult code in prototype anymore. I myself avoided using prototype as much as possible because I felt it was difficult to maintain.