Konvertieren ES6 Javascript in ES5 ohne Transpiler

Question

Ich bin nicht vertraut mit neuen JavaScript ES6-Kodierung Konventionen und haben einige Code, wo ich es benötigt werden, um alte JavaScript ES5.

Würde es wirklich schätzen, dass Leute mit der Umwandlung dieses js Codes ohne den Gebrauch von Babel oder irgendeinem anderen transpiler helfen konnten.

Kann Babel nicht als am Arbeitsplatz erlaubt verwenden.

Ich erkenne, dass alle "const" in "var" umgewandelt werden kann, aber neue Pfeilfunktionen und andere Elemente unsicher sind.

Haben Sie versucht Umwandlung aber immer:

Uncaught Reference: Linie ist nicht

Der ES6 Code definiert, die ich ES5 mag umgewandelt würde, ist:

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; 
} 

Answer 1

Ich gehe davon wird, dass Da Sie mit es6 nicht vertraut sind, sind Sie wahrscheinlich nicht sehr vertraut mit babeljs.io, die Ihnen eine Option gibt, um zurück zu konvertieren:

Überprüfen Sie diese link oben.

"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; 
}