- PVSM.RU - https://www.pvsm.ru -

Встречайте Follow.js

Всем привет!
Хочу поведать сообществу про одну библиотеку, над которой я уже работаю продолжительное время.

Немного предистории или с чего всё началось

В своё время я узнал про такие замечательные инструменты как Knockout [1] и Backbone [2].
Вначале я прочитал документацию по Backbone, посмотрел демо-пример и это всё меня немного напрягло.
Слишком много абстракции и кода, хотелось что-то попроще, но с той же гибкость разделения логики приложения.
Далее, почитав про KnockoutJS и пощупав его в действии в песочнице [3] я пришел в некоторый восторг от паттерна MVVM.
Немного поработав с Knockout мне так и не удалось попробовать его в реальном проекте (я работаю в яндексе), хотя по ходу работы я прикидывал в целом, подойдет ли он нам или нет.

Начало

Всё началось с того, что я решил написать расширение для Opera — переводчик текста [4], упрощающий чтение сайтов на иностранном языке. Принцип действия его, как все уже наверное догадались, выделить нужный текст на странице и нажать хоткей (кнопку).
Так вот, это расширение имеет ряд пользовательских настроек, которые хранятся в HTML5 localStorage пользователя.
Мне был необходим инструмент, предоставляющий удобный API для работы с JSON, тогда это было только Getter/Setter-API, возможность подписки и отписки на изменения данных и их сериализация, чтобы сохранить в хранилище.
С того момента я начал вынашивать идеи реализации и возможностей для Follow.js.

Что это такое?

Follow.js [5] — это в первую очередь предельно понятный и удобный инструмент для работы с моделью в JSON-формате.
Во время написания библиотеки я старался создать максимально минималистичный и понятный API (syntax sugar), перенимая разные удобные подходы из того же jQuery, это к примеру, передача множества аргументов в виде одного объекта, возможность связывать вызов методов в цепочку, гибкая поддержка формата входящих параметров, итд.

Итак, основной перечень возможностей библиотеки:

  • Отслеживание изменений любого объекта, массива или свойства модели (model.follow)
  • Возможность создания составных свойств модели, зависящих от других данных модели (model.composite)
  • Легкая сериализация всей модели или любой её части (model.toJSON)
  • Сохранение и восстановление промежуточных состояний модели (model.backup, model.restore)
  • Обновление модели с автоматическим вызовом всех зависимых колбэков (model.merge)
  • Ручной вызов одного или всех слушателей данных модели (model.dispatch)
  • Множественный выбор данных модели при поиске по маске цепочки (RegExp) или простому CSS-селектору на основе данных цепочки (model.select)
  • Бóльшая часть библиотеки должна поддерживатся и на серверном JS (кроме частей follow.domsync.js и follow.select.js)
  • Сборка данных из проектов, работающих с XML/XSL и организация модулей
  • Независимость от внешних библиотек (кроме follow.collector.js и follow.domsync.js)

Пример кода

var model = Follow('sample');

model({
    lang: {
        from: 'en',
        to: 'ru'
    },
    name: {
        first: 'John',
        last: 'Smith'
    }
});

model.follow('lang.to', function( value, params ){
    $('#flag').attr('src', '/icons/'+ value + '.png');
});

model.composite('fullName', function(){
	return this('name.first') +" "+ this('name.last');
});

Ссылки

Исходники на GitHub [5]

Документация на русском [6] (только, пожалуйста, не надо писать про ужасающий цвет фона в документации)

Демо-пример приложения «TODO-list» Follow.js [7] vs Backbone.js [8] для сравнения.

Автор: extensible


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/5698

Ссылки в тексте:

[1] Knockout: http://knockoutjs.com/

[2] Backbone: http://documentcloud.github.com/backbone/

[3] песочнице: http://learn.knockoutjs.com/

[4] переводчик текста: https://addons.opera.com/en/addons/extensions/details/xtranslate/

[5] Follow.js: https://github.com/extensible/follow.js

[6] Документация на русском: http://extensible.github.com/follow.js/docs/

[7] Follow.js: http://extensible.github.com/follow.js/demo/todo.html

[8] Backbone.js: http://documentcloud.github.com/backbone/examples/todos/index.html