Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Я разработал свободный плагин Events для jQuery. После чего плагин выложил на GitHub.
Назначение плагина, позволить привязывать теги к переменным.
В последствии чего задав новое значение переменной все привязанные теги на странице обновятся.
Простой Пример
У нас имеются теги для отображения данных:
Вначале мы привязываем значения HTML тэгов и функций к имени переменной.
Теперь зададим значение переменной.
Одной командой мы разместили во всех привязанных тегах к переменной cost значение 200, а в теге .order_cost_tax разместили значение 240, что на 20% больше чем значение переменной.
Результат:
Написав этот плагин я обнаружил для себя аналогичную функциональность
Я понимал что этот плагин будет выполнять функции React и Angular. Но это не совсем так.
Задача плагина Events быть понятным, простым для новичков, и выполнять свои функции для тех у кого уже подключен jQuery.
Много разработчиков используя jQuery подключают дополнительно весь React чтобы только связывать переменные. А ведь разработчику нужно на сайте только список цен скопировать в корзину.
Это плагин для большинства компаний сайт которых выполняет функцию формы заказа и продажи услуг. Этот плагин предназначен для лендингов для продажи и заказа всего нескольких услуг, т.е. для простых сайтов с простой функциональностью.
Например сайт для фирм: Стоматологического кабинета, или фирмы по продаже могильных плит, мебели или ремонт квартир.
Особенность плагина в том что мы имеем:
Продолжу описание.
Теперь зададим новое значение:
Результат:
Задав функцией jQuery().var('cost',6000); мы автоматически меняем все значения привязанные к cost.
//Все теги и функции привязанные к переменной cost будут удалены.
Второй пример
Создаем новую привязку к переменной:
Заносим
Результат:
Создав форматирование в привязке к тегу. Мы больше не думаем и не беспокоимся об форматах при поступлении новых значений.
Теперь указывая jQuery().var('cost',20); новые значения автоматически отображаются в привязанных HTML тегах.
//Все теги и функции привязанные к переменной cost будут удалены.
Третий пример
Результат
Создав форматирование в привязке к тегу. Мы больше не думаем и не беспокоимся об форматах при поступлении новых значений.
Теперь указывая
новые значения автоматически отображаются в привязанных HTML тегах.
Многие скажут, что jQuery уже свое отжил и он не удовлетворяет потребностям рынка, и поэтому для него писать плагин нет смысла.
А я отвечу, что ведь потому и не удовлетворяет, что в нем не было простых всем нужных функций.
Теперь буду надеяться, что мир станет немножко лучше. И надеюсь что теперь на свет появилось что то интересное.
Как думаете у Вас бы лично пригодился бы плагин в одном из Ваших проектов? Буду рад любым комментариям.
Ваш Сергей.
Назначение плагина, позволить привязывать теги к переменным.
В последствии чего задав новое значение переменной все привязанные теги на странице обновятся.
Простой Пример
У нас имеются теги для отображения данных:
<span class='ammount'>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', '.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% больше чем значение переменной.
Результат:
<span class='ammount'>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='ammount'>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', '.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);
Результат:
<span class='ammount'>Это общая сумма покупки 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', '.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);
Результат
<span class='ammount'>Покупатель Мадонна Чикко́не покупок на сумму 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 уже свое отжил и он не удовлетворяет потребностям рынка, и поэтому для него писать плагин нет смысла.
А я отвечу, что ведь потому и не удовлетворяет, что в нем не было простых всем нужных функций.
Теперь буду надеяться, что мир станет немножко лучше. И надеюсь что теперь на свет появилось что то интересное.
Как думаете у Вас бы лично пригодился бы плагин в одном из Ваших проектов? Буду рад любым комментариям.
Ваш Сергей.