- PVSM.RU - https://www.pvsm.ru -
Недавно я перешел с 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 [1]
Пример ToDo:
plnkr.co/edit/FAcLlC?p=preview [2]
Директивы — обычные ф-ии которые вызываются когда 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);
};
Некоторые факторы в защиту «велосипеда»:
Директивы, хотя в knockoute можно сделать аналогичные, все же из коробки они другие:
bind click: data-bind=«click: on_click()» — указываем то что нужно сделать, вместо указания ф-ии как в knockout (подобно как в angular.js)
bind repeat: — крутим сам элемент, а не его содержимое (подобно как в angular.js)
«Ядро» (пока) состоит всего лишь из примерно 200 строк, поэтому его можно будет легко перепилить под себя.
PS: Это всего лишь прототип велосипеда, поэтому в нем что-то не будет работать.
Исходники [3]
Автор: lega
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/velosipedostroenie/37075
Ссылки в тексте:
[1] plnkr.co/edit/nvDY1k?p=preview: http://plnkr.co/edit/nvDY1k?p=preview
[2] plnkr.co/edit/FAcLlC?p=preview: http://plnkr.co/edit/FAcLlC?p=preview
[3] Исходники: https://bitbucket.org/lega911/angular_light
[4] Источник: http://habrahabr.ru/post/184168/
Нажмите здесь для печати.