Что такое dispatch js
Генерация пользовательских событий
Можно не только назначать обработчики, но и генерировать события из JavaScript-кода.
Пользовательские события могут быть использованы при создании графических компонентов. Например, корневой элемент нашего меню, реализованного при помощи JavaScript, может генерировать события, относящиеся к этому меню: open (меню раскрыто), select (выбран пункт меню) и т.п. А другой код может слушать эти события и узнавать, что происходит с меню.
Конструктор Event
Встроенные классы для событий формируют иерархию аналогично классам для DOM-элементов. Её корнем является встроенный класс Event.
Событие встроенного класса Event можно создать так:
По умолчанию все три свойства установлены в false:
Метод dispatchEvent
В примере ниже событие click инициируется JavaScript-кодом так, как будто кликнули по кнопке:
Можно легко отличить «настоящее» событие от сгенерированного кодом.
Свойство event.isTrusted принимает значение true для событий, порождаемых реальными действиями пользователя, и false для генерируемых кодом.
Пример всплытия
Всё, что нужно сделать – это установить флаг bubbles в true :
Механизм всплытия идентичен как для встроенного события ( click ), так и для пользовательского события ( hello ). Также одинакова работа фаз всплытия и погружения.
MouseEvent, KeyboardEvent и другие
Для некоторых конкретных типов событий есть свои специфические конструкторы. Вот небольшой список конструкторов для различных событий пользовательского интерфейса, которые можно найти в спецификации UI Event:
Специфический конструктор позволяет указать стандартные свойства для данного типа события.
Например, clientX/clientY для события мыши:
Полный список свойств по типам событий вы найдёте в спецификации, например, MouseEvent.
Пользовательские события
Свойство detail может содержать любые данные. Надо сказать, что никто не мешает и в обычное new Event записать любые свойства. Но CustomEvent предоставляет специальное поле detail во избежание конфликтов с другими свойствами события.
event.preventDefault()
Для многих браузерных событий есть «действия по умолчанию», такие как переход по ссылке, выделение и т.п.
Для новых, пользовательских событий браузерных действий, конечно, нет, но код, который генерирует такое событие, может предусматривать какие-то свои действия после события.
Вызов event.preventDefault() является возможностью для обработчика события сообщить в сгенерировавший событие код, что эти действия надо отменить.
Посмотрим практический пример – прячущегося кролика (могло бы быть скрывающееся меню или что-то ещё).
Вложенные события обрабатываются синхронно
Исключением является ситуация, когда событие инициировано из обработчика другого события.
Тогда управление сначала переходит в обработчик вложенного события и уже после этого возвращается назад.
В примере ниже событие menu-open обрабатывается синхронно во время обработки onclick :
Порядок вывода: 1 → вложенное событие → 2.
Новый порядок вывода: 1 → 2 → вложенное событие.
Итого
Чтобы сгенерировать событие из кода, вначале надо создать объект события.
Базовый конструктор Event(name, options) принимает обязательное имя события и options – объект с двумя свойствами:
Весьма часто, когда разработчик хочет сгенерировать встроенное событие – это вызвано «кривой» архитектурой кода.
Как правило, генерация встроенных событий полезна в следующих случаях:
Пользовательские события со своими именами часто создают для улучшения архитектуры, чтобы сообщить о том, что происходит внутри наших меню, слайдеров, каруселей и т.д.
Dispatching custom events
We can not only assign handlers, but also generate events from JavaScript.
Custom events can be used to create “graphical components”. For instance, a root element of our own JS-based menu may trigger events telling what happens with the menu: open (menu open), select (an item is selected) and so on. Another code may listen for the events and observe what’s happening with the menu.
Event constructor
Built-in event classes form a hierarchy, similar to DOM element classes. The root is the built-in Event class.
We can create Event objects like this:
options – the object with two optional properties:
dispatchEvent
Then handlers react on it as if it were a regular browser event. If the event was created with the bubbles flag, then it bubbles.
In the example below the click event is initiated in JavaScript. The handler works same way as if the button was clicked:
There is a way to tell a “real” user event from a script-generated one.
The property event.isTrusted is true for events that come from real user actions and false for script-generated events.
Bubbling example
All we need is to set bubbles to true :
The bubbling mechanics is the same for built-in ( click ) and custom ( hello ) events. There are also capturing and bubbling stages.
MouseEvent, KeyboardEvent and others
Here’s a short list of classes for UI Events from the UI Event specification:
The right constructor allows to specify standard properties for that type of event.
Like clientX/clientY for a mouse event:
Please note: the generic Event constructor does not allow that.
Technically, we can work around that by assigning directly event.clientX=100 after creation. So that’s a matter of convenience and following the rules. Browser-generated events always have the right type.
The full list of properties for different UI events is in the specification, for instance, MouseEvent.
Custom events
In the second argument (object) we can add an additional property detail for any custom information that we want to pass with the event.
The detail property can have any data. Technically we could live without, because we can assign any properties into a regular new Event object after its creation. But CustomEvent provides the special detail field for it to evade conflicts with other event properties.
Besides, the event class describes “what kind of event” it is, and if the event is custom, then we should use CustomEvent just to be clear about what it is.
event.preventDefault()
Many browser events have a “default action”, such as navigating to a link, starting a selection, and so on.
For new, custom events, there are definitely no default browser actions, but a code that dispatches such event may have its own plans what to do after triggering the event.
Let’s see a practical example – a hiding rabbit (could be a closing menu or something else).
Below you can see a #rabbit and hide() function that dispatches «hide» event on it, to let all interested parties know that the rabbit is going to hide.
Events-in-events are synchronous
Usually events are processed in a queue. That is: if the browser is processing onclick and a new event occurs, e.g. mouse moved, then it’s handling is queued up, corresponding mousemove handlers will be called after onclick processing is finished.
It’s processed immediately, without waiting for onclick handler to end:
The output order is: 1 → nested → 2.
Let’s say we don’t like it. We’d want onclick to be fully processed first, independently from menu-open or any other nested events.
Then we can either put the dispatchEvent (or another event-triggering call) at the end of onclick or, maybe better, wrap it in the zero-delay setTimeout :
The output order becomes: 1 → 2 → nested.
Summary
To generate an event from code, we first need to create an event object.
The generic Event(name, options) constructor accepts an arbitrary event name and the options object with two properties:
We shouldn’t generate browser events as it’s a hacky way to run handlers. That’s bad architecture most of the time.
Native events might be generated:
Custom events with our own names are often generated for architectural purposes, to signal what happens inside our menus, sliders, carousels etc.
Диспетчеризация по ключу (данные) — JS: Полиморфизм
В связке с полиморфизмом постоянно возникает выражение «динамическая диспетчеризация». С самим понятием мы познакомимся позже, а сейчас поговорим про диспетчеризацию в принципе.
Диспетчеризация (от английского dispatch — отсылать, отправлять) — процесс координации каких-либо действий. Например, диспетчер в аэропорту разводит самолёты, диспетчер в службе такси связывает доступного водителя и клиента.
Рассмотрим условный код, в котором выбор ветки исполнения идёт по конкретному значению переменной:
Во всех проектах существует понятие «среда». Это то окружение, в котором происходит запуск проекта. Во время разработки код запускают в среде разработчика, её традиционно называют development. Среда, в которой приложение работает по-настоящему, называется production. В зависимости от среды приложения по-разному стартуют, конфигурируются и даже работают, например, в разных средах могут использоваться разные базы данных.
Код выше как раз типичный пример того, как меняется конфигурация в зависимости от среды. Процесс выбора можно назвать процессом диспетчеризации.
Статичная условная конструкция, в которой диспетчеризация идёт по строкам, легко заменяется на свитч. Так код становится понятнее и проще:
Хотя кода и стало чуть больше, switch сам по себе более явно описывает процесс диспетчеризации. Но можно пойти ещё дальше и сделать диспетчеризацию по ключу ассоциативного массива:
Этот вариант лучше предыдущих двух сразу по нескольким причинам. Во-первых, он короче, во-вторых, он гибче. Условные конструкции — это статичный код, который нельзя поменять без переписывания самой программы в отличие от последнего варианта. А вот данные — это совсем другое дело. Для удобства их часто кладут в файлы конфигурации, которые используют формат JSON или YAML, например:
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Что такое dispatch js
Генерация событий на элементах
Можно не только назначать обработчики на события, но и генерировать их самому.
Кроме того, события можно генерировать для целей автоматического тестирования.
Вначале рассмотрим современный способ генерации событий, по стандарту DOM 4. Он поддерживается всеми браузерами, кроме IE11-. А далее рассмотрим устаревшие варианты, поддерживаемые IE.
Объект события в нём создаётся при помощи встроенного конструктора Event.
При просмотре примера ниже обработчик onclick на кнопке сработает сам по себе, событие генерируется скриптом:
Отмена действия по умолчанию
Вызов event.preventDefault() является возможностью для обработчика события сообщить в сгенерировавший событие код, что эти действия продолжать не надо.
Другие свойства событий
При создании события браузер автоматически ставит следующие свойства:
Пример со всплытием
Никакой разницы между встроенными событиями ( click ) и своими ( hello ) здесь нет, их можно сгенерировать и запустить совершенно одинаково.
Конструкторы MouseEvent, KeyboardEvent и другие
Для некоторых конкретных типов событий есть свои, специфические, конструкторы.
Вот список конструкторов для различных событий интерфейса которые можно найти в спецификации UI Event:
Специфический конструктор позволяет указать стандартные свойства для данного типа события.
Например, clientX/clientY для события мыши:
Это нельзя было бы сделать с обычным конструктором Event :
Обычный конструктор Event не знает про «мышиные» свойства, поэтому их игнорирует.
Полный список свойств по типам событий вы найдёте в спецификации, например для MouseEvent : MouseEvent Constructor.
Старое API для IE9+
Способ генерации событий, описанный выше, не поддерживается в IE11-, там нужен другой, более старый способ, описанный в стандарте DOM 3 Events.
В нём была предусмотрена иерархия событий, с различными методами инициализации.
Можно использовать этот немного устаревший способ, если нужно поддерживать IE9+. Далее мы на его основе создадим полифилл.
Объект события создаётся вызовом document.createEvent :
Далее событие нужно инициализировать:
Эти два кода аналогичны:
Этот пример с событием hello будет работать во всех браузерах, кроме IE8-:
Выглядят они немного страшновато, например (взято из спецификации):
Для инициализации мышиного события нужно обязательно указать все аргументы, например:
Что такое dispatch js
@dispatchlabs/dispatch-js 
The Dispatch SDK for Node and JavaScript developers.
Please consider following this project’s author, LinkedIn Profile, and consider starring the project to show your ❤️ and support.
The JavaScript version of the SDK may be included on the pae with the following CDN location:
Migrating from disnode_sdk
If you are moving from our previous SDK (disnode_sdk) to this version you will need to replace all occurrences of DisNodeSDK and/or DisJS to Dispatch.
Examples are contained in the examples folder and can be executed in Node using:
To execute the JavaScript examples, open the examples/js/index.html file in a browser window.
Changing the network the SDK talks to
In node_modules/@dispatchlabs/dispatch-js/lib/config.json you will see the various environments. Use development for building and testing,
To change the environment set NODE_ENV:
By default the SDK talks to the production network.
Account constructor. Create an instance of an account, which can then be used to interact with the network.
Examples
Refreshes the account balance and access info (created and updated dates) from a delegate.
Example
Generaes a new private key for the account object (replacing one if present).
Example
Creates and sends a transaction that will transfer tokens from the source account, to the target account.
Params
Example
Creates and sends a transaction from the account that will create a new Smart Contract.
Params
Example
Calls a Smart-Contract from the account that will emulate executing a method and return the result without costing hertz or writing a transaction to the ledger.
Params
Example
Creates and sends a transaction from the account that will execute a method on an existing Smart Contract.
Params
Example
Transaction constructor. Create an instance of a transaction, which can then be sent to a delegate.
Example
Sends the transaction to a delegate.
Example
Requests the current status of the transaction from a delegate.
Example
Waits until the status of the transaction matches the value provided, then resolves. Rejects after 5 seconds or when the transaction hits a non-matching final state.
Params
Example
Static method to compile Solidity code directly.
Params
Example
Static method to compile complex Solidity JSON structures.
Params
Example
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Running Tests
Running and reviewing unit tests is a great way to get familiarized with a library and its API. You can install dependencies and run tests with the following command:
To generate the readme, run the following command:
David Hutchings at Dispatch Labs
Copyright © 2018, Dispatch Labs. Released under the LGPL-2.1 License.
This file was generated by verb-generate-readme, v0.8.0, on October 16, 2018.