Каким образом можно отрефакторить такой код?

Question

[WarriorKodeK]

Привет. Каким образом можно отрефакторить этот код так, чтобы он выглядел более лаконичным и читабельным
?

($(element) as any).keydown(function(e) {
    const {
        target: {
            selectionStart,
            selectionEnd
        },
        keyCode
    } = e;
    const htmlNode = $(this);
    const inputValue = htmlNode.val();
    const selectedValue = inputValue.substring(selectionStart, selectionEnd);
    const splittedTime = splitTime(inputValue);
    if (selectedValue) {
        if (e.which === 37) { // if left
            e.preventDefault();
            if (selectionStart === 0 && selectionEnd === 2) {
                setTimeout(() => {
                    this.setSelectionRange(selectionStart, selectionEnd);
                }, 1);
            } else if (selectionStart === 3 && selectionEnd === 5) {
                setTimeout(() => {
                    this.setSelectionRange(0, 2);
                }, 1);
            } else if (selectionStart === 6 && selectionEnd === 10) {
                setTimeout(() => {
                    this.setSelectionRange(3, 5);
                }, 1);
            }
        } else if (e.which === 39) {
            e.preventDefault();
            if (selectionStart === 0 && selectionEnd === 2) {
                setTimeout(() => {
                    this.setSelectionRange(3, 5);
                }, 1);
            } else if (selectionStart === 3 && selectionEnd === 5) {
                setTimeout(() => {
                    this.setSelectionRange(6, 10);
                }, 1);
            } else if (selectionStart === 6 && selectionEnd === 10) {
                setTimeout(() => {
                    this.setSelectionRange(selectionStart, selectionEnd);
                }, 1);
            }
        } else if (keyCode === 38 || keyCode === 40) {
            e.preventDefault();
            const action = keyCode === 38 ? Enums.ValueActions.increment : Enums.ValueActions.decrement;
            changeAppendix(splittedTime, selectedValue, htmlNode);
            adjustTime(splittedTime, htmlNode, action, selectionStart, selectedValue);
            this.setSelectionRange(selectionStart, selectionEnd);
        }
    }
});

Answer 1

[Иван Клименко]

($(element) as any).keydown(e => {
    const {
        target: {
            selectionStart,
            selectionEnd
        },
        keyCode: direction
    } = e;

    const htmlNode = $(this);
    const inputValue = htmlNode.val();
    const splittedTime = splitTime(inputValue);
    const selectedValue = inputValue.substring(selectionStart, selectionEnd);

    if (!selectedValue) { return; }

    const Point = (x, y) => ({x, y});
    const points = [Point(0, 2), Point(3, 5), Point(6, 10)];
    const targetPoint = Point(selectionStart, selectionEnd);

    const LEFT = 37;
    const UP = 38;
    const RIGHT = 39;
    const DOWN = 40;

    if ((direction === LEFT) || (direction === RIGHT)) {
        e.preventDefault();
        const index = points.findIndex(p => ((p.x === targetPoint.x) && (p.y === targetPoint.y)));
        if (index === -1) { return; }
        index += ((direction === LEFT) ? points.length : 1);
        points.push(targetPoint);
        const point = points[index % points.length];
        this.setSelectionRange(point.x, point.y);
    }

    if ((direction === DOWN) || (direction === UP)) {
        e.preventDefault();
        const Actions = Enums.ValueActions;
        const action = ((direction === DOWN) ? Actions.decrement : Actions. increment);
        changeAppendix(splittedTime, selectedValue, htmlNode);
        adjustTime(splittedTime, htmlNode, action, selectionStart, selectedValue);
        this.setSelectionRange(selectionStart, selectionEnd);
    }
});

Comments

[WarriorKodeK]

Спасибо!
Круто написано, но есть несколько ошибок.

Когда кликаем вправо, то у нас не происходит рекалькуляция и point остаеться на том же месте.

[Иван Клименко]

WarriorKodeK, в строчке

index += ((direction === LEFT) ? points.length : 1);

вместо единицы был ноль, попробуйте ещё раз.

[WarriorKodeK]

Иван Клименко, Спасибо!!

[Иван Клименко]

WarriorKodeK, замечательно, рад что помог

Answer 2

[Арсений Матыцин]

Нус для начала можно вынести где-то вверх e.preventDefault();, при беглом осмотре я увидел это при всех условиях.

Дальше до каждого третьего условия я вижу логику selectionStart\selectionEnd + 2, т.е. тоже можно сократить.

Ну и в вопросе лучше изменить формулировку

более лаконичнее и читабельнее

На

более лаконичным и читабельным

Или вовсе убрать «более».

Comments

[WarriorKodeK]

Если вынести наверх preventDefault(), то в input'e нельзя будет тайпать любое значение

[Арсений Матыцин]

Короче говоря работать есть над чем. Я в вас верю.