Как создать маленькую JS-библиотеку по типу jQuery

Йо-йоу! Оказывается это актуально. Особенно для «юнлингов», которые читают мой сайт. Хотел бы сразу сказать, что js я сам постигаю крайне тяжело и мой путь в js тернист. Как правило задачи, которые мне нужно решить на javascript, происходят из-за моей лени. Недавно (февраль 2019) один из моих клиентов сменил сайт с которого берет контент. Что на новом, что на прошлом источнике есть много однотипных таблиц. Для прошлого сайта мой коллега написал мне на PHP парсер и в итоге отдавал мне готовый html для сайта моего клиента. Но мой коллега уволился, а у меня нет настолько хороших познаний в PHP. И я воспользовался javascript’ом. Вот  что получилось. Вам конечно это не пригодиться, но я хотел сказать о другом. Если у вас возникает каждый раз одна и та же задача, не стоит каждый раз писать код. Вы можете сохранить ваше решение иногда в виде маленькой библиотеки.

Цель

Библиотека которую мы сделаем будет содержать 4 метода:

• Устанавливать фон (background)
• Устанавливать цвет текста (color)
• Устанавливать отступы (padding)
• Устанавливать высоту пропорционально ширине

Реализация

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

Не забудьте подписаться на него. Будет много интересного.

Итак, собственно реализация. Для начала мы объявим переменную, в которой будет храниться наша библиотека.

const lib = ()=>{};

Для проверки мы можем вызвать. Но она ничего не сделает, добавим хотя бы console.log

const lib = ()=>{ console.log('---') };
lib();
//=> '---'

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

const lib = (s)=>{ console.log(s) };
lib('#app');
//=> '#app'

Давайте получим элемент и запишем его в this

const lib = (s)=>{ this.element = document.querySelector(s); };
lib('#app');

Далее нам нужно преобразовать, написав нашу функцию, которая будет изменять фон полученного элемента

const lib = (s)=>
{
    this.element = document.querySelector(s);
    this.setBg = (bg)=>{
        this.element.style.background = bg;
    }
}
lib('#app').setBg('red');

Это уже почти готовый код, однако, нам нужно сделать одну важную вещь. Каждый раз наша функция должна возвращать this. Итак, добавим нужный код.

const lib = (s)=>
{
    this.element = document.querySelector(s);
    this.setBg = (bg)=>{
        this.element.style.background = bg;
        return this;
    }
    return this;
}
lib('#app').setBg('red');

Далее, используя тот же самый подход, пишем остальные функции. В итоге мы получим наш код.

Результат

const lib = (s)=>
{
    this.element = document.querySelector(s);
    this.setBg = (bg)=>{
        this.element.style.background = bg;
        return this;
    }
    this.setColor = (c)=>{
        this.element.style.color = c;
        return this;
    }
    this.setPadding = (p)=>{
        this.element.style.padding = p;
        return this;
    }
    this.setHeightByWidthProportion = (proportion)=>{
        let v = this.element.offsetWidth * proportion;
        this.element.style.height = v + 'px';
    }
    return this;
}
lib('#app').setBg('red').setColor('white').setPadding('60px 20px').setHeightByWidthProportion(0.02);

PS

Недавно мне очень захотелось сделать что-то подобное. В итоге это превратилось в полезную библиотеку Stickjaw. Она нужна для управления пропорциями элементов. Сейчас она доступна для установки с github и npm. Если вы уже пользовались ей, то поделитесь впечатлениями в комментариях.