Как стать автором
Обновить

Angular.js + Knockout.js

Время на прочтение2 мин
Количество просмотров9.6K
Недавно я перешел с 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: Это всего лишь прототип велосипеда, поэтому в нем что-то не будет работать.
Исходники
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Стоит ли развивать?
41.73% Нет, похоронить.106
20.47% Да.52
37.8% я НЛО96
Проголосовали 254 пользователя. Воздержались 115 пользователей.
Теги:
Хабы:
+4
Комментарии2

Публикации

Истории

Работа

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн