Плагин Events для jQuery / Хабр

Я разработал свободный плагин Events для jQuery. После чего плагин выложил на GitHub.

Назначение плагина, позволить привязывать теги к переменным.

В последствии чего задав новое значение переменной все привязанные теги на странице обновятся.

Простой Пример

У нас имеются теги для отображения данных:

<span class='amount'>0</span>
<span class='cart_cost'>0</span>
<span class='order_cost'>0</span>
<span class='order_cost_tax'>0</span>

Вначале мы привязываем значения HTML тэгов и функций к имени переменной.

jQuery().event('cost', '.amount');
jQuery().event('cost', '.cart_cost');
jQuery().event('cost', '.order_cost');
jQuery().event('cost', '.order_cost_tax',function(){ return this*1.2});
jQuery().event('cost', function(){ console.log('Стоимость продуктов:',this)});

Теперь зададим значение переменной.

jQuery().var('cost',200);

Одной командой мы разместили во всех привязанных тегах к переменной cost значение 200, а в теге .order_cost_tax разместили значение 240, что на 20% больше чем значение переменной.

Результат:

<span class='amount'>200</span>
<span class='cart_cost'>200</span>
<span class='order_cost'>200</span>
<span class='order_cost_tax'>240</span>

Написав этот плагин я обнаружил для себя аналогичную функциональность (bind(),on(),trigger()) из коробки в jQuery. Но изучив, я выяснил что функции (bind(),on(),trigger()) работают только с функциями. А мой плагин рассчитан в основном на привязку к HTML тегам и отображение информации согласно форматированию строк.

Я понимал что этот плагин будет выполнять функции React и Angular. Но это не совсем так.

Задача плагина Events быть понятным, простым для новичков, и выполнять свои функции для тех у кого уже подключен jQuery.

Много разработчиков используя jQuery подключают дополнительно весь React чтобы только связывать переменные. А ведь разработчику нужно на сайте только список цен скопировать в корзину.

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

Например сайт для фирм: Стоматологического кабинета, или фирмы по продаже могильных плит, мебели или ремонт квартир.

Особенность плагина в том что мы имеем:

форматирование строк
Привязка объектов
Привязки постоянная или только на один раз для тега или функции.
Форматирование строк для каждой отдельной привязки.

Продолжу описание.

Теперь зададим новое значение:

jQuery().var('cost',6000);

Результат:

<span class='amount'>6000</span>
<span class='cart_cost'>6000</span>
<span class='order_cost'>6000</span>
<span class='order_cost_tax'>7200</span>

Задав функцией jQuery().var('cost',6000); мы автоматически меняем все значения привязанные к cost.

Удаляем привязку к переменной

jQuery().event('cost', false);

//Все теги и функции привязанные к переменной cost будут удалены.

Второй пример

Форматирование строк

Создаем новую привязку к переменной:

jQuery().event('cost', '.amount',      'Это общая сумма покупки {0} $');
jQuery().event('cost', '.cart_cost',    'Сумма {0} $');
jQuery().event('cost', '.order_cost',   '{0} $');
jQuery().event('cost', '.order_cost_tax',function(){return 'Сумма с налогом  ${this*1.2} $'});

Заносим

jQuery.var('cost',20);

Результат:

<span class='amount'>Это общая сумма покупки 20 $</span>
<span class='cart_cost'>Сумма 20 $</span>
<span class='order_cost'>20 $</span>
<span class='order_cost_tax'>Сумма с налогом 24 $</span>

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

Теперь указывая jQuery().var('cost',20); новые значения автоматически отображаются в привязанных HTML тегах.

Удаляем привязку к переменной

jQuery().event('cost', false);

//Все теги и функции привязанные к переменной cost будут удалены.

Третий пример

Привязка объекта

jQuery().event('cost', '.amount',      'Покупатель {FirstName} {LastName} покупок на сумму  {Cost} $.');
jQuery().event('cost', '.cart_cost',    'Средняя цена {Cost} $ с количества продуктов {CountProducts}');
jQuery().event('cost', '.order_cost',   '{FirstName}: {Cost} $');
jQuery().event('cost', '.order_cost_tax',function(){ let averagePrice = this.Cost/this.CountProducts; return 'Средняя цена: ${averagePrice} $ с налогом ${averagePrice*1.2} $.'});

