Плагин 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:5};
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() сообщает что массив/объект будет применен целиком к тегу или функции. Подробнее смотреть


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


Благодаря справедливой критике комментаторов ниже. Я доработал и добавил новые функции:
  1. Динамическая привязка массива
  2. Динамическая привязка объекта
  3. Загрузка и выгрузка всех привязок в плагин одной коллекцией.
  4. Форматирование строки с данными объекта почти готово.


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


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

<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([...]);//Загрузка всех переменных в плагин.


Новый план


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

PS


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

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 50

    0
    В последствии чего задав новое значение переменной все привязанные теги на странице обновятся.
    Если я правильно понял, все привязанные теги на странице сначала зададут новое значение переменной в каком-то последствии (не указано, последствии чего), а потом обновятся?
      0
      Не зададут. При привязке тегов, значения тегов остаются по умолчанию, как и были. Но после задания значения переменной jQuery.var() значения будут меняться.
      Там логика проста, при привязке тег просто добавляется в список тегов с именем переменной. Но после присвоения значения переменной, программа проходится по списку по порядку и присваивает новое значения в теги которые находятся в с писке.
      Т.е.
      Если привязать тег и потом отвязать но значение тега НЕ изменится.
      0
      Много разработчиков используя jQuery подключают дополнительно весь React

      Что, простите? Вы вообще реакт видели?
      Никто из тех, кто использует react, не будет тащить в проект jquery. Разве что в каких-нибудь ну очень экзотических случаях.


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

      Плагинов для привязки данных к элементам в своё время были сотни, если не тысячи (и у меня, и, думаю, у других здесь были свои велосипеды для этого), но все они закономерно умерли вместе с jquery.

        0
        Плагинов для привязки данных к элементам в своё время были сотни, если не тысячи (и у меня, и, думаю, у других здесь были свои велосипеды для этого), но все они закономерно умерли вместе с jquery.

        Целая JavaScriptMVC была. На jQuery основанная.

          0

          И backbone с marionette были.

            0
            Посмотрел библиотеки эти. Очень они мудреные.
            Преимущество есть, там можно привязывать списки объектов.
              0
              Вот привязка списка по шаблону:
              jQuery().event('listUsers','.listUser',function(){ 
                  let html = '';
                  for(let user of this){
                      html += "<div> <span>${user.FirsName}</span>  <span>${user.LastName} зарплата:  ${user.Amount} ₽ </div>"
                  }
                  return html;
              })
            +2
            Полно таких случаев. Только люди не всегда об этом знают.
            Они тянут в проект какой-нибудь react-slick (8.6k звезд на гитхабе, 677k weekly downloads, 1.1k зависимых пакетов) и думают что они таки модные, впилили в реакт клёвую карусельку — а там в зависимостях jQuery.
              0
              Там jQuery заявлен не в Dependencies, а в Dev Dependencies.
                0
                Удивительно, но это оказывается порт, а не адаптер. А во Vue именно адаптер и там jQuery точно тянется. И в конкурирующей библиотеке Owl тоже тянется.
              +1

              Ну так и в статье ровно наоборот написано )


              Те у кого (по разным причинам) есть jQuery иногда тащат себе ещё и реакт для вот такого вот интерактива реактивного. Хотя могли обойтись имеющимся jQuery.


              Была ещё дельная статья про страдание тех кто по разным причинам живёт с динозаврами: https://css-tricks.com/reactive-jquery-for-spaghetti-fied-legacy-codebases-or-when-you-cant-have-nice-things/ (из текста ссылки в принципе уже все понятно)


              То что иногда без надобности используют что первое, что второе, когда можно было на ваниле 5ю строчками обойтись я умолчу )

              0
              Нативный JS имеет уже больше полезных функций и методов, чем jQuery. Почему бы вам не попробовать написать то же самое для нативного JS? При правильном подходе его можно сделать еще удобнее и даже быстрее.

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


              В 2020 году поощрять использование jQuery, на мой взгляд, преступление. Сейчас он только мешает новичкам практиковать реально полезные навыки. На рынке много веберов со знанием jQuery, которые либо не нужны, либо их приходится учить с нуля.
                +4

                Ага, как же, имеет он. Разве что querySelector в нативный JS завезли, а в остальном никаких изменений за 20 лет в той области, которую покрывает jQuery. jQuery по-прежнему является очень полезной библиотекой, в которой есть множество удобных функций. Если писать на чистом JS, то придётся реализовывать их самостоятельно или подключать другие библиотеки (лишь бы не jquery, правда?)


                React/Vue/Angular — это всё фреймворки и их значние/незнание никак не коррелирует с jQuery. И задачи они решают разные.

                  –1

                  Большое половины методов jquery уже не нужны в типовых проектах, а в крупных они даже мешают, и порой самостоятельно можно написать более производительные аналоги методов jquery.
                  Я уже года три не практикую jquery, поэтому мне было бы интересно узнать от текущих пользователей, какие методы jquery полезны и востребованы сейчас?

                    +2
                    Не методы, но тем не менее jQuery требуют — select2, datatable. jquery хорош тем, что он простой. Любой бекендер может его взять и нашлепать формочек и табличек в админку. А с react это уже не так, к бекендеру нужен еще и фронтендер. А в итоге все те же таблички и формочки, только стоят они теперь в 3-4 раз дороже. А если в реакт затащить еще и редакс, то и в 10 раз дороже будет.
                      0
                      $('form').hide(600);
                      По Вашему как это реализовать на ваниле с анимацией?
                      PS я модернизировал скрипт, он поддерживает динамические массивы.
                      +1

                      В целом, все верно говорите. Но если посмотреть конкретно на библиотеку, описываемую в статье — там из всего jquery используется $(selector).html(). Что вполне можно заменить на нативные методы.

                        0
                        Да даже тут не все так просто. Если кому-то приспичит использовать библиотеку для SVG-узлов, то с ванилой его ждут проблемы — часть методов в IE превратятся в тыкву (тот же innerHTML).
                        И там куча таких нюансов, о которых знают авторы jQuery, но не знают крикуны «жиквери нинужен, всё делается нативно!» :)

                        Но в целом я согласен, что ради одной строчки можно было бы и постараться. Хотя с другой стороны, какая разница, если плагин все равно написан плохо (как минимум, засирает глобальное пространство имён).
                          0
                          А почему засирает пространство? Там же var указан внутри функции.
                            0
                            только что исправил все VAR на const и let.
                            Так чем же он плох?
                            Пожалуйста опишите список критериев плохого качества.
                            Я этот плагин за 3 дня накатал, Это как бы RC1 версия.
                              0
                              1. Подразумевался сам объект jQuery, который играет роль глобального пространства имен для плагинов. Хорошим тоном считается упаковать весь плагин в одну сущность jQuery.fn.pluginName.
                              2. Непонятно зачем привязывать к переменной селектор, когда в jQuery принято и всем привычно идти от селектора. И обращаться к нему через $.
                              3. Методы ничего не возвращают, то есть чейнинга нет.

                              Итого, плагин игнорирует все писанные и неписанные правила экосистемы jQuery, он чужероден в ней. Конечно, автор имеет право на свое виденье, но при чем тут тогда jQuery, тогда нужно писать независимую библиотеку.
                                0
                                Вроде возращают this везде методы плагина.
                                  0
                                  1. Если плагин упаковать в одну сущность jQuery.fn.pluginName. То тогда смысл и удобство теряется, использования плагина.
                                  2. Переменную к селектору привязывается для абстракции логики. В популярных CMS на PHP функциональность и шаблоны отделены отдельно в добавок отделены от статей. Т.е. в автору не нужно писать внутри материала стили CSS и код формы обратной связи.
                                  Плагин Events нужен для разделения друг от друга Дизайна от Логики программы. Чтобы при написании логики разработчику было не нужно каждый раз думать о символе рублей в конце показываемых сумм и других надписей.
                                  В добавок удобно реализовать поддержку разных языков локализаций.
                                  Логика кода остается не тронута, при этом можно менять строки форматирования отдельно.
                          0
                          Уже подумывал адаптировать к эти методы к объектам HTML элементам на ванильном JS.
                          Вот даже не знаю, новый репозиторий создавать или как?
                          В целом нет пока мысли чтобы писалось красиво на ванильном пользователям при использовании библиотеки.
                          Возможно:
                          Binder.Event(...);
                          Binder.Event(...);
                          Binder.Var(...);
                          
                          let bind1 = new Binder();
                          bind1.event(....);
                          bind1.event(....);
                          bind1.var(....);
                          bind1.var(....);
                          0
                            +1

                            Не соглашусь. Здесь человек решил задачу "сделать просто и понятно", а по вашей ссылке какой-то зубодробительный синтаксис и с ходу не понятно как это работает.

                              0
                              В точку. Сложное должно работать просто.
                              Многие придумывают простые библиотеки со сложной инструкцией.
                              Задача в том чтобы не думать об инструментах при разработке, а думать только о своей поставленной задаче при использовании инструмента.
                                0

                                Очевидное улучшение – не писать jQuery().event на каждый контрол, а делать один вызов и передавать туда объект, например так:


                                jQuery().event({
                                  ".selector1": function(){ /*action1*/ },
                                  ".selector2": function(){ /*action2*/ }
                                })

                                Если думать дальше – имеет смысл сделать отдельные ветки для объекта с данными и с привязкой контролов к данным:


                                {
                                  data: {text: "wow", val: 42},
                                  ui:{
                                    ".title": function(data){ return data.text },
                                    ".value": function(data){ return data.val }
                                  }
                                }

                                А если ещё немного подумать и порешать кучу сопутствующих задач типа условного форматирования, привязки инпутов, пересчёта зависимостей, асинхронной инициализации и пр – то как раз и получится jQuery.my.


                                Кстати, для jQuery-плагинов чётко специфицирован рекомендуемый формат вызовов: если первый аргумент – строка, то она должна быть запрашиваемым действием, типа там "init" или "update".

                                  0
                                  Очевидное улучшение – не писать jQuery().event на каждый контрол, а делать один вызов и передавать туда объект, например так:

                                  jQuery().event() и jQuery().var() — методы для разделения логики интерфейса от бизнес логики.
                                  Использование в jQuery().event() массив объектов для групповой привязки ни чего функционального не добавляет. Легко реализовать в for(){}, ну и если конечно добавить Ваше предложение, то это увеличит модуль и его разработку в 5 раз, при этом усложнит синтаксис. А если Вы поучавствуете в разработке то мы с Вами добавим новый функционал.

                                  Если думать дальше – имеет смысл сделать отдельные ветки для объекта с данными и с привязкой контролов к данным:

                                  Если jQuery().event() легко привязывается к объектам
                                  то что мешает писать так?
                                  jQuery().event('data','.title','{text}');
                                  jQuery().event('data','.value','{val}');
                                  
                                  jQuery().var('data', {text:'wow',val:42});

                                  Объясните почему нужно писать все объектом?, что это за такой код должен быть чтобы все слеплено было в одну соплю?
                                  Если изначально задача была отделить макет от бизнес логики.
                                  Да и мой пример выше делает это красивей, без написания слова function().

                                  При разработке у меня была другая идея. Реализовать возможность как бы пространства имен.
                                  jQuery('.form1').var(....);
                                  jQuery('.form1').event(....);
                                  и
                                  jQuery('.form2').var(....);
                                  jQuery('.form2').event(....);
                                  в не видимости друг друга, что позволит использовать одинаковые имена переменных без конфликтов.
                                    +1

                                    Идея с раздельными .var и .event так себе – потому что вы делаете два плагина вместо одного. Есть устоявшаяся практика и рекомендации jQuery https://learn.jquery.com/plugins/basic-plugin-creation/#minimizing-plugin-footprint.


                                    Объединять в один объект (то, что вы называете «слепить в одну соплю») имеет смысл по очевидной причине: этот объект становится унитарным реюзабельным компонентом (в $.my они называются манифестами). Такой компонент, однажды определённый, можно будет инстанцировать на разные DOM-ноды, подставляя в данные новый объект. Термин «пространство имён» не очень подходит есчо. Каждый инстанс компонента – это, скорее, отдельный scope, а не отдельный namespace.


                                    Есть дополнительный бонус: если написать сериализатор-десериализатор таких объектов в json (в $.my такой есть), эти компоненты можно а) писать-читать в NoSQL базу, б) объединять, в) просто обрабатывать как объекты, а не как код. То-есть вкладывать друг в друга как подчинённые компоненты, мёржить, использовать одни как генерики-прототипы для других более кастомизированных, и пр.


                                    То-есть мёрж-экстенд это примерно так для $.my:


                                    var app = {
                                      data:{x:0, y:0}, // дефолтные значения
                                      ui:{
                                        '.x':(data)=>data.x, 
                                        '.y':(data)=>data.y
                                      }
                                    };
                                    var data1 = {x:5, y:10}, 
                                        data2 = {x:15, z:20};
                                    $('#node1').my(app, data1); // инстанс в #node1 покажет data1 
                                    $('#node2').my( // расширенный инстанс в #node2 покажет data2
                                      $.extend(!0, {ui:{'.z':(data)=>data.z}}, app), // расширяем компонент
                                      data2 // передаём data2 как данные
                                    );

                                    Если вы собираетесь делать что-то большее, чем небольшой статический шаблонизатор (их полно и так, и есть куда короче вашего), вам не избежать усложнения инструмента для упрощения записи компонентов для него.

                                      0
                                      2 вместо 1 плагина, ну да в общем то. Ну так у обоих методов крайне разное предназначение и логика. Иначе простота просто испарится.
                                      Выгрузка и загрузка всех данных в массив, Вы правы было бы полезно. В принципе там выгрузка уже есть, jQuery().var()-выгружаются все переменные, jQuery().event()-выгружаются все методы, jQuery().event('varName')-выгружаются все события для переменной.
                                      Наверно по Вашему совету добавлю и загрузку всех объектов, что-то вроде:
                                      jQuery().event({}) и jQuery().event('varName',{}); загрузка всех событий и загрузка всех событий для переменной.
                                      .
                                      По поводу пространства имен, суть внутри плагина просто будет создаваться различные массивы для разных selector, и хранится все эти разные массивы как бы должны внутри плагина. Значит при вызове плагин смотрит строку селектора и начинает использовать только тот массив ключ которого совпадает с селектором.
                                      Это было бы удобно для создания своего виджета, А как часто бывает вдруг внезапно по приказу свыше виджет нужно клонировать на главной странице сайта.
                                      Да действительно если бы я придерживался требования делать все водном модуле, то решение было бы только одно, делать как плагин MY, от сюда возникают множество мучений и костылей и впихнуть все (не совместимое) в один метод, и это получится сделать только через объект с нужными именами свойств. И если бы я бы взялся бы делать по такому правилу, то, во-первых, была бы потеряна главная идея простота. Во-вторых, второго аналогичного велосипеда с другим именем просто не нужно, никому. Поэтому я согласен с Вами что модуль этот, по сути, должен был быть аналогичный велосипед, но не доделанный, но я не соглашусь с тем, что нужно делать ущербный инструмент в угоду правила 1 вместо 2 модулей.

                                        0

                                        Постойте!..
                                        А как в jQuery.my делать так?
                                        jQuery.event('varOne', '.title');
                                        jQuery.event('varTwo', '.description');


                                        jQuery.var('varOne', 'Заголовок');
                                        jQuery.var('varTwo', 'Текст');
                                        Как в jQuery.My в коде привязку переменных к тегам отделить от задания значения переменного. чтобы например в инициализаторе можно было привязку сделать, а уже в обработчиках событий использовать присвоение значений переменным?

                                          0

                                          Не уверен, что понял вопрос, но всё же:


                                          $('#parentDiv').my({
                                            data: {x:1, y:2},
                                            ui:   {'#x':'x', '#y':'y'} 
                                          });
                                          // чтобы поменять значение извне, используем
                                          // соглашение jquery на команды для плагинов
                                          $('#parentDiv').my('data', {x:15}); // обновится только x

                                          Кроме 'data' у инстанса ещё довольно много других команд, вот тут http://jquerymy.com/api.html#CW-external-c все.

                                            0
                                            Я дополнил плагин новым функционалом,
                                            Посмотрите пожалуйста в описании паблика ДОПОЛНЕНИЕ ниже.
                                            Хочу узнать Ваше мнение, вроде как одно дело делаем, с Вами пытаемся jQuery популизировать. (на github версию обновлю в на днях)
                                              0
                                              Вот такой вариант поддерживается.
                                              $.e({x:'#x', y:'#y'});
                                              $.v({x:15, y:2});

                                        0
                                        Что такое условное форматирование?
                                        Что такое пересчет зависимостей?
                                        Идея хорошая «Асинхронная инициализация». Это типа привязка к переменным декларативным способом?
                                        <div events-var='userName' events-format=' Приветствуем {value} ' events-load='user-init();'></div>

                                          0

                                          Условное форматирование – как в Экселе: если значение отвечает условию 1 (условие – функция), присвоить css .red (а если не отвечает – снять класс .red), если отвечает условию 2 – присвоить/снять класс .blue, и тд.


                                          Пересчёт зависимостей – тоже примерно как в Экселе: если есть инпут #X, инпут #Y и див #R в котором X*Y, див надо пересчитывать на каждое изменение X или Y.


                                          Асинхронная инициализация – это когда вы форму стартуете, а она промис вернула (или оригинальный jQuery object, расширенный промисом, так можно и цепочку не ломает), и ресолвит его только когда закончила зависимости грузить, данные обновлять, рисовать и пр.

                                      0
                                      Я дополнил плагин новым функционалом,
                                      Посмотрите пожалуйста в описании паблика ДОПОЛНЕНИЕ ниже.
                                      Хочу узнать Ваше мнение, вроде как одно дело делаем, с Вами пытаемся jQuery популизировать. (на github версию обновлю в на днях)
                                      +1

                                      Не, автор не дотянул, но думает в том же направлении ))

                                        0
                                        Я просто создал библиотеку конкурирующую jQuery.MY() которая была создана Вами.
                                        1.$.event() имеет черновой вариант. Но благодаря отзывам тут я исправлю все ошибки.
                                        2.$.event() имеет простоту и красоту минимализма.
                                        3.$.event() новых ф-й кроме как «выгрузки/загрузки», «пространства переменных» и «привязка списков с шаблоном» в принципе не будет получать новых функций, которые являются избыточными. Доп.фунции будут перегружать мозг пользователя. Здесь же красота простоты. И уровень входа в библиотеку крайне низок, а это и есть цель библиотеку упростить жизнь.
                                          +1
                                          конкурирующую jQuery.MY()

                                          )) Ок. У меня правда реактивное связывание и из коробки распознаётся куча контролов, то-есть:


                                          $('#parentDiv').my({
                                            data: {x:1, y:2},
                                            ui:   {'#x':'x', '#y':'y'}
                                          })

                                          … привяжет проперти x к DOM-ноде #x вне зависимости от того, что там за нода. Если там div – просто покажет значение; если там input – свяжет этот инпут так, что если в него что-то написать, то в объекте с данными тоже значение обновится; если там например инстанцирован плагин типа select2 или $.ui.slider – реактивно свяжет сразу с плагином полностью скрывая всю многословную механику взаимодействия с ним и отлова его событий.


                                          Доп.фунции будут перегружать

                                          Это как посмотреть. Мультиметоды сильнее перегружают – то-есть когда у вас от аргументов существенно зависит что метод делает, это нехорошо, дохрена всего помнить надо. Чтобы этого избежать и придуманы в соглашении для jquery-плагинов команды – то-есть для анбайнда лучше делать $(selector).event('unbind', 'varName'); для обновления – $(selector).event('update', newValue) и тд. Команды – не самая красивая идея, но точно лучше кучи неочевидных сигнатур одной функции, особенно если вы минимализм декларируете.


                                          Даже просто с точки зрения читаемости лучше: сразу понятно, что написано unbind, не надо угадывать, что там в переменных, которые вы как параметры передали.


                                          В общем, дерзайте ))

                                        0
                                        Я дополнил плагин новым функционалом,
                                        Посмотрите пожалуйста в описании паблика ДОПОЛНЕНИЕ ниже.
                                        Хочу узнать Ваше мнение, вроде как одно дело делаем, с Вами пытаемся jQuery популизировать. (на github версию обновлю в на днях)
                                        +1
                                        Минусы, которые я нашел:

                                        1) Код не выложен на npm или хотя бы на cdn
                                        2) Код не может быть импортирован через require / ES modules
                                        3) Используются var'ы вместо let / const
                                        4) Используется массив arguments вместо rest параметров
                                        5) Форматирование кода хромает, где-то есть пробелы / переводы строк, где-то нет
                                        6) String.prototype.format — изменяет прототип String, это очень плохой подход, так как это изменение затронет строки по всей программе
                                        7) Просить донаты в комментариях к коду? Рили?

                                        Как-то так
                                          0
                                          Я GitHub ом пользоватся не умею. Закачивал туда код через копипаст в веб интерфейсе.
                                          если подскажите что надо изменить для require / ES modules и я досих пор не пойму RequireJS это отдельная библиотека или это нативный код?
                                          подскажите как правильно модулность делать в для нативного JS?
                                          За все Ваши замечания большой респект и уважуха. Я Выпишу этот список в ГитХаб
                                            0
                                            Я GitHub ом пользоватся не умею.

                                            Очень-очень рекомендую поставить себе git и научиться. Без системы управления версиями разработка — это не разработка к мазохизм.
                                            Я лично сделал это по справке, причём, не зная английского языка. Если Вы читаете по английски — проблем вообще быть не должно.

                                            0
                                            Очень прошу Вас напишите пожалуйста код require / ES modules.
                                            Я пытался использовать require, но если это такая библиотека JS, то не понятно как такой способ работает нативно. А если это не может работать без библиотеки, тогда почему нельзя использовать ES modules?
                                              0

                                              Вам больше подойдёт шаблон UMD. Это такая обёртка, которая экспортирует объект разными способами, в зависимости от того, какие доступны.


                                              Здесь описание https://github.com/umdjs/umd


                                              Там есть пример плагина, хотя, не знаю насколько стандартен предлагаемый автором подход.
                                              https://github.com/umdjs/umd/blob/master/templates/jqueryPlugin.js

                                              0
                                              Подскажите пожалуйста.
                                              Я вот сейчас исправляю ошибки в плагине указанные Вами. (хочу добиться правильного кода).
                                              Вопросик. А в чем правильность использования REST вместо ARGUMENTS параметров функции?
                                                0
                                                По нескольким причинам:
                                                1) arguments — на самом деле не совсем массив. В нем нет некоторых встроенных методов, что может создавать проблемы. Rest оператор вернет обычный массив
                                                2) Удобно — в rest массив попадают не все аргументы, а только те, которые ожидаются
                                                3) И банально со стандарта ES6 написание кода через rest параметры более предпочтительно
                                              0
                                              Много разработчиков используя jQuery подключают дополнительно весь React чтобы только связывать переменные.


                                              Необязательно, есть и компактные решения, проверенные временем. Например knockoutJS

                                              Only users with full accounts can post comments. Log in, please.