Недавно я перешел с knockout.js на angular.js, оба инструмента мне нравятся, но в каждом из них есть свои преимущества перед «конкурентом».
И тут выпал скучный вечер, решил я, just for fun, слепить свой MV* инструмент.
Мне не очень нравятся разухабистые фреймворки, я отдаю предпочтение библиотекам, и от angular мне в основном нужно было 2 вещи: scope — данные и их мониторинг, applyBindings — привязать этот scope к DOM.
С этого я и начал свой велосипед, в итоге у меня есть:
scope = alite.Scope(); - создать scope
alite.applyBindings(scope, dom); - привязать к DOM
Добавим переменную:
scope.title = 'hello';
И сделаем «bind» в DOM:
<h1 data-bind="text: title"></h1>
<input type="text" data-bind="value: title" />
Пример:
plnkr.co/edit/nvDY1k?p=preview
Пример ToDo:
plnkr.co/edit/FAcLlC?p=preview
Директивы — обычные ф-ии которые вызываются когда applyBindings доходит до data-bind, складываем их в alite.directives:
alite.directives.text = function(element, attrs, scope) {
var attr = attrs.text; // Имя параметра
scope.$watch(attr, function(value) { // Подписываемся на изменения
element.text(value); // Выводим значение (через jQuery)
})
var value = scope.$eval(attr); // Получить значение
element.text(value);
};
Некоторые факторы в защиту «велосипеда»:
- В angular мне не всегда нравится «возня» с модулями. (сделал это подобно как в knockout.js)
- Почему data-bind? Что-бы выскакивала ошибка если директивы нет, хотя можно сделать как угодно. (подобно как в knockout.js)
- О jQuery: Angular и Knockout работают без jQuery и поддерживают разные виды браузеров, т.е. у них заложена эта совместимость внутри. Но зачем, если можно использовать jQuery, все равно его приходится подключать (чуть ли не) в каждый проект, ради timepicker, select2 и пр.
(тот же angular.ui требудет jquery). Хотя может он не нужен например для связок Knockout.js + kendo-ui. - «Для angular.js есть много готовых директив!». Несколько последних проектов с angular.js показали что многие готовые директивы либо не подходят либо их нет. В итоге все равно пришлось их делать самому. Поэтому подобный велосипед (но product версии) без готовых директив был бы не хуже чем angular.js
Директивы, хотя в knockoute можно сделать аналогичные, все же из коробки они другие:
bind click: data-bind=«click: on_click()» — указываем то что нужно сделать, вместо указания ф-ии как в knockout (подобно как в angular.js)
bind repeat: — крутим сам элемент, а не его содержимое (подобно как в angular.js)
«Ядро» (пока) состоит всего лишь из примерно 200 строк, поэтому его можно будет легко перепилить под себя.
PS: Это всего лишь прототип велосипеда, поэтому в нем что-то не будет работать.
Исходники
Автор: lega