Заносим объект в привязку

let user = {FirstName:'Мадонна',LastName:'Чикко́не',Cost:20,CountProducts:4};
jQuery().var('cost',user);

Результат

<span class='amount'>Покупатель Мадонна Чикко́не покупок на сумму 20  $.</span>
<span class='cart_cost'>Средняя цена 20 $ с количества продуктов 4</span>
<span class='order_cost'>Мадонна: 20 $</span>
<span class='order_cost_tax'>Средняя цена: 5 $ для 6 $ с налогом.</span>

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

Теперь указывая

jQuery().var('cost',20);

новые значения автоматически отображаются в привязанных HTML тегах.

Формат Привязок

jQuery().event(variableName, SelectorName); 
jQuery().event(variableName, function(e){}); //Привязка функции
jQuery().event(variableName, false, SelectorName);  //Привязка функции только один раз
jQuery().event(variableName, false, function(e){}); //Привязка функции только один раз
jQuery().event(variableName, SelectorName, FormatString); //Привязка к селектору  с Форматированием строки
jQuery().event(variableName, SelectorName, function(e){}); //Привязка к селектору элементов с Форматированием строки в функции
jQuery().event(variableName, SelectorName, false); // Отвязка селектора элемента
jQuery().event(variableName, bindName, SelectorName);//Привязка элементов селектора с именем для последующей отвязки
jQuery().event(variableName, bindName, function(e){}); //Привязка функции с именем, для последующей отвязки
jQuery().event(variableName, bindName, false); // Отвязка одного элемента по имени
jQuery().event(variableName, false); //Отвязка всех привязанных элементов для одной переменной

Формат Переменной

let name=jQuery().var(variableName); // Получение значения переменной
jQuery().var(variableName,variableValue); // Установка значения переменной
jQuery().var(variableName,variableObject); // Установка объекта переменной
jQuery().var(variableName,null); // Удаление переменной

Формат функции события:

function(e){
    e.unbind(); //Отвязка функции.
    e.id; //селектор элемента
    e.elements; //jQuery элементы
    e.value; //Используется для получения значения заданной переменной.
    this; //Используется для получения значения з��данной переменной.
    return false; //Отвязка этой функции от переменной.
    return "Дорогой {0} мой клиент!"; //Возвращает форматированную строку для показа в HTML 
    return 'Строка показываемая в HTML элементе'; // Возвращает строку для показа в HTML элементе
}

Формат строк

{this} - указание значения переменной в строке;

{0} - указание значения переменной в строке;

{value} - указание значения переменной в строке;

{FirstProp} - указание свойства объекта в строке

{SecondProp} - указание свойства объекта в строке

{ThirdProp} - указание свойства объекта в строке

Пример 1: "Дорогой {0} мой клиент!" 

Пример 2: "Дорогой {FirstProp} {SecondProp} мой клиент"

Альяс плагина (Короткая форма функций)


    jQuery.e(); //альяс для jQuery().event()
    jQuery.v(); //альяс для jQuery().var()
//Пример:
    $.e('cost','.cost'); // Короткая запись для Event
    $.v('cost',100); // Короткая запись для Var

Эпилог

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

А я отвечу, что ведь потому и не удовлетворяет, что в нем не было простых всем нужных функций.

Теперь буду надеяться, что мир станет немножко лучше. И надеюсь что теперь на свет появилось что-то интересное.

Как думаете у Вас бы лично пригодился бы плагин в одном из Ваших проектов? Буду рад любым комментариям.

Ваш Сергей.

PS Комментатор friday заметил что эта библиотека не умеет привязывать Списки по шаблону, как это умеют делать `backbone` с `marionette`.
Это не так, вот совсем простой пример в прежней версии:

Привязка массива объектов


