[jQuery] Плагин Events для jQuery

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
24-Июл-2020 15:32

Цитировать

Я разработал свободный плагин Events для jQuery. После чего плагин выложил на GitHub.
Назначение плагина, позволить привязывать теги к переменным.
В последствии чего задав новое значение переменной все привязанные теги на странице обновятся.
Простой Пример
У нас имеются теги для отображения данных:

0
0
0
0

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

jQuery().event('cost', '.ammount');
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% больше чем значение переменной.
Результат:

200
200
200
240

Написав этот плагин я обнаружил для себя аналогичную функциональность (bind(),on(),trigger()) из коробки в jQuery. Но изучив, я выяснил что функции (bind(),on(),trigger()) работают только с функциями. А мой плагин рассчитан в основном на привязку к HTML тегам и отображение информации согласно форматированию строк.
Я понимал что этот плагин будет выполнять функции React и Angular. Но это не совсем так.
Задача плагина Events быть понятным, простым для новичков, и выполнять свои функции для тех у кого уже подключен jQuery.
Много разработчиков используя jQuery подключают дополнительно весь React чтобы только связывать переменные. А ведь разработчику нужно на сайте только список цен скопировать в корзину.
Это плагин для большинства компаний сайт которых выполняет функцию формы заказа и продажи услуг. Этот плагин предназначен для лендингов для продажи и заказа всего нескольких услуг, т.е. для простых сайтов с простой функциональностью.
Например сайт для фирм: Стоматологического кабинета, или фирмы по продаже могильных плит, мебели или ремонт квартир.
Особенность плагина в том что мы имеем:

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

Продолжу описание.
Теперь зададим новое значение:

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

Результат:

6000
6000
6000
7200

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

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

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

jQuery().event('cost', '.ammount', 'Это общая сумма покупки {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);

Результат:

Это общая сумма покупки 20 $
Сумма 20 $
20 $
Сумма с налогом 24 $

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

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

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

jQuery().event('cost', '.ammount', 'Покупатель {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:5};
jQuery().var('cost',user);

Результат

Покупатель Мадонна Чикко́не покупок на сумму 20 $.
Средняя цена 20 $ с количества продуктов 4
Мадонна: 20 $
Средняя цена: 5 $ для 6 $ с налогом.

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

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 уже свое отжил и он не удовлетворяет потребностям рынка, и поэтому для него писать плагин нет смысла.
А я отвечу, что ведь потому и не удовлетворяет, что в нем не было простых всем нужных функций.
Теперь буду надеяться, что мир станет немножко лучше. И надеюсь что теперь на свет появилось что то интересное.
Как думаете у Вас бы лично пригодился бы плагин в одном из Ваших проектов? Буду рад любым комментариям.
Ваш Сергей.
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_jquery, #_javascript, #_jquery, #_jquery_plugin, #_jquery_plugins, #_jquery_events, #_jquery

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 23-Ноя 05:05
Часовой пояс: UTC + 5