[英]Convert ES6 JavaScript to ES5 without transpiler
I am not familiar with new JavaScript ES6 coding conventions and have been given some code where I need it to be plain old JavaScript ES5.我不熟悉新的 JavaScript ES6 编码约定,并且在我需要它是普通的旧 JavaScript ES5 的地方已经给出了一些代码。
I need to convert this JS code without the use of Babel or any other transpiler.我需要在不使用 Babel 或任何其他转译器的情况下转换此 JS 代码。 I cannot use Babel as I am not allowed to use it at work.我不能使用 Babel,因为我不允许在工作中使用它。
I realise that all the "const" can be converted to "var" but unsure of new arrow functions and other items.我意识到所有的“const”都可以转换为“var”,但不确定新的箭头函数和其他项目。
I have tried converting but getting:我试过转换但得到:
Uncaught ReferenceError: line is not defined未捕获的 ReferenceError:未定义行
The ES6 code that I would like converted to ES5 is:我想转换为 ES5 的 ES6 代码是:
const data = [{ "rec": "1", "region": "LEFT", "intrface": "Line-1" },{ "rec": "1", "region": "LEFT", "intrface": "Line-2" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-3" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-4" }];
const s = Snap("#svg");
const height = 40;
const canvasWidth = 400;
const lineWidth = 180;
const rightOffset = canvasWidth/2 - lineWidth;
const leftLines = data.filter((line) => !isRightLine(line));
const rightLines = data.filter(isRightLine);
leftLines.forEach(drawLine);
rightLines.forEach(drawLine);
const numberOfLines = Math.max(leftLines.length, rightLines.length);
const rectSize = 20;
const rectangles = [];
for (let i = 0; i < numberOfLines; i++) {
rectangles.push(drawRect(i));
}
function drawLine(data, index) {
const {intrface} = data;
const isRight = isRightLine(data);
const x = isRight ? canvasWidth/2 + rightOffset : 0;
const y = height * (index + 1);
const stroke = isRight ? 'red' : 'black';
const line = s.line(x, y, x + 180, y);
line.attr({
stroke,
strokeWidth: 1
});
const text = s.text(x + 10, y - 5, intrface);
text.attr({
fill: stroke,
cursor: 'pointer'
});
text.click(() => {
console.log('clicked', data);
//window.location.href = "http://stackoverflow.com/";
});
}
function isRightLine({region}) {
return region === 'RIGHT';
}
function drawRect(index) {
const x = canvasWidth/2 - rectSize/2;
const y = height * (index + 1) - rectSize/2;
const rectangle = s.rect(x, y, rectSize, rectSize);
rectangle.attr({
fill: 'black'
});
console.log('rr', x, y);
return rectangle;
}
I will assume that since you are not very familiar with es6 you are probably not very familiar with babeljs.io
which gives you an option to convert back:我假设您对 es6 不是很熟悉,因此您可能对babeljs.io
不太熟悉,它为您提供了转换回来的选项:
"use strict";
var data = [{ "rec": "1", "region": "LEFT", "intrface": "Line-1" }, { "rec": "1", "region": "LEFT", "intrface": "Line-2" }, { "rec": "1", "region": "RIGHT", "intrface": "Line-3" }, { "rec": "1", "region": "RIGHT", "intrface": "Line-4" }];
var s = Snap("#svg");
var height = 40;
var canvasWidth = 400;
var lineWidth = 180;
var rightOffset = canvasWidth / 2 - lineWidth;
var leftLines = data.filter(function (line) {
return !isRightLine(line);
});
var rightLines = data.filter(isRightLine);
leftLines.forEach(drawLine);
rightLines.forEach(drawLine);
var numberOfLines = Math.max(leftLines.length, rightLines.length);
var rectSize = 20;
var rectangles = [];
for (var i = 0; i < numberOfLines; i++) {
rectangles.push(drawRect(i));
}
function drawLine(data, index) {
var intrface = data.intrface;
var isRight = isRightLine(data);
var x = isRight ? canvasWidth / 2 + rightOffset : 0;
var y = height * (index + 1);
var stroke = isRight ? 'red' : 'black';
var line = s.line(x, y, x + 180, y);
line.attr({
stroke: stroke,
strokeWidth: 1
});
var text = s.text(x + 10, y - 5, intrface);
text.attr({
fill: stroke,
cursor: 'pointer'
});
text.click(function () {
console.log('clicked', data);
//window.location.href = "http://stackoverflow.com/";
});
}
// you might want to change this - howeverever you will have to change everywhere in the code that calls isRightLine to pass a primitive vs an object.
function isRightLine(_ref) {
var region = _ref.region;
return region === 'RIGHT';
}
function drawRect(index) {
var x = canvasWidth / 2 - rectSize / 2;
var y = height * (index + 1) - rectSize / 2;
var rectangle = s.rect(x, y, rectSize, rectSize);
rectangle.attr({
fill: 'black'
});
console.log('rr', x, y);
return rectangle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.