jQuery().event('listUsers','.listUser',function(){ 
    let html = '';
    for(let user of this){
        html += "<div> <span>${user.FirsName}</span>  <span>${user.LastName}</span> зарплата:  ${user.Amount} ₽ </div>";
    }
    return html;
});

let users = [
    {FirsName:'Сергей',LastName:'Кореневский',Amount:'5000000' },
    {FirsName:'Иван',LastName:'Васютин',Amount:'1000000' },
    {FirsName:'Вика',LastName:'Мальцева',Amount:'5000000' },
];

jQuery().var('listUsers',users,'');
//3-й параметр ''(пустая строка) в меоде var() сообщает что массив/объект будет применен целиком к тегу или функции. Подробнее смотреть

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

Благодаря справедливой критике комментаторов ниже. Я доработал и добавил новые функции:

Динамическая привязка массива
Динамическая привязка объекта
Загрузка и выгрузка всех привязок в плагин одной коллекцией.
Форматирование строки с данными объекта ~~почти готово~~.

Динамическая привязка массива

Это позволяет добавлять элемент или свойства привязанного массива или объекта динамически, добавляя(изменяя, удаляя) дочерний тег.
Пример:


<div class='people'></div>

Привязываем:


jQuery().event('users', '.people');

Создаем объект и применяем


var usersList =[
    'Сергей Кореневский',
    'Виктория Мальцева',
    'Мадонна Чиконе',
    .........
];
jQuery().var('users', usersList);

В результате получаем:


<div class='people'>
    <div>Сергей Кореневский</div>
    <div>Виктория Мальцева</div>
    <div>Мадонна Чиконе</div>
</div>

А также мы теперь можем добавлять(изменять, удалять) динамически элементы списка.


jQuery().var('users', 'Бред Пит', true);// формат Добавления нового элемента

Результат:


<div class='people'>
    <div>Сергей Кореневский</div>
    <div>Виктория Мальцева</div>
    <div>Мадонна Чиконе</div>
         <div>Бред Пит</div>
</div>

В списке добавилась новая позиция.
Теперь мы удалим и изменим одну из существующих позиций ссылаясь только лишь на привязанный массив.


jQuery().var('users', 'Мадонна Чиконе', false);// формат Удаления элемента
jQuery().var('users', 'Анджелина Джоли', 1);// формат Изменения элемента с индексом 1
jQuery().var('users', null, 3);// формат Удаления элемента с индексом 3
jQuery().var('users', 'Дженифер Лопез', true);// формат Добавления нового элемента
jQuery().var('users', 'Дженифер Лопез', 5);// формат Добавления нового элемента с индексом 5

1.Мы удалили тэг с 'Мадонна Чиконе' в списке, удалив элемент массива с этим именем.
2.Мы изменили содержимое тега с индексом 1 в массиве на 'Анджелина Джоли'.
3.Мы удалили тег с содержимым, удалив позицию в массиве по индексу
4.Добавили новый тег с содержимым 'Дженнифер Лопез' в конец списка.
5.Добавили новый тег с содержимым 'Дженнифер Лоуренс' добавив в массив по индексу 5.

Динамическая привязка объекта


<div class='person'></div>


jQuery().event('user', '.person');//Привязываем к тегу HTML
var userData ={
    FirstName:'Сергей',
    LastName:'Кореневский',
    salary: 200000,
};
jQuery().var('user', userData);//Фиксируем значение в HTML

Результат:


<div class='person'>
    <div>Сергей</div>
    <div>Кореневский</div>
    <div>200000</div> 
</div>

Меняем значения объекта привязанного к HTML по аналогии с массивом:


jQuery().var('user', null,'FirstName');// формат Удаления свойства
jQuery().var('user', 'Герой','FirstName');// формат добавления нового свойства
jQuery().var('user', 500000,'salary');// формат изменения значения свойства элемента.
//Так же как с форматом привязки массива можно добавлять новые свойства с индексом.
//Привязка объекта содержит в себе функционал для привязки массива.
//Разницы нет, либо указываем 3-им параметром индекс массива, либо имя свойства объекта.

