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

Создание маленькой 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. Если вы уже пользовались ей то поделитесь впечатлениями в комментария.