floss-js

FLOSS

FLOSS.js - суперлегковесная библиотека (< 1kb) позволяющая создавать обработчики события изменения переменных и свойств объекта.

Выглядит обработчик следующим образом:

FLOSS({
  name: 'name', /* Имя переменной. Если переменной не существует, то она будет создана. */
  value: 'value' /* Изначальное значение переменной. */
  action: function(value){ ... } /* Функция - обработчик события изменения переменной, которая вызывается каждый раз при изменении и котоаря принимает новое значение. Впервые обработчик срабатывает при создания FLOSS обработчика. */,
  defer: true /* Специальный необязательный параметр, откладывающий выполнение обработчика action. Таким образом обработчик сработает впервые при первом изменении переменной, а не по факту добавления обработчика. */
  bind: false /* Контекст переменной. Если контекст не указан, то создается глобальная переменная в window. Однако для  локального отслеживания изменения свойства объекта, сюда следует передавать сам объект. */
});

Рассмотрим два варианта использования FLOSS методов слежения за переменной.

Первый (простой) вариант

Предположим есть переменная state, в которую с сервера приходит текущее состояние. Значение переменной state отображается в браузере пользователя. Каждый раз, когда состояние обновляется нам необходимо изменять DOM дерево, что бы пользователь мог видеть текущее состояние.

    <h1>Тeкущее состояние: <span class="js-state"></span></h1>

<script>
    FLOSS({
        name: 'state', /* создаем глобальную переменную */
        value: 'waiting', /* какое-то default значение, которое будет видеть пользователь, пока ожидает ответа от сервера */
        action: (value) => {
            /* обработчик события изменения. При использовании стрелочной функции, как в этом примепе, следует передавать в функцию новое значение явно. Для обычных функция к новому value можно обращаться через this. */
            document.querySelector('.js-state').innerHTML = value;
        }
    });
</script>

Вот и все. Теперь каждый раз при изменении переменной state (например state = 'Ошибка на сервере') тут же сработает обработчик.

Второй (более продвинутый) вариант

На практике использовать глобальные переменные не всегда удобно. Зачастую используются более сложные структуры и появляется необходимость локально отслеживать изменения свойств того или иного объекта.

Рассмотрим похожую ситуацию. Необходимо дать пользователю возможность контролировать какое-либо состояние. Только теперь у нас есть объект server, содержащий множество разных свойств и методов. Одно из свойств служит хранилищем уведомлений для пользователя.

    var server = {
        state: {
            200: 'OK',
            201: 'Created',
            203: 'Non-Authoritative Information',
            526: 'Invalid SSL Certificate'
        },
        logs: '...',
        status: '200',
        notification: function(){
            return `${this.state[this.status]}, status: ${this.status}`
        }
    }

То есть существует свойство notification формирующее уведомление для пользователя.

html код все тот же:

    <h1>Тeкущее состояние: <span class="js-state"></span></h1>

FLOSS обработчик будет выглядеть следующим образом:

    FLOSS({
        name: 'status', /* свойство, котрое необходимо отслеживать */
        /* value в данном примере отсутствует, так как это значение вычисляется самим объектом */
        action: function(){
            document.querySelector('.js-state').innerHTML = server.notification();
        },
        defer: true, /* отключаем срабатывание action при создании обработчика. Action будет срабатывать только по факту изменения свойства */
        bind: server /* объект, свойсто которое необходимо отслеживать */
    });

Таким образом: при изменении свойства status объекта server будет вызываться метод notification и результат его выполнения отображаться пользователю.

В файле index.html есть еще пример, с которым можно ознакомиться: дсписко имен, строка поиска и динамическое отображение имен удовлетворяющих условиям поиска.