- PVSM.RU - https://www.pvsm.ru -
Всем привет!
Хочу поведать сообществу про одну библиотеку, над которой я уже работаю продолжительное время.
В своё время я узнал про такие замечательные инструменты как 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, это к примеру, передача множества аргументов в виде одного объекта, возможность связывать вызов методов в цепочку, гибкая поддержка формата входящих параметров, итд.
Итак, основной перечень возможностей библиотеки:
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');
});
Документация на русском [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
Нажмите здесь для печати.