Giter Club home page Giter Club logo

event-pubsub's Introduction

Event PubSub

npm info :
event-pubsub npm version total npm downloads for event-pubsub monthly npm downloads for event-pubsub

GitHub info :
event-pubsub GitHub Release GitHub license event-pubsub license open issues for event-pubsub on GitHub

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.

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

Easy for any developer level. No frills, just high speed events following the publisher subscriber pattern!

Pretty GitHub.io site

See NPM stats for event-pubsub

EXAMPLE FILES

  1. Node Event PubSub Examples
  2. Browser Event PubSub Examples

Node Install
npm i --save event-pubsub
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.

Browser Install
see browser examples above or below

<script src='https://cdn.diginow.it:4433/event-pubsub/event-pubsub-browser.js'></script>
<!-- OR ES5 for older browser support
    <script src='https://cdn.diginow.it:4433/event-pubsub/event-pubsub-browser-es5.js'></script>
-->

Methods

Method Arguments Description
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.
on same as above same as above
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
unSubscribe type (string), handler(function or *) will unbind 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.
off same as above same as above
publish type (string), ...data arguments will call all handler functions bound to the event type and pass all ...data arguments to those handlers
emit same as above same as above
trigger same as above same as above

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.

The * type

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.

Basic Examples

NOTE - the only difference between node and browser code is how the events variable is created

  • node const events = new Events
  • browser const events = new window.EventPubSub;

Node

// ES5/ES6 now automatically chosen based on node version
const Events = new require('event-pubsub');
const events=new Events;

events.on(
    'hello',
    function(data){
        console.log('hello event recieved ', data);
        events.emit(
            'world',
            {
                type:'myObject',
                data:{
                    x:'YAY, Objects!'
                }
            }
        )
    }
);

events.on(
    'world',
    function(data){
        console.log('World event got',data);
        events.off('*','*');
        console.log('Removed all events');
    }
);

events.emit(
    'hello',
    'world'
);

Basic Chaining

events.on(
    'hello',
    someFunction
).on(
    'goodbye',
    anotherFunction
).emit(
    'hello',
    'world'
);

events.emit(
    'goodbye',
    'complexity'
).off(
    'hello',
    '*'
);

Browser

HTML
    <!DOCTYPE html>
    <html>
        <head>
            <title>PubSub Example</title>
            <script src='https://cdn.diginow.it:4433/event-pubsub/event-pubsub-browser.js'></script>
            <!-- OR ES5 for older browser support
                <script src='https://cdn.diginow.it:4433/event-pubsub/event-pubsub-browser-es5.js'></script>
            -->
            <script src='yourAmazingCode.js'></script>
        </head>
        <body>
            ...
        </body>
    </html>
Inside Your Amazing Code
var events = new window.EventPubSub();

events.on(
    'hello',
    function(data){
        console.log('hello event recieved ', data);
        events.emit(
            'world',
            {
                type:'myObject',
                data:{
                    x:'YAY, Objects!'
                }
            }
        )
    }
);

 events.emit(
     'hello',
     'world'
 );

 events.emit(
     'hello',
     'again','and again'
 );

Basic Event Emitter and/or Extending Event PubSub

// ES5/ES6 now automatically chosen based on node version
const Events = require('event-pubsub');
// manually include es6
// const Events = require('event-pubsub/es6');

class Book extends Events{
    constructor(){
        super();
        //now Book has .on, .off, and .emit

        this.words=[];
    }

    add(...words){
        this.words.push(...words);
        this.emit(
            'added',
            ...words
        );
    }

    read(){
        this.emit(
            'reading'
        );
        console.log(this.words.join(' '));
    }
}

const book=new Book;

book.on(
    'added',
    function(...words){
        console.log('words added : ',words);
        this.read();
    }
);

book.add(
    'once','upon','a','time','in','a','cubicle'
);
ES5 extention example
// manually include es5
const Events = require('event-pubsub/es5.js');

function Book(){
    //extend happens below
    Object.assign(this,new Events);
    //now Book has .on, .off, and .emit

    this.words=[];
    this.add=add;
    this.erase=erase;
    this.read=read;

    function add(){
        arguments.slice=Array.prototype.slice;

        this.words=this.words.concat(
            arguments.slice()
        );
        this.emit(
            'added',
            arguments.slice()
        );
    }

    function read(){
        this.emit(
            'reading'
        );
        console.log(this.words.join(' '));
    }

    return this;
};

const book=new Book;

book.on(
    'added',
    function(...words){
        console.log('words added : ',words);
        this.read();
    }
);

book.add(
    'once','upon','a','time','in','a','cubicle'
);

event-pubsub's People

Contributors

riaevangelist avatar vale981 avatar whdahl avatar

Stargazers

Roman avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.