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.

299 lines
7.3 KiB

3 months ago
  1. # Event PubSub
  2. npm info :
  3. ![event-pubsub npm version](https://img.shields.io/npm/v/event-pubsub.svg) ![total npm downloads for event-pubsub](https://img.shields.io/npm/dt/event-pubsub.svg) ![monthly npm downloads for event-pubsub](https://img.shields.io/npm/dm/event-pubsub.svg)
  4. GitHub info :
  5. ![event-pubsub GitHub Release](https://img.shields.io/github/release/RIAEvangelist/event-pubsub.svg) ![GitHub license event-pubsub license](https://img.shields.io/github/license/RIAEvangelist/event-pubsub.svg) ![open issues for event-pubsub on GitHub](https://img.shields.io/github/issues/RIAEvangelist/event-pubsub.svg)
  6. ***Super light and fast*** Extensible PubSub events and EventEmitters for Node and the browser with support for ES6 by default, and ES5 versions for older verions of node and older IE/Safari versions.
  7. For older versions of node and io.js the latest versions of `event-pubsub` may work with the --harmony flag. Officially though, we support node v4 and newer with es5 and es6
  8. Easy for any developer level. No frills, just high speed events following the publisher subscriber pattern!
  9. [Pretty GitHub.io site](http://riaevangelist.github.io/event-pubsub/)
  10. [See NPM stats for event-pubsub](http://npm-stat.com/charts.html?package=event-pubsub&author=&from=&to=)
  11. **EXAMPLE FILES**
  12. 1. [Node Event PubSub Examples](https://github.com/RIAEvangelist/event-pubsub/tree/master/examples/node)
  13. 2. [Browser Event PubSub Examples](https://github.com/RIAEvangelist/event-pubsub/tree/master/examples/browser)
  14. **Node Install**
  15. `npm i --save event-pubsub`
  16. By default the correct version (ES5/ES6) will be included. You can force the es5/6 version by requiring `event-pubsub/es5` or `event-pubsub/es6`.
  17. **Browser Install**
  18. *see browser examples above or below*
  19. ```html
  20. <script src='path/to/event-pubsub-browser.js'></script>
  21. <!-- OR ES5 for older browser support
  22. <script src='path/to/event-pubsub-browser-es5.js'></script>
  23. -->
  24. ```
  25. # Methods
  26. |Method|Arguments|Description|
  27. |------|---------|-----------|
  28. |subscribe|type (string), handler(function), once (bool/optional)|will bind the `handler` function to the the `type` event. Just like `addEventListener` in the browser. If once is set to true the hander will be removed after being called once.|
  29. |on|same as above|same as above|
  30. |once|type (string), handler(function)| will bind the `handler` function to the the `type` event and unbind it after ***one*** execution. Just like `addEventListener` in the browser withe the `once` option set|
  31. |unSubscribe|type (string), handler(function or *)|will ***un***bind the `handler` function from the the `type` event. If the `handler` is `*`, all handlers for the event type will be removed. Just like `removeEventListener` in the browser, but also can remove all event handlers for the type.|
  32. |off|same as above|same as above|
  33. |publish|type (string), ...data arguments|will call all `handler` functions bound to the event `type` and pass all `...data arguments` to those handlers|
  34. |emit|same as above|same as above|
  35. |trigger|same as above|same as above|
  36. While `publish`, `subscribe`, and `unSubscribe` are the proper method names for the publisher/subscriber model, we have included `on`, `off`, and `emit` as well because these are the most common event method names, and shorter. We have also kept the `trigger` method as an alias for `publish` and `emit` for backwards compatability with earlier versions of `event-pubsub`.
  37. # The ` * ` type
  38. The ` * ` type is a special event type that will be triggered by ***any publish or emit*** the handlers for these should expect the first argument to be the type and all arguments after to be data arguments.
  39. ## Basic Examples
  40. ***NOTE - the only difference between node and browser code is how the `events` variable is created***
  41. * node ` const events = new Events `
  42. * browser `const events = new window.EventPubSub;`
  43. #### Node
  44. ```javascript
  45. // ES5/ES6 now automatically chosen based on node version
  46. const Events = new require('event-pubsub');
  47. const events=new Events;
  48. events.on(
  49. 'hello',
  50. function(data){
  51. console.log('hello event recieved ', data);
  52. events.emit(
  53. 'world',
  54. {
  55. type:'myObject',
  56. data:{
  57. x:'YAY, Objects!'
  58. }
  59. }
  60. )
  61. }
  62. );
  63. events.on(
  64. 'world',
  65. function(data){
  66. console.log('World event got',data);
  67. events.off('*','*');
  68. console.log('Removed all events');
  69. }
  70. );
  71. events.emit(
  72. 'hello',
  73. 'world'
  74. );
  75. ```
  76. #### Basic Chaining
  77. ```javascript
  78. events.on(
  79. 'hello',
  80. someFunction
  81. ).on(
  82. 'goodbye',
  83. anotherFunction
  84. ).emit(
  85. 'hello',
  86. 'world'
  87. );
  88. events.emit(
  89. 'goodbye',
  90. 'complexity'
  91. ).off(
  92. 'hello',
  93. '*'
  94. );
  95. ```
  96. #### Browser
  97. ##### HTML
  98. ```html
  99. <!DOCTYPE html>
  100. <html>
  101. <head>
  102. <title>PubSub Example</title>
  103. <script src='../../event-pubsub-browser.js'></script>
  104. <!-- OR ES5 for older browser support
  105. <script src='../../event-pubsub-browser-es5.js'></script>
  106. -->
  107. <script src='yourAmazingCode.js'></script>
  108. </head>
  109. <body>
  110. ...
  111. </body>
  112. </html>
  113. ```
  114. ##### Inside Your Amazing Code
  115. ```javascript
  116. var events = new window.EventPubSub();
  117. events.on(
  118. 'hello',
  119. function(data){
  120. console.log('hello event recieved ', data);
  121. events.emit(
  122. 'world',
  123. {
  124. type:'myObject',
  125. data:{
  126. x:'YAY, Objects!'
  127. }
  128. }
  129. )
  130. }
  131. );
  132. events.emit(
  133. 'hello',
  134. 'world'
  135. );
  136. events.emit(
  137. 'hello',
  138. 'again','and again'
  139. );
  140. ```
  141. ### Basic Event Emitter and/or Extending Event PubSub
  142. ```javascript
  143. // ES5/ES6 now automatically chosen based on node version
  144. const Events = require('event-pubsub');
  145. // manually include es6
  146. // const Events = require('event-pubsub/es6');
  147. class Book extends Events{
  148. constructor(){
  149. super();
  150. //now Book has .on, .off, and .emit
  151. this.words=[];
  152. }
  153. add(...words){
  154. this.words.push(...words);
  155. this.emit(
  156. 'added',
  157. ...words
  158. );
  159. }
  160. read(){
  161. this.emit(
  162. 'reading'
  163. );
  164. console.log(this.words.join(' '));
  165. }
  166. }
  167. const book=new Book;
  168. book.on(
  169. 'added',
  170. function(...words){
  171. console.log('words added : ',words);
  172. this.read();
  173. }
  174. );
  175. book.add(
  176. 'once','upon','a','time','in','a','cubicle'
  177. );
  178. ```
  179. ##### ES5 extention example
  180. ```javascript
  181. // manually include es5
  182. const Events = require('event-pubsub/es5.js');
  183. function Book(){
  184. //extend happens below
  185. Object.assign(this,new Events);
  186. //now Book has .on, .off, and .emit
  187. this.words=[];
  188. this.add=add;
  189. this.erase=erase;
  190. this.read=read;
  191. function add(){
  192. arguments.slice=Array.prototype.slice;
  193. this.words=this.words.concat(
  194. arguments.slice()
  195. );
  196. this.emit(
  197. 'added',
  198. arguments.slice()
  199. );
  200. }
  201. function read(){
  202. this.emit(
  203. 'reading'
  204. );
  205. console.log(this.words.join(' '));
  206. }
  207. return this;
  208. };
  209. const book=new Book;
  210. book.on(
  211. 'added',
  212. function(...words){
  213. console.log('words added : ',words);
  214. this.read();
  215. }
  216. );
  217. book.add(
  218. 'once','upon','a','time','in','a','cubicle'
  219. );
  220. ```