Homework 5

[zadorotskas]

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]

В настройках Rollup, укажи вместо 'esm' -> 'iife' сборку, и тгда можно будет использовать import конструкцию, обязательно разбей все тут на несколько файлов JS разных чтобы было проще понять что происходит.

[BusinessDuck]

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

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

[BusinessDuck]

FYI (просто для справки) еще альтернативный подход к шаблонизации https://developer.mozilla.org/ru/docs/Web/HTML/Element/template

[BusinessDuck]

это + 2 балла

[BusinessDuck]

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

1. Верстка в целом выглядит красиво, но есть проблемки мелкие
2. Работают горячие клавиши по добавлению
3. Очень локаничный код в функциональном стиле
4. Есть XSS защита

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

1. Все в одном файле нет импортов
2. Кнопки некоторые мелковаты и не вписываются в UI, выделяются, также кнопка добавления огромная очень
3. Вероятно стоило бы разделить страницу на 2, одна со скилами другая просто с текстом

---

Итого: 38/40