Part5

[coradead]

No description provided.

[BusinessDuck]

Можно оставить текущую реализацию, вот пример каркаса реализации в стиле ООП

export class Skill {
    constructor(readonly name: string, readonly value: number) {}
}

export class SkillList {
    private list: Array<Skill>;

    constructor() {
        this.list = [];
    }

    add(skill: Skill) {
        this.list.push(skill);
    }

    remove(skill: Skill) {
        this.list.splice(this.list.indexOf(skill), 1);
    }
}

export class SkillView {
    constructor(private skill: Skill) {}

    render() {
        return this.HTML(`<div class="skill">${this.skill.name}<span>${this.skill.value}</span></div>`);
    }

    private HTML(str: string) {
        // @ts-ignore
        return repalceHtmlEntities(str);
    }
}

export class SkillListView {
    private list: Array<SkillView>;

    render() {
        return this.list.map(skill => skill.render()).join('');
    }
}

export class SkillListController {
    private skillList: SkillList;
    private skillListView: SkillListView;

    constructor(private target: Element) {...}

    addSkill(...) {
        // ...
        const skill = new Skill('123', 33);
        this.skillList.add(skill);
        this.target.innerHTML = this.skillListView.render();
    }
}

// index.ts

const target = document.querySelector('.target');
const skillController = new SkillListController(target);

// В идеале вообще использовать Observer Pattern

// index2.ts
const target = document.querySelector('.target');
const model = new SkillList();
const skillController = new SkillListController(target, model);

function addSkill() {
    model.push({ name: 'asdf', value: 33 });
}

function removeSkill(idx) {
    model.removeSkill(idx);
}

// И где-то внутри контроллера скилов
// Мы подписались на изменения модели, то есть при добавлении и удалении элемента вызовется коллбек. Паттерн 
 Observer можно посмотреть тут
https://monsterlessons.com/project/lessons/observer-pattern-v-javascript
this.model.subscribe((model => {});

[BusinessDuck]

Интерфейс выглядит приятным, но не работает Enter при добавлении, это связано с тем как ты отслеживаешь добавление, нужно трекать событие submit, у формы.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event

Так будет нативная поддержка нажатия enter и добавление сработает.
Также если добавить слишком много скилов все разъезжается.
В остальном по UI вопросов не возникло.

[BusinessDuck]

Почму используется конструкция раздельных строк кода через сложения, есть же литералы Hello! ${name.toString()}, также вызов toString() не имеет смысла переменная сама приводится к строке

[BusinessDuck]

Просто для информации есть возможность использовать темплейты для реализации https://developer.mozilla.org/ru/docs/Web/HTML/Element/template, но текущий способ тоже ок, если подправить на современные литералы строки

[BusinessDuck]

Тут также возможно нужно событие DOMContentLoaded, с ним будет надежнее

[BusinessDuck]

Хорошая реализация в классическом JS стиле, почему выбрал функциональную реализацию? Какие плюсы у такого подхода и какие недостатки?

[BusinessDuck]

iife тут и можно использовать import синтаксис в файлах js проекта

[coradead]

Да, при откате случайно изменилось, сори

[BusinessDuck]

Что понравилось

1. Не любишь фронтенд, но стили сделал здорово, даже если взял откуда-то это все равно ок
2. Функциональый стиль выбран и выглядит гармоничным, кода получилось мало
3. Работа напрямую сразу с ДОМ элементами

Что не понравилось

1. Не любишь фронтенд ^_^
2. Нет импортов и разделения на файлы
3. Сборка не работает какие-то ошибки в стилях

Замечания по Шредингеру которые возможно есть а возможно нет (не смог без сборки глянуть)

1. По коду вроде бы видна обработка сабмит события формы, значит должен работать enter, для добавления скила, но в текущем файле приложения не работает.

---

Итог 30/40