Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/taufik-nurrohman/hook
JavaScript hook system.
https://github.com/taufik-nurrohman/hook
hook node utility
Last synced: 17 days ago
JSON representation
JavaScript hook system.
- Host: GitHub
- URL: https://github.com/taufik-nurrohman/hook
- Owner: taufik-nurrohman
- License: mit
- Created: 2020-11-16T23:23:44.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-17T10:12:45.000Z (8 months ago)
- Last Synced: 2024-09-20T06:21:26.516Z (about 2 months ago)
- Topics: hook, node, utility
- Language: JavaScript
- Homepage:
- Size: 22.5 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Hook Utility
============
JavaScript hook system.
Usage
-----
### CommonJS
~~~ js
const {hook} = require('@taufik-nurrohman/hook');
hook(window);
window.on('click', () => console.log('click 1'));
window.on('click', () => console.log('click 2'));
window.on('focus', () => console.log('focus 1'));
console.log(window.hooks);
~~~
### ECMAScript
~~~ js
import {hook} from '@taufik-nurrohman/hook';
hook(window);
window.on('click', () => console.log('click 1'));
window.on('click', () => console.log('click 2'));
window.on('focus', () => console.log('focus 1'));
console.log(window.hooks);
~~~
Methods
-------
### hook(object, objectPrototype)
Create hook properties to an object.
~~~ js
hook(window);
window.addEventListener('resize', () => {
window.fire('window-resize', [{
height: window.innerHeight,
width: window.innerWidth
}]);
});
~~~
#### object.fire(event, data, that)
Fire a hook.
~~~ js
window.addEventListener('resize', () => {
window.fire('window-resize', [{
height: window.innerHeight,
width: window.innerWidth
}]);
});
~~~
~~~ js
window.on('test', function (a, b, c) {
console.log(this); // Returns `Set [1, 2, 3]`
console.log({a, b, c}); // Returns `{ a: 1, b: 2, c: 3 }`
});
window.fire('test', [1, 2, 3], new Set([1, 2, 3]));
~~~
#### object.hooks
Return the added hooks.
~~~ js
console.log(window.hooks);
~~~
#### object.off(event, then)
Remove a hook.
Remove all `window-resize` hooks.
~~~ js
window.off('window-resize');
~~~
Remove `onWindowResize` hook from `window-resize` event.
~~~ js
window.off('window-resize', onWindowResize);
~~~
#### object.on(event, then)
Add a hook.
Add `window-resize` hook anonymously.
~~~ js
window.on('window-resize', data => {
console.log([
data.height,
data.width
]);
});
~~~
Add `window-resize` hook with named function.
~~~ js
function onWindowResize(data) {
console.log([
data.height,
data.width
]);
}
window.on('window-resize', onWindowResize);
~~~
Extends
-------
Extend the hook system to an application.
~~~ js
import {hook} from '@taufik-nurrohman/hook';
class Widget {
constructor() {
this.#data = [];
// This will create `fire`, `hooks`, `off`, and `on` properties
hook(this, this.constructor.prototype);
}
append(datum) {
this.#data.push(datum);
this.fire('update', [datum]);
return this;
}
create(data) {
this.#data = data;
this.fire('create');
return this;
}
destroy() {
this.fire('destroy');
return this;
}
prepend(datum) {
this.#data.unshift(datum);
this.fire('update', [datum]);
return this;
}
}
const widget = new Widget;
widget.on('create', () => {
console.log('Created!');
});
widget.on('destroy', () => {
console.log('Destroyed!');
});
widget.on('update', datum => {
console.log('Added ' + datum);
});
widget.create([1, 2, 3]);
widget.append(4).append(5).append(6);
// `Created!`
// `Added 4`
// `Added 5`
// `Added 6`
~~~