Формат 3-его параметра метода VAR():


jQuery().var('users', ОбъектМассив, '');//3й параметр ('') пустая строка. Применить объект/массив целиком для тега/функции
jQuery().var('users', ОбъектМассив, null);//3й параметр (null). Применять объект/массив каждый раз для каждого дочернего тега/функции, создавая вложенные теги.
jQuery().var('users', ОбъектМассив, undefined);//3й параметр (undefined). Применять  объект/массив будет по разному: 
//если ОбъектМассив будет массивом то будет применяться каждый раз для дочерних тегов/ф-ии в виде списка, так же как jQuery().var('users', ОбъектМассив, null) для массива
//если ОбъектМассив будет объектом то примениться объект целиком для тега/ф-ии к одной строке, так же как jQuery().var('users', ОбъектМассив, '') для объекта
//если ОбъектМассив будет обычным значением, то применит целиком для тега/ф-ии.
jQuery().var('users', ЗначениеCвойства, false);// формат Удаления элемента с этим значением из уже примененного объекта/массива
jQuery().var('users', ЗначениеCвойства, true);// формат Добавление нового свойства к уже существующему объекта/массива.
jQuery().var('users', ЗначениеCвойства, 3);// формат Изменения свойства с индексом 3 у объекта/массива.
jQuery().var('users', null, 3);// формат Удаления элемента с индексом 3
jQuery().var('users', ЗначениеCвойства, 'Имя свойства');// формат Изменения свойства  у объекта/массива.
jQuery().var('users', null, 'Имя свойства');// формат Удаления свойства у объекта/массива.
jQuery().var('users', ЗначениеCвойства, {property:'Имя свойства',... и пр.});// формат задания особых параметров значений/объектов/массивов для применений новых значений в любых из выше используемых вариантах, а так же с поддержкой дополнительных параметров со своими форматами строк, тегами, классами, и пр.

Расширенный функционал/ Формат 3-го параметра как объекта для метода VAR()


let setting = {
    tagListItem: 'li', //Имя тэга для дочернего элемента, по умолчанию DIV
    classListItem:'classTagChildren', //Имя класса тега дочернего элемента
    onlyone: true, //Параметр выполнения привязанного события только один раз.
    format: '{this}',//форматирование строки для дочерних тегов объекта или для простого значения
    anyData: {data1:'Какая то инфа'},//Любая инфа которая может быть нужна в привязанном методе.
};
//объект setting полностью передается в привязываемый метод, Вы можете указывать здесь любые данные для передачи.
jQuery().event('user', '.person',setting);//Привязываем только этот тег с новыми параметрами.
jQuery().var('user', user, setting);//Передаем новые параметры всем привязкам только этого объекта.

Загрузка/выгрузка привязок


let events = {};
events['user']['.person'] = function(value,data){ return 'Имя {value.name}, на руки '+(0.8*value.salary)};
events['user']['.status'] = 'Мой имя {value}, моя зарплата {salary}';
jQuery().event(events);//Загрузка всех привязок в плагин

let eventsUser = {};
eventsUser['.person'] = function(value,data){ return 'Имя {value.name}, на руки '+(0.8*value.salary)};
eventsUser['.status'] = 'Мой имя {value}, моя зарплата {salary}';
jQuery().event('user', eventsUser);//Загрузка всех привязок в плагин только для переменной users.
//'user' - имя переменной /Первый параметр в как для метода $.event() 
//'.status', '.person' - Срока селектора /Второй параметр в как для метода $.event() 

jQuery().event();//Выгрузка всех привязок из плагина.

jQuery().var();//Выгрузка всех переменных из плагина.
jQuery().var([...]);//Загрузка всех переменных в плагин.

Новый план

Доработка форматирование строк
Добавление реактивности: Привязки к элементам управления INPUT, SELECT и других, для обновления обратной связи в привязанных переменных.

PS

Надеюсь теперь верующие jQuery не будут принимать веру Vue, Angular, React и другие. Мир будет справедлив и многообразен и каждому будет своя сторона.