defi.js — это библиотека, включающая в себя дюжину функций, которые добавляют интересные фичи любым JavaScript объектам с помощью геттеров и сеттеров.
Гифка для привлечения внимания (3.5МБ)
Репозиторий
В качестве Hello World создадим небольшой виджет, состоящий из поля имени, фамилии и приветствия (демо).
<input class="first">
<input class="last">
<output class="greeting"></output>
// данные по умолчанию
const obj = {
first: 'John',
last: 'Doe'
};
// слушаем изменения в свойствах first и last
// если произошло изменение, сообщим об этом в консоли
defi.on(obj, 'change:first', () => console.log('First name is changed'));
defi.on(obj, 'change:last', () => console.log('Last name is changed'));
// автоматически генерируем приветствие (свойство greeting) каждый раз,
// когда first или last изменились
defi.calc(obj, 'greeting', ['first', 'last'], (first, last) => `Hello, ${first} ${last}`);
// объявляем двусторонний байндинг между свойствами
// и соответствующими элементами на странице
defi.bindNode(obj, {
first: '.first',
last: '.last',
greeting: '.greeting'
});
В итоге, если first или last изменились, обработчики события сообщают об этом в консоли, свойство greeting автоматически обновляется, а его элемент получает новое значение (по умолчанию, "Hello, John Doe"). Это случается каждый раз, когда свойства меняются, причем не имеет значения, каким образом. Можно установить значение с помощью кода obj.first = 'Jane', либо изменив значение поля, и все остальные изменения произойдут автоматически.
