callbackbundler

v1.1.0

Published

4 years ago

A JavaScript tool to bundle callbacks and attach to any object that supports event listener.

0High
0Medium
0Low

yqlim

callback callbacks bundler callback bundler callbackbundler

JavaScript - CallbackBundler

A tool to bundle callbacks and attach to any object that supports event listener.

Install

npm

It's recommended to install it as dependency.

npm install --save callbackbundler

browser

Download the callbackbundler.min.js file and include it in your HTML.

<script src="path/to/src/callbackbundler.min.js"></script>

Usage

CommonJS

var CallbackBundler = require('callbackbundler');
var bundle = new CallbackBundler();

Browser

<!--<script src="path/to/src/callbackbundler.min.js"></script>-->
<script>
var bundle = new CallbackBundler();
</script>

API

CallbackBundler is extended from Array.prototype. Therefore, apart from the methods listed below, it can use every Array instance's methods that environment supports. Although, it is not recommended as it might generate unexpected result if handled carelessly.

The examples below will use the functions and variables defined below:

var bundle = new CallbackBundler();

function callback1(){
    console.log(1);
}
function callback2(){
    console.log(this);
}
function callback(e, v){
    console.log(e, v);
}

.add

bundle.add(callback1);
bundle.add(callback2);
bundle.add(callback3);

/* OR */

bundle.add(callback1, callback2, callback3);

.attach

var elem = document.body,       // or any object with event listener API
    api = 'addEventListener',   // or other equivalent methods, i.e., "on"
    type = 'click',             // or other event types, i.e., "keypress"
    otherArgs = { once: true }  // any number of additional arguments can be passed

bundle.attach(elem, api, type, /* optional */otherArgs);

/**
 * When document.body is clicked, console will print:
 * (Using the functions declared above)
 * => 1
 * => <body>...</body>
 * => MouseEvent {...}, undefined
 */

.detach

var elem = document.body,        // or any object with event listener API
    api = 'removeEventListener', // or other equivalent methods, i.e., "on"
    type = 'click';              // or other event types, i.e., "keypress"

bundle.detach(elem, api, type);

// Now when document.body is clicked, nothing will print in console.

.run

bundle.run('thisVal', [  // Pass arguments to each callback by array
    undefined,           // These arguments must be wrapped in another array
    undefined,           // If not an array, item will be auto-wrapped in a new array
    ['argument 0', true] // Using an array, you can pass as many arguments as you want
]);

/**
 * Console will print:
 * => 1
 * => 'thisVal'
 * => 'argument 0', true
 */

Caveat: You need to keep track on the indexes of each callback that you bundled to accurately pass arguments.

.size

console.log(bundle.size);
// => 3

Note: You can also use bundle.length.

.remove

bundle.remove(callback1);
bundle.remove(callback2);
bundle.remove(callback3);

/* OR */

bundle.remove(callback1, callback2, callback3);

Note: Removing callback(s) will not remove it from previously attached event listener. Use with care.

Actual use case?

It will be useful if:

You are building a web app that involves a lot of dynamically created while reactive elements.
You are not using any JavaScript libraries (i.e., jQuery, etc).