Статьи

Bacon.js — Автобус

Август 14, 2018

Шина Bacon.js  является отличным способом публикации и подписки на потоки событий по одному унифицированному каналу. Bus помогает разработчику отделить приложение и делает код намного чище.

Bacon.js Пример автобуса

В этом примере выводится состояние каждого валидатора на html-страницу. Это показывает простой пример публикации / подписки с Bacon.js.

Для начала нам понадобятся несколько скриптов — JQuery, Bacon.js и Bacon.UI.js. 

<html>
<head>
    <title>Bacon.js example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="https://raw.github.com/raimohanska/bacon.js/master/dist/Bacon.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/raimohanska/Bacon.UI.js/master/Bacon.UI.js"></script>

Это фактический код Javascript. Я собираюсь провести вас через это. 

<script type="text/javascript">
        var BUTTON_MESSAGE = "button";
        var NAME_MESSAGE = "name";
        var AGE_MESSAGE = "age";
        var bus = new Bacon.Bus();
        $(function () {
            bus.ofType = function (type) {
                return bus.filter(function (message) {
                    return message.message == type;
                })
            }

            createFormValidators();

            bus.ofType(NAME_MESSAGE)
                .merge(bus.ofType(AGE_MESSAGE))
                .onValue(function(value){
                     $("#fields")
                      .append(value.message + "=" + value.value + "
");
                 })

            bus.ofType(BUTTON_MESSAGE).onValue(function(value){
                $("#validations").append(value.value + "
")
            })
        })

        function createFormValidators() {
            var nameEntered = Bacon.UI.textFieldValue($("#name input")).map(nonEmpty);
            var ageEntered = Bacon.UI.textFieldValue($("#age input")).map(nonEmpty);
            var buttonEnabled = nameEntered.and(ageEntered);
            buttonEnabled.not().assign($("#submitButton button"), "attr", "disabled");
            attachStreamValue(NAME_MESSAGE, nameEntered);
            attachStreamValue(AGE_MESSAGE, ageEntered);
            attachStreamValue(BUTTON_MESSAGE, buttonEnabled);
        }

        function nonEmpty(s) {return s.length > 0}

        function attachStreamValue(message, eventStream){
            eventStream.onValue(function(value){
                bus.push({message:message, value:value});
            })

        }
    </script>

Сначала мы определяем ключи, которые используются, чтобы указать, какое значение перемещается в шине. Издатель добавляет ключ к сообщению, а подписчик слушает, используя ключ.

Мы инициализируем  новый Bacon.Bus (),  который используется как Bus. Определяли новое динамическое свойство  типа  для шины. Свойство используется для фильтрации правильных сообщений для тех, кто когда-либо слушал.

Затем мы создаем валидаторы форм. Начало такое же, как в предыдущем  посте Bacon.js . После этого мы  публикуем  в шину значения потока имен, возраста и кнопки. Сообщение доставляется постоянно, пока пользователь взаимодействует.

После этого мы  подписываемся  на имя и возраст, используя наши ключи  NAME_MESSAGE  и  AGE_MESSAGE . Они передаются в качестве параметра нашему динамическому свойству  типа . Мы также используем  слияние,  которое позволяет пользователю объединить два потока в один. Тогда мы просто  добавляем  значение в разметку.

Последний шаг —  подписаться  на валидацию кнопки, которая сообщает нам, действительна ли вся форма. Это также написано для разметки.

Вот статический HTML, который мы используем в этом примере Bacon.js.

</head>
<body>
<h1>Bacon.js POW!</h1>
<div id="name">
    Name: <input type="text">
</div>
<div id="age">
    Age: <input type="text">
</div>
<div id="submitButton">
    <button>Submit</button>
</div>
<div style="position:relative; float:left;">
    <h4>Combined Validation result:</h4>
    <span id="validations"></span>
</div>

<div style="position:relative; float:left;margin-left:5em">
    <h4>Field validation result:</h4>
    <span id="fields"></span>
</div>
</body>
</html>

Bacon Bus — очень простой механизм публикации / подписки. Его можно использовать от полноценной прикладной шины до простого обмена сообщениями. 

39
Share: