Part 5 - JS

[Ralex2105]

Снова не придумал, куда девать кнопку смену темы - она за пределами "визитки". Пока не представляю, как можно сделать корректный ввод больших слов (он ограничен 16 символами - название навыка), для отсутствия смещения текста вниз, максимальное колиечство навыков = 9.

[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 и начни использовать раздельныые js файлы для разной логики, утилиты смена темы и скилы. Оставь 1 общий файл для инициализации с событием domcontentlaoded а остальное разбей на файлы и используй import.

[BusinessDuck]

уязвимость XSS?

[BusinessDuck]

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

[Ralex2105]

Вызывается метод addSkill, в нем по идее Александра Косницкого (если не ошибаюсь) идет преобразование знаков, а также проверка имени на определенную длину (не нашел пока способ сделать так, чтобы не расползалось и вниз, и вверх), а после уже вызывается метод createSkil, параметрами которого являются безопасные для инъекции наборы символов.

[BusinessDuck]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event Тут нужно вот это событие, тогда будет работать Enter, просто клик значительно хуже трекать чем полноценный сабмит формы

[BusinessDuck]

Снова не придумал, куда девать кнопку смену темы - она за пределами "визитки". Пока не представляю, как можно сделать корректный ввод больших слов (он ограничен 16 символами - название навыка), для отсутствия смещения текста вниз, максимальное колиечство навыков = 9.

Кнопку можно в кголок аккуратно сделать иконкой лампочки или месяца, обычно это делается так

[BusinessDuck]

format: 'iife', не life

[BusinessDuck]

сборка по факту не работает изза отсутсвия lock файла, тянется версия 6.3.0 а она не поддерживает старый gulp, чтобы исправить жэто нужно убраь ^, "gulp-image": "6.2.1", ^ - означает не строгую версию и можно подтянуть обновление автоматом если оно есть

[BusinessDuck]

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

1. Локаничный код и простой.
2. Стиль выбран функциональный и все сделано в едином духе, с довольно неплохой структурой.
3. Есть импорты
4. Защита от XSS

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

1. Импорты не правильно используются, ты импортируешь просто файлы, это обеспечивает попадание кода в общую кучу при сборке, но при этом сами функции из кода не выглядят как доступные для IDE, тайпскрипт бы вообще так не дал сделать скорее всего. Необзодимо делать импорт конкретного свойства например

// modulea.js

export function test() { ... }

// dependsfroma.js
import { test } from './modulea';

test():

2. Проект и сборка сломаны по факту не получилось запустить ничего с ходу, подправил сборку запустил но добавить скилл так и не смог не отработало.
3. Стили полей или недоделаны или их просто нет, поля ввода совсем не заметны им бы не помешал бордер какой-то а возможно и белый фон.

---

Итог: 27/40