Homework5_Kiselyov_Alexander

[AlexanderKiselyov]

No description provided.

[AlexanderKiselyov]

Проверять необходимо только последний коммит.

[BusinessDuck]

В чате написал только что что тут можно поменять на iife и свободно использовать import в js файлах. Сделай пожалуйста, а то очень большие JS файлы

[BusinessDuck]

Круто что ты заморочился роутингом, роутер стоит сделать отдельным модулем точно , чтобы не путался
под ногами в общих файлах. Кстати есть у меня какой-то роутер, может будет чем-то полезно https://github.com/BusinessDuck/html5-history-router

[BusinessDuck]

примерная структура может выглядеть вот так

/src/
     index.js // Файл который запускает приложение
     /skills/
         - skill.js
         - utils.js
         - ...
     /themes/
     ....
         

[BusinessDuck]

про роутинг это вот это

[BusinessDuck]

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

[BusinessDuck]

можно и нужно использовать let/const вместо var

[BusinessDuck]

нужно обрабатывать событие формы, а не кник по кнопке https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event

[BusinessDuck]

Посмотри пример в ООП, но можно сделать и по своему.

Исправить замечания, определиться с подходом функционально или ООП, обязательно разделить файлы JS на составные и использовать import. Не держать всю логику в DOMContentLoaded обработчике.

Сейчас в основном применяется в разработке реактивный подход. Это когда состояние модели описано отдельно, а UI изменяется в зависимости от изменения модели. То есть у тебя есть массив данных в нашем случае это скилы, в него добавляются или удаляются скилы, и в зависимости от вида манипуляции с моделью DOM реагирует на это и перестраивается, вот ниже пример как этого можно добиться. Однако будет ряд трудностей, во первых не понятно как грамотно перерисовывать содержимое, потому что может удалиться элемент в середине, и как-то нужно вычислить, какой это элемент и удалить его точечно, также элемент может добавиться в конец или в начало (не в нашем случае а в общем). Все эти перерисовки сложно управляемы. Эту задачу решают фреймоврки как раз.

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

Вот еще несколько примеров реализации от меня

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]

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

1. Мало кода в целом
2. Функциональный стиль во всей красе
3. Дизайн и переходы по страницам
4. Попытка Роутинга пусть и не совсем правильная

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

1. Не смог запустить проект
2. type=module, но сборка iife, она не требует этот тип
3. type: "module" в package.json не нужен он не дает нормально жить сборке
4. Не работает сборка gulp, пришлось чинить, не правильно был задан путь и лишние типы модулей не давали ей работать, также версия пакета gulp-image, устанавливалась новая изза ^ в начале версии, и не запускалась на текущей версии gulp. Еще не импортируются pages/skills.html в сборку, не указано src/**/*.html в настройках gulp для сборки файлов html
5. Когда все завелось в итоге скилл 2жды добавляется на сабмит
6. Дизайн не оч, красная кнопка перебор)

---

Итого 25/40