提交学习笔记专用
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

205 lines
6.1 KiB

  1. <p align="center">
  2. <img src="https://i.imgur.com/BqsX9NT.png" width="300" height="300" alt="mitt">
  3. <br>
  4. <a href="https://www.npmjs.org/package/mitt"><img src="https://img.shields.io/npm/v/mitt.svg" alt="npm"></a>
  5. <img src="https://github.com/developit/mitt/workflows/CI/badge.svg" alt="build status">
  6. <a href="https://unpkg.com/mitt/dist/mitt.js"><img src="https://img.badgesize.io/https://unpkg.com/mitt/dist/mitt.js?compression=gzip" alt="gzip size"></a>
  7. </p>
  8. # Mitt
  9. > Tiny 200b functional event emitter / pubsub.
  10. - **Microscopic:** weighs less than 200 bytes gzipped
  11. - **Useful:** a wildcard `"*"` event type listens to all events
  12. - **Familiar:** same names & ideas as [Node's EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter)
  13. - **Functional:** methods don't rely on `this`
  14. - **Great Name:** somehow [mitt](https://npm.im/mitt) wasn't taken
  15. Mitt was made for the browser, but works in any JavaScript runtime. It has no dependencies and supports IE9+.
  16. ## Table of Contents
  17. - [Install](#install)
  18. - [Usage](#usage)
  19. - [Examples & Demos](#examples--demos)
  20. - [API](#api)
  21. - [Contribute](#contribute)
  22. - [License](#license)
  23. ## Install
  24. This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.
  25. ```sh
  26. $ npm install --save mitt
  27. ```
  28. Then with a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:
  29. ```javascript
  30. // using ES6 modules
  31. import mitt from 'mitt'
  32. // using CommonJS modules
  33. var mitt = require('mitt')
  34. ```
  35. The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):
  36. ```html
  37. <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
  38. ```
  39. You can find the library on `window.mitt`.
  40. ## Usage
  41. ```js
  42. import mitt from 'mitt'
  43. const emitter = mitt()
  44. // listen to an event
  45. emitter.on('foo', e => console.log('foo', e) )
  46. // listen to all events
  47. emitter.on('*', (type, e) => console.log(type, e) )
  48. // fire an event
  49. emitter.emit('foo', { a: 'b' })
  50. // clearing all events
  51. emitter.all.clear()
  52. // working with handler references:
  53. function onFoo() {}
  54. emitter.on('foo', onFoo) // listen
  55. emitter.off('foo', onFoo) // unlisten
  56. ```
  57. ### Typescript
  58. Set `"strict": true` in your tsconfig.json to get improved type inference for `mitt` instance methods.
  59. ```ts
  60. import mitt from 'mitt';
  61. type Events = {
  62. foo: string;
  63. bar?: number;
  64. };
  65. const emitter = mitt<Events>(); // inferred as Emitter<Events>
  66. emitter.on('foo', (e) => {}); // 'e' has inferred type 'string'
  67. emitter.emit('foo', 42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'. (2345)
  68. ```
  69. Alternatively, you can use the provided `Emitter` type:
  70. ```ts
  71. import mitt, { Emitter } from 'mitt';
  72. type Events = {
  73. foo: string;
  74. bar?: number;
  75. };
  76. const emitter: Emitter<Events> = mitt<Events>();
  77. ```
  78. ## Examples & Demos
  79. <a href="http://codepen.io/developit/pen/rjMEwW?editors=0110">
  80. <b>Preact + Mitt Codepen Demo</b>
  81. <br>
  82. <img src="https://i.imgur.com/CjBgOfJ.png" width="278" alt="preact + mitt preview">
  83. </a>
  84. * * *
  85. ## API
  86. <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
  87. #### Table of Contents
  88. - [mitt](#mitt)
  89. - [all](#all)
  90. - [on](#on)
  91. - [Parameters](#parameters)
  92. - [off](#off)
  93. - [Parameters](#parameters-1)
  94. - [emit](#emit)
  95. - [Parameters](#parameters-2)
  96. ### mitt
  97. Mitt: Tiny (~200b) functional event emitter / pubsub.
  98. Returns **Mitt**
  99. ### all
  100. A Map of event names to registered handler functions.
  101. ### on
  102. Register an event handler for the given type.
  103. #### Parameters
  104. - `type` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [symbol](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol))** Type of event to listen for, or `'*'` for all events
  105. - `handler` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** Function to call in response to given event
  106. ### off
  107. Remove an event handler for the given type.
  108. If `handler` is omitted, all handlers of the given type are removed.
  109. #### Parameters
  110. - `type` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [symbol](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol))** Type of event to unregister `handler` from, or `'*'`
  111. - `handler` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Handler function to remove
  112. ### emit
  113. Invoke all handlers for the given type.
  114. If present, `'*'` handlers are invoked after type-matched handlers.
  115. Note: Manually firing '\*' handlers is not supported.
  116. #### Parameters
  117. - `type` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [symbol](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol))** The event type to invoke
  118. - `evt` **Any?** Any value (object is recommended and powerful), passed to each handler
  119. ## Contribute
  120. First off, thanks for taking the time to contribute!
  121. Now, take a moment to be sure your contributions make sense to everyone else.
  122. ### Reporting Issues
  123. Found a problem? Want a new feature? First of all see if your issue or idea has [already been reported](../../issues).
  124. If don't, just open a [new clear and descriptive issue](../../issues/new).
  125. ### Submitting pull requests
  126. Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.
  127. - Fork it!
  128. - Clone your fork: `git clone https://github.com/<your-username>/mitt`
  129. - Navigate to the newly cloned directory: `cd mitt`
  130. - Create a new branch for the new feature: `git checkout -b my-new-feature`
  131. - Install the tools necessary for development: `npm install`
  132. - Make your changes.
  133. - Commit your changes: `git commit -am 'Add some feature'`
  134. - Push to the branch: `git push origin my-new-feature`
  135. - Submit a pull request with full remarks documenting your changes.
  136. ## License
  137. [MIT License](https://opensource.org/licenses/MIT) © [Jason Miller](https://jasonformat.com/)