3.2.0 • Published 6 years ago
pocky.js v3.2.0
Pocky.js
A Thin Front-End Library With a few Core Nutrients, but Mostly (Syntactic) Sugar
Front-end project boilerplate.
Application
- Publish/Subscribe Methods for Event Handling/Emitting
- In-memory Data Store by lokijs
- State/URI Routing by navigo
Mediator
- Standard Event Bus/Emitter with explicit scope binding
View
- Lightweight Modular UI Components built with bel
- Update Method for Quick DOM Manipulation/Mutation
Util
- Cookie Storage Interface
Arrayify
- transform an object into an array
- Matrixify
- transform an array into a multi-dimensional array matrix
- Template
- Parse a string of HTML as a Javascript Template Literal
- Random Hex Value
- generate a random hex value of a specified length
- Extend
- iterate over an object's parameters and attach each one to a parent
Usage
Install as npm Module.
npm install --save pocky.js
Grab what you need and start using it.
const { Observable } = require('pocky.js');
const { html } = require('pocky.js').utility;
// create a new observable
const o = new Observable({ param: false });
// grab some DOM elements
const $container = document.querySelector('#container');
const $btn = $container.querySelector('button');
// define a new DOM element not yet on the screen
const $el = html`<div>
<h1>The Parameter is Now True!</h1>
</div>`;
// listen for an 'update' event and fire a callback bound to a given context
o.on('update', o, function(update){
this.param = update;
$container.appendChild($el);
});
// fire the 'update' event on user action
$btn.addEventListener('click', function(){
o.emit('update', true);
});
Create a view to render dynamic data.
const { View } = require('pocky.js');
// define a reusable view class
class HomePage extends View {
constructor(options){
super(options);
}
}
// define instance of view with a parent node
var $hp = new HomePage({
parentNode: document.body
});
// mount view instance to DOM parent
window.addEventListener('load', function(){
$hp.mount();
});
// update the view's data
$hp.data.list = ['red', 'blue', 'yellow'];
// re-render the view instance with the updated data
setTimeout(function(){
$hp.update();
}, 3000);
Build an application.
const { Application, View } = require('pocky.js');
// instantiate an app
const app = new Application();
// define the app's routes
app.router.on({
'/home-page': () => $hp.render(),
'/update-home-page': () => $hp.update();
});
// create a data collection and insert some data
app.db.addCollection('color-list');
app.db.getCollection('color-list').insert({ color: 'red' });
app.db.getCollection('color-list').insert({ color: 'blue' });
app.db.getCollection('color-list').insert({ color: 'yellow' });
// assign the data collection to something like a view
$hp.data.list = app.db.getCollection('color-list').find();
// navigate to a route
window.addEventListener('load', function(){
app.router.navigate('/home-page');
});
// do some more stuff later on
setTimeout(function(){
app.db.getCollection('color-list').insert({ color: 'green' });
app.db.getCollection('color-list').insert({ color: 'purple' });
app.db.getCollection('color-list').insert({ color: 'orange' });
app.router.navigate('/update-home-page');
}, 3000);
3.2.0
6 years ago
3.1.0
6 years ago
3.0.4
6 years ago
3.0.3
6 years ago
3.0.2
6 years ago
3.0.1
6 years ago
3.0.0
6 years ago
2.3.3
7 years ago
2.3.2
7 years ago
2.3.1
7 years ago
2.3.0
7 years ago
2.2.12
7 years ago
2.2.11
7 years ago
2.2.10
7 years ago
2.2.9
7 years ago
2.2.8
7 years ago
2.2.7
7 years ago
2.2.6
7 years ago
2.2.5
7 years ago
2.2.4
7 years ago
2.2.3
7 years ago
2.2.2
7 years ago
2.2.1
7 years ago
2.2.0
7 years ago
2.1.1
7 years ago
2.1.0
7 years ago
2.0.0
7 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.9
7 years ago
1.0.8
7 years ago
1.0.7
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago