Angular.js + Knockout.js

в 11:53, , рубрики: AngularJS, knockoutjs, велосипедостроение, метки: , ,

Недавно я перешел с 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

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js