Библиотека jQuery.myData для двустороннего связывания данных

Двустороннее связывание данных (data binding) - это стандартный функционал практически каждого JS фреймворка, который позволяет без особых усилий реализовывать гибкие и функциональные интерфейсы.

Я думаю многим подобный функционал будет по душе, но что же делать когда Вам досталась на поддержку старая кодовая база на VanillaJS или же jQuery/Zepto? Как-раз для такого случая, что-бы хоть как-то ускорить разработку и отзывчивость интерфейса на своём старом сайте (который ну никак нет времени переписывать на одном из фреймворков) - было решено реализовать небольшую jQuery/Zepto библиотеку работа с которой не требовала бы особых знаний или усилий по переделке существующего функционала.

В итоге было решено реализовать 2 основные возможности:

  • связывание HTML элементов с JS объектом
  • вызов функции по событию HTML элемента

 

DATA-ON и DATA-ON-VALUE

Параметр data-on предназначен для указания события (или событий) которые выполнится при определённом действии (по умолчанию это click).

Стоит заметить что вызов функции происходит следующим образом: если функция которая указана в параметре присутствует в привязанном объекте - то будет вызвана функция из него, если же нет то будет произведена попытка вызвать функцию из глобальной области видимости, а после при помощи eval().

В свою очередь data-on-value призван помочь с передачей специфических данных в вызываемую функцию в случае динамического генерирования элемента или в других необходимых случаях.

Инициализация плагина в данном случае происходит путём вызова *.myData( ) к нужному блоку/элементу (и при необходимости прописывается и объект для привязки).

События можно прописывать несколькими вариантами:

  1. Код вызова функции целиком
    • <input type="checkbox" data-on="console.warn( 'change' )"/>
  2. Названия функции
    • <a href="#" class="button" data-on="test" data-on-value="message"/>Test</a>
  3. Указания функции/названия с припиской события по которому функция выполнится
    • <a href="#" class="button" data-on="click:test( 'message' )">Test</a>
  4. Список функций/названий
    • <input type="checkbox" data-on="[ console.warn( 'click' ), console.warn( 'change' ) ]"/>
    • <input type="checkbox" data-on="[ click: console.warn( 'click' ), change: console.warn( 'change' ) ]"/>

 

DATA-BIND

Данный параметр по сути является основным, так как именно он и предназначен для связывания элемента с нужным объектом - для дальнейшего взаимодействия с ним.

Связывание данных происходит следующим образом:

var data = { 
    'time': getTime( ),
    'check': false,
    'test': function( msg ) { alert( 'Test alert: ' + msg ); }
};

$( 'body' ).myData( data, function( type, element, propName, value )
{
    if( key === 'text' ) { $( '#text-output' ).html( value ); }
    else if( key === 'check' ) { $( '#text-input' ).attr( 'disabled', !value ); }
} );

Использование:

<span data-bind="time"></span>

<input type="checkbox" data-bind="check"/>

<label>Text input:</label> <input id="text-input" type="text" data-bind="text"/>
<div>You write: "<span id="text-output">*</span>"</div>

 

Ссылка на репозиторий: https://github.com/ange007/JQuery.myData