Homework5

[Pobedos]

No description provided.

[BusinessDuck]

Очень хорошо все читается, хороший метод

[BusinessDuck]

Архитектурное начало хорошее, очень даже, давай еще немного сгруппируем логику. У нас есть Контроллер добавления и удаления скилов, есть скилы. Надо сделать SkillView, чтобы там была только логика отрисовки скила, перерисовки можно сделать на любой чих пых полные, то есть добавл или удалил элемент, перерисовал все что есть в HTML, но лучше конечно оптимизировать немного, мы жа знаем когда удаление а когда добавление. И можем в целом и связь DOM -> Модель дердать где-то, чтобы если удалился из массива элемент удалять и в DOM

[Pobedos]

Постарался переделать, используя typescript

[BusinessDuck]

Тут тип не обязательно указывать, по идее getElementById вернет нужный тип автоматически

[BusinessDuck]

Првоерил, он возвращает просто Element, тип можно оставить

[BusinessDuck]

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

[BusinessDuck]

можно startSkills просто положить в skills в конструкторе пройтись по нему и отрисовать все

[BusinessDuck]

Мне нравится как получилось, и визуально и по горячим клавишам все работает, ты молодец.

В текущей реализации гораздо проще убрать список скилов и опереться только на DOM элементы, тебе он в целом не нужен, он просто дублирует состояние. В реактивной реализации список был бы обособлен.

[BusinessDuck]

Мне нравится как получилось, и визуально и по горячим клавишам все работает, ты молодец.

В текущей реализации гораздо проще убрать список скилов и опереться только на DOM элементы, тебе он в целом не нужен, он просто дублирует состояние. В реактивной реализации список был бы обособлен.

Вот о чем я

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]

Но мне нравится как получилось, можно оставить и так.

[BusinessDuck]

Все круто 40/40

Разберись с импортами когда стоит использовать export default, а когда просто export

+15 баллов раскидал на остальные дз