• Stars
    star
    105
  • Rank 321,491 (Top 7 %)
  • Language
    JavaScript
  • Created about 9 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A browser-based event emitter, for tying things together.

Knot.js

Knot.js on NPM Knot.js Downloads on NPM Standard JavaScript Style

A browser-based event emitter, for tying things together.

Usage

Knot was developed with a modern JavaScript workflow in mind. To use it, it's recommended you have a build system in place that can transpile ES6, and bundle modules. For a minimal boilerplate that does so, check out outset.

Follow these steps to get started:

Then dig into the API.

Install

Using NPM, install Knot.js, and add it to your package.json dependencies.

$ npm install knot.js --save

Call

Simply import Knot, then call it.

  • Passed no parameters, Knot will return a new emitter
  • Passed an object, Knot will extend it to include the emitter methods

Note that the this context in the event handlers:

  • Is the object passed in, if one was provided
  • Otherwise, it is the emitter itself
// import Knot

import knot from 'knot.js'

// create a new emitter
// in the handlers, 'this' refers to the emitter

const emitter = knot()

// extend an existing object, transforming it into an emitter
// in the handlers, 'this' refers to the Class

const object = new Class()
const extended = knot(object)

API

All methods are chainable.

Knot exposes the following API:

.on(name, handler)

Add a handler to a new or existing event.

// add an anonymous function as a handler

emitter.on('name', () => {
  // ...
})

// add a named function as a handler

const handler = () => {
  // ...
}

emitter.on('name', handler)

.once(name, handler)

Add a handler, that fires only once, to a new or existing event.

// add an anonymous function as a handler

emitter.once('name', () => {
  // ...
})

// add a named function as a handler

const handler = () => {
  // ...
}

emitter.once('name', handler)

.off(name[, handler])

Remove a specific handler from an event.

// handler must be a named function

const handler = () => {
  // ...
}

emitter.off('name', handler)

Remove all of an event's handlers.

emitter.off('name')

.emit(name[, arguments])

Emit an event, firing all of its handlers.

emitter.emit('name')

Optionally, include arguments that will be passed to each handler.

// accept arguments in handler

emitter.on('name', (a, b, c, d) => console.log(a, b, c, d))

// include arguments in call to emit

emitter.emit('name', 1, '2', [3], {})

// LOG: 1 '2' [3] {}

Browser Support

Tested in all modern browsers and IE10+.

License

MIT. © 2017 Michael Cavalea

Built With Love

More Repositories

1

layzr.js

A modern lazy loading library for images.
JavaScript
5,575
star
2

bricks.js

A blazing fast masonry layout generator for fixed width elements.
JavaScript
4,657
star
3

jump.js

A modern smooth scrolling library.
JavaScript
3,472
star
4

gotem

Copy to clipboard for modern browsers in less than 1kb.
JavaScript
429
star
5

outset

A minimal frontend boilerplate, emphasizing workflow.
SCSS
170
star
6

heading-links.js

A small, dependency-free library for deep linking headings - GitHub style.
JavaScript
66
star
7

text-split

Text wrapping for type animations.
JavaScript
46
star
8

nuclear.css

An experiment in generating atomic, immutable, class-based CSS.
CSS
23
star
9

stockpile.js

A tiny localStorage wrapper providing namespacing and typed values.
JavaScript
18
star
10

hsx

Static HTML sites with JSX and webpack (no React).
JavaScript
16
star
11

string-dom

Create HTML strings using JSX (or functions).
JavaScript
13
star
12

maximize.js

A tiny wrapper for cross-browser requestFullscreen.
JavaScript
13
star
13

obzerv

A convenient wrapper around IntersectionObserver for tracking element position relative to the viewport.
JavaScript
11
star
14

string-css

Create CSS-in-JS via tagged template strings.
JavaScript
10
star
15

tail-end

Promise-wrapped CSS animations and transitions (async/await friendly).
HTML
8
star
16

bandito

Boilerplate for mostly-static React frontends.
JavaScript
8
star
17

jax.js

A tiny Promise wrapper for GET requests.
JavaScript
8
star
18

xec

An async script loader, for the browser, built on Promises.
JavaScript
8
star
19

evented-viewport

Viewport width and height utility for JavaScript modules.
JavaScript
7
star
20

ajax-component

A Custom Element that AJAXs its content, style, and scripts.
JavaScript
7
star
21

ique

A queue that runs tasks when the browser is idle.
JavaScript
7
star
22

sublime

My current Sublime Text 3 settings.
6
star
23

next-thing

Frame, tick, and idle functions for the browser.
JavaScript
6
star
24

handmade

DIY build systems, tooling, and more.
JavaScript
6
star
25

selly

Convenient and optimized DOM element selection.
JavaScript
6
star
26

one-ready

A Promise wrapper for DOMContentLoaded that prevents event duplication.
JavaScript
5
star
27

understated

Render stateless components and JSX to real DOM.
JavaScript
5
star
28

outset-lib

A boilerplate for vanilla JavaScript libraries.
JavaScript
5
star
29

dotnot

Access object properties using dot notation.
JavaScript
5
star
30

array-intersect

Array intersection, simplified.
JavaScript
5
star
31

js-trending

GitHub's trending JavaScript repositories as a microservice.
JavaScript
4
star
32

hurry.js

An optimized curry function, for enabling full and partial function application.
JavaScript
3
star
33

outset-react

A boilerplate for React libraries, built with webpack.
JavaScript
3
star
34

reread

Recursively read paths to all files within a folder and its subfolders.
JavaScript
3
star
35

callmecavs.github.io

My personal website.
CSS
3
star
36

handmade-fs

File system tasks for handmade.
JavaScript
2
star
37

ama

You know the drill...
1
star
38

understated-cli

Create understated sites with no configuration.
JavaScript
1
star